你的位置:首页 > ASP.net教程

[ASP.net教程]【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适配了。

是不是很简单?: )