使用 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。

這是不同狀態的輸出

狹窄

寬

超寬