如何在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对象以在绑定中使用有关应用程序的其他信息,尽管我现在还记不起它的确切语法.