如何在WPF中创建自适应布局？

Question

网站可以设计为使用媒体查询来适应较小的屏幕尺寸。例如，三列显示在宽屏幕上，一列显示在低分辨率手机上。

WPF是否有类似的技术来根据可用屏幕空间或父控件大小调整布局？

例如，我希望在大屏幕上水平显示3列，但在小屏幕上垂直显示。理想情况下，我会这样设计布局：“如果这个控件的宽度小于400磅，那么就以这种方式重新排列这些控件。”

如何在WPF中创建这样的自适应设计？也就是说，为特定父控件大小的控件定义不同的布局？

理想情况下，控件应该重新排列，而不是重复或重新创建，以避免极其缓慢。

Answer 1

最简单的方法是使用DataTriggers和Converter来测试绑定值是大于还是小于参数。

这将允许您根据绑定的值轻松地调整样式设置器。例如，您可以使用

<Style x:Key="MyControlStyle">
    <!-- Default Values -->
    <Setter Property="Grid.Row" Value="0" />
    <Setter Property="Grid.Column" Value="0" />
    <Style.Triggers>
        <DataTrigger Value="True" 
                     Binding="{Binding ActualHeight, ElementName=MyWindow, 
                         Converter={StaticResource IsValueLessThanParameter}, 
                         ConverterParameter=400}">
            <!-- Values to use when Trigger condition is met -->
            <Setter Property="Grid.Row" Value="1" />
            <Setter Property="Grid.Column" Value="1" />
        </DataTrigger>
    </Style.Triggers>
</Style>

如果您有一个更复杂的布局，其中有许多部分会根据某个触发值进行更改，则可以使用触发器替换整个模板，而不仅仅是单个属性

<Style x:Key="MyContentControlStyle" TargetType="{x:Type ContentControl}">
    <Setter Property="ContentTemplate" Value="{StaticResource BigTemplate}" />
    <Style.Triggers>
        <DataTrigger Value="True" 
                     Binding="{Binding ActualHeight, ElementName=MyWindow, 
                         Converter={StaticResource IsValueLessThanParameter}, 
                         ConverterParameter=400}">
            <Setter Property="ContentTemplate" Value="{StaticResource LittleTemplate}" />
        </DataTrigger>
    </Style.Triggers>
</Style>

我相信您还可以绑定到SystemParameters对象，以便在绑定中使用有关应用程序的其他信息，尽管我现在记不起它的确切语法。

Answer 2

如果您使用的是UWP风格的WPF，那么您可以使用AdaptiveTrigger

<AdaptiveTrigger MinWindowWidth="720" MinWindowHeight="900" />

Answer 3

我知道做这样的事情的唯一方法是在代码中，你需要创建一个定制的布局。最简单的方法是创建一个继承自面板的新类，并实现MeasureOverride和ArrangeOverride。我以前做过自定义布局，在所有情况下工作起来都是一件相当痛苦的事情。如果你用谷歌搜索"wpf自定义布局“，你会得到一些很好的例子。考虑到你想要的所有功能，你肯定会有工作要做。您可能希望查看附加的属性，以了解如何在xaml中添加注释，以便让您的代码了解在不同大小下应该包含哪些内容。