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专用视图,并且当程序运行时,将会根据当前运行的设备类型选择特定试图。
使用
-
在项目中创建两个文件夹,一个叫
DeviceFamily-Desktop
另一个叫DeviceFamily-Mobile
.
通过创建这些文件夹,任何我添加进去的页面都可以在app运行时被使用。 -
也可以直接在根目录下创建
DeviceFamily.Mobile.xaml
和DeviceFamily.Desktop.xaml
,效果
是一样的。