数据绑定到表单的宽度

Question

我正在尝试动态缩放基于 WPF 的应用程序的 UI，我想使用当前分辨率与本机分辨率的比率，如下所示：

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

我发现 scale transform 的原因是它会缩放容器内的所有 UI 元素，包括框架和子页面。

有没有办法做到这一点？

或者，有没有更好的方法可以根据窗口大小动态缩放应用程序？

Answer 1

WPF is Resolution Independent by nature.

<Window ..>
   <Grid>

   <!-- Content here -->

   </Grid>
</Window>

上述 XAML 将导致 Grid 拉伸到窗口大小。不需要可怕的类似 winforms 的 hack。

编辑：

如果您希望 Everything（包括字体大小）在 Window 内缩放，只需使用 Viewbox：

<Window>
   <Viewbox>
       <Grid>

       <!-- Content here -->

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

Answer 2

最简单的解决方案是使用 Viewbox，但也可以非常简单地计算 Window resize 的比例。

视图框

<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>

手动缩放

<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>

使用 LayoutTransform 来缩放网格，该 LayoutTransform 通过引用编码的 ScaleValue 依赖属性来确定 ScaleX 和 ScaleY 属性，该依赖属性是在 Window_Resize 事件期间使用类似代码的代码计算的

#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);
        }