如何在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

如果你正在使用WPF的UWP風格，那么你可以使用AdaptiveTrigger ：

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

Answer 3

我知道做這樣的事情的唯一方法是在代碼中，你需要創建一個自定義布局。 最簡單的方法是創建一個繼承自Panel的新類，並實現MeasureOverride和ArrangeOverride。 我之前已經完成了自定義布局，並且它們最終會成為一個相當大的痛苦，以適應所有情況。 如果你谷歌“wpf自定義布局”，你會得到一些很好的例子。 鑒於您想要的所有功能，您肯定會為您完成工作。 您可能希望查看附加屬性，以了解如何在xaml中添加注釋，以便讓您的代碼了解應該包含在不同大小的內容。