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

网站可以设计为适应使用媒体查询的较小屏幕尺寸。例如，宽屏幕上的三列，低分辨率手机上的一列。如何在WPF中创建自适应布局？

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

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

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

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

来源

2012-12-23 Athari

你的意思是单独使用XAML，或者是你正在寻找一种方式在代码中做到这一点？ – Zipper

@Zipper当然，我希望在XAML中以声明方式执行此操作。如果它不可能立即，我不介意写一些框架代码。但最终，我想描述没有任何程序代码的布局。 – Athari

最简单的方法是用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对象，以便在绑定中使用有关应用程序的附加信息，尽管我现在不记得它的确切语法。

来源

2012-12-27 17:54:21 Rachel

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

来源

2012-12-24 19:21:31 Zipper

这实际上很容易用'DataTriggers'来完成，它可以根据父控件的ActualWidth和ActualHeight属性更改布局属性甚至是DataTemplate。你不需要代码中的自定义布局 – Rachel

如果您使用WPF的UWP味道，那么你可能会使用AdaptiveTrigger：

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

来源

2016-06-07 10:02:44

考虑到UWP和WPF大多是不相关的技术，我会说“XWL GUI的UWP味道”或类似的东西。 :)我不知道这样的事情是否存在WPF。也许子类DataTrigger可以工作。 – Athari

够公平的。它们非常相似，可以让你在UWP上非常高效，学习你在这个过程中不能使用的部分。有时你会发现新的东西，就像我今天用'AdaptiveTrigger'做的那样。 –

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

回答

相关问题