使用AdaptiveTrigger实现自适应布局

Dear 丶 2022-07-14 09:44 231阅读 0赞

这篇博客将介绍如何在UWP开发中使用AdaptiveTrigger实现自适应布局。

场景1：窗体宽度大于800时，窗体背景色为绿色，窗体在0到800之间为蓝色。

![622438-20161205222528491-674840406.gif][]

XAML Code:

![复制代码][copycode.gif]

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowStates">
                
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="LayoutRoot.Background" Value="Green" />
                    </VisualState.Setters>
                </VisualState>
                
                <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>

![复制代码][copycode.gif]

在VisualStateGroup中有两组VisualState对Grid的背景色进行了设置。

场景2：一个窗体上面有一个TextBlock，TextBox，Button。当窗体宽度合适时，这三个控件水平排放；缩小窗体后，垂直排放。

![622438-20161205225529194-869525603.gif][]

XAML Code:

![复制代码][copycode.gif]

![复制代码][copycode.gif]

VisualState.Setter的Target中RalativePanel的内容都用括号圈起来了是因为这些都是附加属性。这里同时引入了一个UWP支持的布局控件RelativePanel，关于RelativePanel布局，

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

[622438-20161205222528491-674840406.gif]: /images/20220714/5691ed59ec6945879d250f1f6b0f1628.png
[copycode.gif]: /images/20220714/2fd414f6462b466eb4f754623692ecb4.png
[622438-20161205225529194-869525603.gif]: /images/20220714/e04ff6c3eeef43c09aac1f76a0d126a9.png