重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之 系统 UI
- 获取系统的 UI 相关的设置信息
- 屏幕方向
- Snap
- 为 snap 操作和屏幕方向的改变增加动画效果
- 缩放至不同屏幕
- 高对比度
示例
1、演示如何获取系统的 UI 相关的设置信息
UI/UISettingsInfo.xaml.cs
/* * 演示如何获取系统的 UI 相关的设置信息 */ using System; using Windows.UI.ViewManagement; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; namespace XamlDemo.UI { public sealed partial class UISettingsInfo : Page { public UISettingsInfo() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { UISettings uiSettings = new UISettings(); lblMsg.Text = "AnimationsEnabled: " + uiSettings.AnimationsEnabled; // 是否启用动画 lblMsg.Text += Environment.NewLine; lblMsg.Text += "CaretBlinkRate: " + uiSettings.CaretBlinkRate; // 输入光标的闪烁速率 lblMsg.Text += Environment.NewLine; /* * 光标浏览模式（Caret Browsing） - 在页面中会出现一个类似于记事本中的输入光标，用户可以使用键盘（按 Shift 键 + 方向键）来精确地进行页面文字的选择 * IE8 以上可以通过“F7”来打开/关闭光标浏览模式 */ lblMsg.Text += "CaretBrowsingEnabled: " + uiSettings.CaretBrowsingEnabled; // 当前输入光标是否可用于光标浏览模式 lblMsg.Text += Environment.NewLine; lblMsg.Text += "CaretWidth: " + uiSettings.CaretWidth; // 输入光标的宽度 lblMsg.Text += Environment.NewLine; lblMsg.Text += "CursorSize: " + uiSettings.CursorSize; // 指针的尺寸 lblMsg.Text += Environment.NewLine; lblMsg.Text += "DoubleClickTime: " + uiSettings.DoubleClickTime; // 捕获双击时，两次单击间的最长时间 lblMsg.Text += Environment.NewLine; lblMsg.Text += "HandPreference: " + uiSettings.HandPreference; // 用户界面的方向（LeftHanded 或 RightHanded） lblMsg.Text += Environment.NewLine; lblMsg.Text += "MessageDuration: " + uiSettings.MessageDuration; // 消息显示的持续时间，单位：秒 lblMsg.Text += Environment.NewLine; lblMsg.Text += "MouseHoverTime: " + uiSettings.MouseHoverTime; // hover 事件触发之前，指针可以 hover 的时间 lblMsg.Text += Environment.NewLine; lblMsg.Text += "ScrollBarArrowSize: " + uiSettings.ScrollBarArrowSize; // 当前窗口滚动条的箭头的大小 lblMsg.Text += Environment.NewLine; lblMsg.Text += "ScrollBarSize: " + uiSettings.ScrollBarSize; // 当前窗口滚动条的大小 lblMsg.Text += Environment.NewLine; lblMsg.Text += "ScrollBarThumbBoxSize: " + uiSettings.ScrollBarThumbBoxSize; // 当前窗口滚动条 thumb 的大小 lblMsg.Text += Environment.NewLine; // 获取当前系统的相关颜色 lblMsg.Text += "ActiveCaption: " + uiSettings.UIElementColor(UIElementType.ActiveCaption); lblMsg.Text += Environment.NewLine; lblMsg.Text += "Background: " + uiSettings.UIElementColor(UIElementType.Background); lblMsg.Text += Environment.NewLine; lblMsg.Text += "ButtonFace: " + uiSettings.UIElementColor(UIElementType.ButtonFace); lblMsg.Text += Environment.NewLine; lblMsg.Text += "ButtonText: " + uiSettings.UIElementColor(UIElementType.ButtonText); lblMsg.Text += Environment.NewLine; lblMsg.Text += "CaptionText: " + uiSettings.UIElementColor(UIElementType.CaptionText); lblMsg.Text += Environment.NewLine; lblMsg.Text += "GrayText: " + uiSettings.UIElementColor(UIElementType.GrayText); lblMsg.Text += Environment.NewLine; lblMsg.Text += "Highlight: " + uiSettings.UIElementColor(UIElementType.Highlight); lblMsg.Text += Environment.NewLine; lblMsg.Text += "HighlightText: " + uiSettings.UIElementColor(UIElementType.HighlightText); lblMsg.Text += Environment.NewLine; lblMsg.Text += "Hotlight: " + uiSettings.UIElementColor(UIElementType.Hotlight); lblMsg.Text += Environment.NewLine; lblMsg.Text += "InactiveCaption: " + uiSettings.UIElementColor(UIElementType.InactiveCaption); lblMsg.Text += Environment.NewLine; lblMsg.Text += "InactiveCaptionText: " + uiSettings.UIElementColor(UIElementType.InactiveCaptionText); lblMsg.Text += Environment.NewLine; lblMsg.Text += "Window: " + uiSettings.UIElementColor(UIElementType.Window); lblMsg.Text += Environment.NewLine; lblMsg.Text += "WindowText: " + uiSettings.UIElementColor(UIElementType.WindowText); lblMsg.Text += Environment.NewLine; AccessibilitySettings accessibilitySettings = new AccessibilitySettings(); lblMsg.Text += "是否启用了高对比度模式: " + accessibilitySettings.HighContrast; // 是否启用了高对比度模式 } } }
2、演示与“屏幕方向”相关的知识点
UI/ScreenOrientation.xaml
<Page x:Class="XamlDemo.UI.ScreenOrientation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <ToggleButton Name="btnLock" Content="锁定当前方向" IsChecked="False" Checked="btnLock_Checked_1" Unchecked="btnLock_Unchecked_1" /> <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
UI/ScreenOrientation.xaml.cs
/* * 演示与“屏幕方向”相关的知识点 */ using System; using Windows.Graphics.Display; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; namespace XamlDemo.UI { public sealed partial class ScreenOrientation : Page { public ScreenOrientation() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { // 平板上的“windows”键相对于平板本身的方向 lblMsg.Text = "NativeOrientation: " + DisplayProperties.NativeOrientation.ToString(); lblMsg.Text += Environment.NewLine; // 平板的方向（Windows.Graphics.Display.DisplayOrientations 枚举：None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped） // 注：Landscape 顺时针转是 Portrait lblMsg.Text += "CurrentOrientation: " + DisplayProperties.CurrentOrientation.ToString(); // DisplayProperties.CurrentOrientation 发生变化时触发的事件 DisplayProperties.OrientationChanged += DisplayProperties_OrientationChanged; } protected override void OnNavigatedFrom(NavigationEventArgs e) { DisplayProperties.OrientationChanged -= DisplayProperties_OrientationChanged; } void DisplayProperties_OrientationChanged(object sender) { lblMsg.Text += Environment.NewLine; lblMsg.Text += "CurrentOrientation: " + DisplayProperties.CurrentOrientation.ToString(); } private void btnLock_Checked_1(object sender, RoutedEventArgs e) { // DisplayProperties.AutoRotationPreferences - 指定当前 app 所支持的方向，即仅允许设备支持指定的方向（模拟器中无效） // 注：可在 Package.appxmanifest 中指定 DisplayProperties.AutoRotationPreferences = DisplayProperties.CurrentOrientation; btnLock.Content = "解除方向锁定"; } private void btnLock_Unchecked_1(object sender, RoutedEventArgs e) { DisplayProperties.AutoRotationPreferences = DisplayOrientations.None; btnLock.Content = "锁定当前方向"; } } }
3、演示与“snap”相关的知识点
UI/Snap.xaml
<Page x:Class="XamlDemo.UI.Snap" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <Button Name="btnUnsnap" Content="unsnap" Click="btnUnsnap_Click_1" /> <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0"> <Run>snap 可以通过手势操作，也可以通过快捷键：win + .</Run> </TextBlock> </StackPanel> </Grid> </Page>
UI/Snap.xaml.cs
/* * 演示与“snap”相关的知识点 * * 注： * snap 视图的宽度是固定的：320 像素 * 支持 snap 的最小分辨率为 1366 * 768 */ using System; using Windows.UI.Core; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.UI { public sealed partial class Snap : Page { public Snap() { this.InitializeComponent(); Window.Current.SizeChanged += Current_SizeChanged; ShowCurrentApplicationViewState(); } void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e) { ShowCurrentApplicationViewState(); } void ShowCurrentApplicationViewState() { /* * ApplicationView.Value - 获取当前的视图状态（Windows.UI.ViewManagement.ApplicationViewState 枚举） * Snapped - snap 后的小视图 * Filled - snap 后的大视图 * FullScreenLandscape - 全屏水平视图 * FullScreenPortrait - 全屏垂直视图 */ ApplicationViewState currentState = ApplicationView.Value; if (currentState == ApplicationViewState.Snapped) { lblMsg.Text += Environment.NewLine; lblMsg.Text += "This app is snapped"; } else if (currentState == ApplicationViewState.Filled) { lblMsg.Text += Environment.NewLine; lblMsg.Text += "This app is in the fill state"; } else if (currentState == ApplicationViewState.FullScreenLandscape) { lblMsg.Text += Environment.NewLine; lblMsg.Text += "This app is full-screen landscape"; } else if (currentState == ApplicationViewState.FullScreenPortrait) { lblMsg.Text += Environment.NewLine; lblMsg.Text += "This app is full-screen portrait"; } } private void btnUnsnap_Click_1(object sender, RoutedEventArgs e) { /* * ApplicationView.TryUnsnap() - 尝试解除 snap，尝试之后返回当前是否是 unsnapped 状态 */ bool unsnapped = ((ApplicationView.Value != ApplicationViewState.Snapped) || ApplicationView.TryUnsnap()); lblMsg.Text += Environment.NewLine; lblMsg.Text += "unsnapped: " + unsnapped; } } }
4、演示如何为 ApplicationViewState 的变化增加动画效果
UI/ApplicationViewStateAnimation.xaml
<Page x:Class="XamlDemo.UI.ApplicationViewStateAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="48" TextWrapping="Wrap" Text="为 snap 操作和屏幕方向的改变增加动画效果" Foreground="White" Margin="0 0 20 0" /> </StackPanel> <!-- 自定义 ApplicationViewState 变化时的动画效果，由 code-behind 中的 VisualStateManager 控制 关于 VisualState 请参见 XamlDemo/Controls/UI/VisualStateDemo.xaml --> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="Landscape"> <Storyboard> <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="White" /> </Storyboard> </VisualState> <VisualState x:Name="Portrait"> <Storyboard> <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Blue" /> </Storyboard> </VisualState> <VisualState x:Name="Snapped"> <Storyboard> <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Red" /> </Storyboard> </VisualState> <VisualState x:Name="Filled"> <Storyboard> <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Orange" /> </Storyboard> </VisualState> <VisualStateGroup.Transitions> <VisualTransition To="Landscape" GeneratedDuration="0:0:1"> <VisualTransition.GeneratedEasingFunction> <ElasticEase EasingMode="EaseInOut" /> </VisualTransition.GeneratedEasingFunction> </VisualTransition> <VisualTransition To="Portrait" GeneratedDuration="0:0:1"> <VisualTransition.GeneratedEasingFunction> <ElasticEase EasingMode="EaseInOut" /> </VisualTransition.GeneratedEasingFunction> </VisualTransition> <VisualTransition To="Snapped" GeneratedDuration="0:0:1"> <VisualTransition.GeneratedEasingFunction> <ElasticEase EasingMode="EaseInOut" /> </VisualTransition.GeneratedEasingFunction> </VisualTransition> <VisualTransition To="Filled" GeneratedDuration="0:0:1"> <VisualTransition.GeneratedEasingFunction> <ElasticEase EasingMode="EaseInOut" /> </VisualTransition.GeneratedEasingFunction> </VisualTransition> </VisualStateGroup.Transitions> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </Page>
UI/ApplicationViewStateAnimation.xaml.cs
/* * 演示如何为 ApplicationViewState 的变化增加动画效果 */ using Windows.UI.Core; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.UI { public sealed partial class ApplicationViewStateAnimation : Page { public ApplicationViewStateAnimation() { this.InitializeComponent(); Window.Current.SizeChanged += Current_SizeChanged; ChangeViewSate(); } void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e) { ChangeViewSate(); } void ChangeViewSate() { // 根据 ApplicationViewState 的变化触发相应的动画 switch (ApplicationView.Value) { case ApplicationViewState.FullScreenLandscape: VisualStateManager.GoToState(this, "Landscape", true); break; case ApplicationViewState.FullScreenPortrait: VisualStateManager.GoToState(this, "Portrait", true); break; case ApplicationViewState.Snapped: VisualStateManager.GoToState(this, "Snapped", true); break; case ApplicationViewState.Filled: VisualStateManager.GoToState(this, "Filled", true); break; default: break; } } } }
5、演示 WinRT 中关于“缩放至不同屏幕”的概念
UI/Scale.xaml
<Page x:Class="XamlDemo.UI.Scale" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0" HorizontalAlignment="Left"> <TextBlock FontSize="14.667" LineHeight="20" TextWrapping="Wrap"> <Run>1、区分屏幕的指标：尺寸，分辨率，密度</Run> <LineBreak /> <Run>2、最小分辨率为 1024 * 768（无 snap），支持 snap 的最小分辨率为 1366 * 768</Run> <LineBreak /> <Run>3、系统会根据屏幕密度自动进行缩放，也就是说在开发 app 的时候只要考虑分辨率的适应问题即可</Run> <LineBreak /> <Run>4、系统有 3 种缩放倍数：100%, 140%, 180%</Run> <LineBreak /> <Run>5、比如 10.6 寸屏幕：1366*768 会缩放至 100%，1920*1080 会缩放至 140%，2560*1440 会缩放至 180%</Run> <LineBreak /> <Run>6、通过 Window.Current.Bounds 获取到的宽度和高度不是屏幕分辨率，而是屏幕分辨率与缩放相结合之后的值</Run> <LineBreak /> <Run>7、px 是像素，dpi 是密度（每英寸的点数），pt 是 1/72 英寸，px = pt * dpi / 72，WinRT 中与尺寸相关的单位通常是 px</Run> <LineBreak /> <Run>8、Package.appxmanifest 中引用的图片也支持 scale</Run> </TextBlock> <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" /> <!-- 在 /Assets/ 目录内放 3 个目录 scale-100, scale-140, scale-180, 每个目录内均放一个 MyImage.png 文件 它们分别对应 100% 缩放, 140% 缩放, 180% 缩放 通过 /Assets/MyImage.png 引用图片，系统会自动找到并使用对应缩放比的图片 --> <Image Source="/Assets/MyImage.png" Width="100" Height="100" Margin="0 10 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" /> <!-- 在 /Assets/scale/ 目录内放 3 个文件 MyImage.scale-100.png, MyImage.scale-140.png, MyImage.scale-180.png 它们分别对应 100% 缩放, 140% 缩放, 180% 缩放 通过 /Assets/scale/MyImage.png 引用图片，系统会自动找到并使用对应缩放比的图片 --> <Image Source="/Assets/scale/MyImage.png" Width="100" Height="100" Margin="0 10 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" /> </StackPanel> </Grid> </Page>
UI/Scale.xaml.cs
/* * 演示 WinRT 中关于“缩放至不同屏幕”的概念 */ using System; using Windows.ApplicationModel.Resources.Core; using Windows.Graphics.Display; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.UI { public sealed partial class Scale : Page { public Scale() { this.InitializeComponent(); Window.Current.SizeChanged += Current_SizeChanged; ShowInfo(); } void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) { ShowInfo(); } private void ShowInfo() { // 通过 Window.Current.Bounds 获取到的宽度和高度不是屏幕分辨率，而是屏幕分辨率与缩放相结合之后的值 lblMsg.Text = string.Format("Window.Current.Bounds: {0} * {1}", Window.Current.Bounds.Width, Window.Current.Bounds.Height); lblMsg.Text += Environment.NewLine; // 获取屏幕的 dpi（dots per inch） lblMsg.Text += "LogicalDpi: " + DisplayProperties.LogicalDpi.ToString(); lblMsg.Text += Environment.NewLine; // 获取当前的缩放比例（Windows.Graphics.Display.ResolutionScale 枚举：Invalid, Scale100Percent, Scale140Percent, Scale180Percent） lblMsg.Text += "ResolutionScale: " + DisplayProperties.ResolutionScale.ToString(); lblMsg.Text += Environment.NewLine; // 另一个获取当前的缩放比例的方法 string scale; ResourceManager.Current.DefaultContext.QualifierValues.TryGetValue("Scale", out scale); lblMsg.Text += "Scale: " + scale; lblMsg.Text += Environment.NewLine; } } }
6、演示 WinRT 中关于“对比度”的概念
UI/HighContrast.xaml
<Page x:Class="XamlDemo.UI.HighContrast" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="14.667" /> <!-- 注：Package.appxmanifest 中引用的图片也支持 high contrast 有 3 种模式，分别是 1、标准模式 2、黑色主题的高对比度模式 3、白色主题的高对比度模式 系统资源包含了对全部 3 种模式的支持 --> <Button Content="默认的 Button 样式，启用高对比度模式（电脑设置 -> 轻松使用 -> 高对比度）可查看效果" Margin="0 10 0 0" /> <!-- 具体图片文件请查看 /Assets/highContrast/ 目录 1、xxx.contrast-standard.png 对应 标准模式 2、xxx.contrast-black.png 对应 黑色主题的高对比度模式 3、xxx.contrast-white.png 对应 白色主题的高对比度模式 4、xxx.scale-100_contrast-standard.png 或 xxx.contrast-standard_scale-100.png 对应 scale 与 HighContrast 相结合的方式 --> <Image Source="/Assets/highContrast/TheImage.png" Width="200" Height="100" Margin="0 10 0 0" HorizontalAlignment="Left" /> <!-- 通过 ResourceDictionary.ThemeDictionaries 来指定 3 种模式下的不同资源 Default 代表 标准模式 HighContrastBlack 代表 黑色主题的高对比度模式 HighContrastWhite 代表 白色主题的高对比度模式 --> <StackPanel Margin="0 10 0 0"> <StackPanel.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <SolidColorBrush x:Key="TargetForeground" Color="Red"/> </ResourceDictionary> <ResourceDictionary x:Key="HighContrastBlack"> <SolidColorBrush x:Key="TargetForeground" Color="White"/> </ResourceDictionary> <ResourceDictionary x:Key="HighContrastWhite"> <SolidColorBrush x:Key="TargetForeground" Color="Black"/> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary> </StackPanel.Resources> <TextBlock Text="启用高对比度模式可查看效果" FontSize="14.667" Foreground="{StaticResource TargetForeground}" /> </StackPanel> </StackPanel> </Grid> </Page>
UI/HighContrast.xaml.cs
/* * 演示 WinRT 中关于“对比度”的概念 */ using Windows.ApplicationModel.Resources.Core; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; namespace XamlDemo.UI { public sealed partial class HighContrast : Page { public HighContrast() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { string contrast; // 获取当前的对比度模式 ResourceManager.Current.DefaultContext.QualifierValues.TryGetValue("Contrast", out contrast); lblMsg.Text = "current contrast: " + contrast; } } }
OK
[源码下载]