使用 AdaptiveTrigger 更改 UI 布局

UWP 应用程序可以在窗口模式和多个设备上运行。它们可以在各种屏幕尺寸上显示，从低端手机到巨大的表面中心屏幕。使用相对定位对于很多场景来说已经足够了，但随着窗口大小的增加，通过将页面控件移动到不同位置来完全更改布局总是很有趣。

在此示例中，我们将在窄屏幕上使用垂直布局，在宽屏幕上使用水平布局。在巨大的宽屏幕上，我们也会改变物品的尺寸。

<Border x:Name="item2"
        Background="Aquamarine"
        Width="50"
        Height="50">
    <TextBlock Text="Item 2"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<Border x:Name="item3"
        Background="LightCoral"
        Width="50"
        Height="50">
    <TextBlock Text="Item 3"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <VisualState x:Name="ultrawide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
                <Setter Target="item1.Width" Value="100" />
                <Setter Target="item1.Height" Value="100" />
                <Setter Target="item2.Width" Value="100" />
                <Setter Target="item2.Height" Value="100" />
                <Setter Target="item3.Width" Value="100" />
                <Setter Target="item3.Height" Value="100" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="narrow" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

调整窗口大小时，系统会将当前窗口的宽度与 AdaptiveTrigger 的最小宽度进行比较。如果当前宽度大于或等于最小宽度，则将激活触发器并显示相应的 VisualState。

这是不同状态的输出

狭窄

宽

超宽