[UWP开发] - Adaptive Trigger Featurede的使用方法及效果

　　XAML代码：

 <Page.Resources>
        <!-- DataTemplate to use in the portrait layout. -->
        <DataTemplate x:Key="PhoneTemplate">
            <Pivot x:Name="rootPivot" Title="PIVOT TITLE">
                <Pivot.RightHeader>
                    <CommandBar ClosedDisplayMode="Compact">
                        <AppBarButton Icon="Back" Label="Previous" Click="BackButton_Click"/>
                        <AppBarButton Icon="Forward" Label="Next" Click="NextButton_Click"/>
                    </CommandBar>
                </Pivot.RightHeader>
                <PivotItem Header="Pivot Item 1">
                    <!--Pivot content goes here-->
                    <TextBlock Text="Content of pivot item 1."/>
                </PivotItem>
                <PivotItem Header="Pivot Item 2">
                    <!--Pivot content goes here-->
                    <TextBlock Text="Content of pivot item 2."/>
                </PivotItem>
                <PivotItem Header="Pivot Item 3">
                    <!--Pivot content goes here-->
                    <TextBlock Text="Content of pivot item 3."/>
                </PivotItem>
            </Pivot>
        </DataTemplate>
        <!-- DataTemplate to use in the minimal layout. -->
        <DataTemplate x:Key="WindowsTemplate">
            <Grid Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock FontSize="50" Grid.Column="0" Text="Content of pivot item 1."/>
                <TextBlock FontSize="50" Grid.Column="1" Text="Content of pivot item 1."/>
                <TextBlock FontSize="50"  Grid.Column="2" Text="Content of pivot item 1."/>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="Phone">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="320"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MyContentControl.ContentTemplate" Value="{StaticResource PhoneTemplate}"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Desktop">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1024"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MyContentControl.ContentTemplate" Value="{StaticResource WindowsTemplate}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ContentControl Name="MyContentControl">
        </ContentControl>
    </Grid>

　　运行效果：

　　当在windows 10里把窗口缩小到1024之后，呈现的控件是Pviot，如果窗口大于或等于1024，那就会启用Grid的那个模板。从VisualState里可以看出他的banding方式是可以用静态资源绑定的。