【Win10开发】响应式布局——AdaptiveTrigger

 

接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上，还可以运行在mobile或者其他平台上。那么这样势必会带来一个问题，如何针对不同屏幕来进行布局适配。所以微软提供了响应式布局，通过触发器来实现使UI 适应不同的窗口大小。

首先我们来构造UI，xaml代码如下：

        <StackPanel x:Name="contentPanel" Margin="8,32,0,0">
            <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>
            <TextBlock Text="What's your name?"/>
            <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
                <TextBox x:Name="nameInput" Width="280" HorizontalAlignment="Left"/>
                <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
            </StackPanel>
            <TextBlock x:Name="greetingOutput"/>
        </StackPanel>

UI样子如下：

接下来，添加添加以下代码：

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="pcState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="mobileState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                        <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

名为 pcState 的 VisualState 具有一个 AdaptTrigger，将其MinWindowWidth属性设置为 641。那么在窗口宽度不小于641像素的最小值时应用该状态。此例没有为此状态定义任何 Setter 对象，因此它会将在 XAML 中定义的布局属性用于页面内容。

名为 pcState 的第二个 VisualState 具有一个 AdaptTrigger，其MinWindowWidth属性设置为 0。当窗口宽度大于0小于641像素时，应用此状态。（在等于641像素时，应用 pcState。）在此状态下，定义一些 Setter对象以更改 UI 中控件的布局属性。

 然后我们就会看到这种效果。

当窗口大于0小于641时UI元素就会变化，这样我们就可以很方便的针对不同的屏幕做不同的UI适配了。

是不是很简单？: )