Databinding to the width of a form

Question

I am trying to dynamically scale my UI of my WPF based application, I'd like to use the ratio of the current resolution and my native resolution using something like this:

    <Grid.LayoutTransform>
        <ScaleTransform CenterX="0" CenterY="0" ScaleX="{Binding FormWidth/NativeREsolution}" ScaleY="{Binding FormWidth/NativeREsolution}"/>
    </Grid.LayoutTransform>

The reason why I found scale transform is it scales all the UI elements within the container, including frames and subpages.

is there anyway to do this?

Alternatively is there a better way to dynamically scale an application depending on the size of the window?

Answer 1

WPF is Resolution Independent by nature.

<Window ..>
   <Grid>

   <!-- Content here -->

   </Grid>
</Window>

The above XAML will cause the Grid to stretch to the Window size. No horrendous winforms-like hacks required.

Edit:

if you want Everything (including Font Sizes) to scale within a Window, just use a Viewbox:

<Window>
   <Viewbox>
       <Grid>

       <!-- Content here -->

       </Grid>
   </Viewbox>
</Window>

Answer 2

The simplest solution would be to use a Viewbox but it's also possible to calculate the scale on Window resize quite simply.

ViewBox

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Viewbox Stretch="Uniform">
    <Grid>
        <Label>
            Hello world
        </Label>
    </Grid>
</Viewbox>
</Window>

Manual scaling

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" 
    Name="myMainWindow"
    Width="200" Height="250">
<Grid Name="MainGrid" SizeChanged="MainGrid_SizeChanged">
    <Grid.LayoutTransform>
        <ScaleTransform x:Name="ApplicationScaleTransform"
                        CenterX="0"
                        CenterY="0"
                        ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
                        ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
    </Grid.LayoutTransform>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
        <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
        <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
    </Grid>
</Grid>

where the grid is scaled using a LayoutTransform that determines the ScaleX & ScaleY properties by referring to a coded ScaleValue dependency property that is calculated during the Window_Resize event using code looking something like

#region ScaleValue Dependency Property

    public static readonly DependencyProperty ScaleValueProperty = DependencyProperty.Register("ScaleValue", typeof(double), typeof(MainWindow), new UIPropertyMetadata(1.0, new PropertyChangedCallback(OnScaleValueChanged), new CoerceValueCallback(OnCoerceScaleValue)));

    private static object OnCoerceScaleValue(DependencyObject o, object value)
    {
        MainWindow mainWindow = o as MainWindow;
        if (mainWindow != null)
            return mainWindow.OnCoerceScaleValue((double)value);
        else
            return value;
    }

    private static void OnScaleValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        MainWindow mainWindow = o as MainWindow;
        if (mainWindow != null)
            mainWindow.OnScaleValueChanged((double)e.OldValue, (double)e.NewValue);
    }

    protected virtual double OnCoerceScaleValue(double value)
    {
        if (double.IsNaN(value))
            return 1.0f;

        value = Math.Max(0.1, value);
        return value;
    }

    public double ScaleValue
    {            
        get
        {
            return (double)GetValue(ScaleValueProperty);
        }
        set
        {
            SetValue(ScaleValueProperty, value);
        }
    }
    #endregion


    private void CalculateScale()
        {
            double yScale = ActualHeight / 250f;
            double xScale = ActualWidth / 200f;
            double value = Math.Min(xScale, yScale);
            ScaleValue = (double)OnCoerceScaleValue(MainGrid, value);
        }