UWP自适应布局

VisualStateManager与AdaptiveTriggers

介绍

VisualStateManager（视觉状态管理器）可以管理应用的可视化状态，比如界面元素的位置和大小，颜色。这样就可以实现UWP的真正意义，只写一份代码就可以在任何分辨率的设备上使用。

AdaptiveTriggers（自适应触发器）可以在里面设定一些条件，当其里面的条件满足时就会被触发。

使用

创建<VisualStateManagerGroup>然后创建一组<VisualState>给它命名，命名主要是说明这一组是适用于什么设备上的。比如<VisualState x:Name="VisualStatePhone">就是适用于手机上的。然后再在<VisualState>下面写触发器<VisualState.StateTriggers>和在这个触发器被触发后应用界面需要怎么设置<VisualState.Setters>。下面就是代码：

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="VisualStatePhone">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ColorGrid.Background" Value="Red"/>
                        <Setter Target="MessageTextBlock.FontSize" Value="18"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="VisualStateTable">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ColorGrid.Background" Value="Yellow"/>
                        <Setter Target="MessageTextBlock.FontSize" Value="36"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="VisualStateDesktop">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ColorGrid.Background" Value="Blue"/>
                        <Setter Target="MessageTextBlock.FontSize" Value="48"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

设备相关视图

介绍

创建适用于特定设备类型的app专用视图，并且当程序运行时，将会根据当前运行的设备类型选择特定试图。

使用

1. 在项目中创建两个文件夹，一个叫DeviceFamily-Desktop另一个叫DeviceFamily-Mobile.
   通过创建这些文件夹，任何我添加进去的页面都可以在app运行时被使用。

2. 也可以直接在根目录下创建DeviceFamily.Mobile.xaml和DeviceFamily.Desktop.xaml,效果
   是一样的。