11

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

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

例如，我想在大屏幕上水平显示 3 列，但在小屏幕上垂直显示。理想情况下，我想制定这样的布局：“如果此控件的宽度小于 400 磅，请以这种方式重新排列这些控件。”

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

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

4

3 回答 3

21

The easiest way to do this is with DataTriggers and a Converter to test if the bound value is greater or less than a parameter.

This will allow you to easily adjust the style setters based on a bound value. For example, you could use

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

In the case where you have a more complex layout with many pieces that change based on some triggered value, you can replace entire Templates with your trigger instead of just individual properties

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

I believe you can also bind to the SystemParameters object to use additional information about the application in your bindings, although I can't remember the exact syntax for it right now.

于 2012-12-27T17:54:21.097 回答
3

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

<AdaptiveTrigger MinWindowWidth="720" MinWindowHeight="900" />
于 2016-06-07T10:02:44.823 回答
1

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

于 2012-12-24T19:21:31.043 回答