這篇部落格將介紹如何在UWP開發中使用AdaptiveTrigger實現自適應佈局。

場景1：窗體寬度大於800時，窗體背景色為綠色，窗體在0到800之間為藍色。

XAML Code:

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup 
 
x:Name="WindowStates">
            <!--Windows's size >= 800, background green-->
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="800" />
                </VisualState.StateTriggers
 
>
                <VisualState.Setters>
                    <Setter Target="LayoutRoot.Background" Value="Green" />
                </VisualState.Setters>
            </VisualState>
            <!--Windows's size >0 and < 800, background blue-->
            <
 
VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="LayoutRoot.Background" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

在VisualStateGroup中有兩組VisualState對Grid的背景色進行了設定。

場景2：一個窗體上面有一個TextBlock，TextBox，Button。當窗體寬度合適時，這三個控制元件水平排放；縮小窗體後，垂直排放。

XAML Code:

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <RelativePanel HorizontalAlignment="Stretch">
        <TextBlock x:Name="MyTextBlock" Text="TextBlock" Margin="5,10"/>

        <TextBox x:Name="MyTextBox" Text="TextBox" Width="200" Margin="5,10"/>

        <Button x:Name="MyButton" Content="Button" Margin="5,10" Width="200" />
    </RelativePanel>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="WindowState">
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyTextBox.(RelativePanel.RightOf)" Value="MyTextBlock" />
                    <Setter Target="MyButton.(RelativePanel.RightOf)" Value="MyTextBox" />
                </VisualState.Setters>
            </VisualState>
            
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyTextBox.(RelativePanel.Below)" Value="MyTextBlock" />
                    <Setter Target="MyTextBox.(RelativePanel.AlignLeftWith)" Value="MyTextBlock" />
                    <Setter Target="MyButton.(RelativePanel.Below)" Value="MyTextBox" />
                    <Setter Target="MyButton.(RelativePanel.AlignLeftWith)" Value="MyTextBlock" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

VisualState.Setter的Target中RalativePanel的內容都用括號圈起來了是因為這些都是附加屬性。這裡同時引入了一個UWP支援的佈局控制元件RelativePanel，關於RelativePanel佈局，

可以參考：https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.relativepanel.aspx