如何在WPF中创建自适应布局? [英] How can I create an adaptive layout in WPF?

问题描述

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

A website can be designed to adapt to smaller screen sizes using media queries. For example, three columns on a wide screen, one column on a low-resolution phone.

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

Is there a similar technique for WPF to adjust the layout based on available screen space or parent control size?

例如，我想在大屏幕上水平显示3列，而在小屏幕上垂直显示3列.理想情况下，我想这样设计布局:如果此控件的宽度小于400点，则以这种方式重新排列这些控件."

For example, I'd like to have 3 columns displayed horizontally on a large screen, but displayed vertically on smaller screen. Ideally, I'd like to formulate layouts like this: "If this control's width is less than 400 points, rearrange these controls in that way."

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

How can I create an adaptive design like this in WPF? That is, define different layouts for controls for specific parent control sizes?

理想的控件应该重新排列，而不是重复或重新创建，以免过慢.

Ideally controls should be rearranged instead of duplicated or recreated, to avoid being extremely slow.

推荐答案

最简单的方法是使用 Converter 以测试绑定值是大于还是小于参数.

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>

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

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.

这篇关于如何在WPF中创建自适应布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！