重新想象 Windows 8 Store Apps (56)

豆包ko

　　[源码下载]




重新想象 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











　　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








snap 可以通过手势操作，也可以通过快捷键：win + .




　　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

























































　　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







1、区分屏幕的指标：尺寸，分辨率，密度

2、最小分辨率为 1024 * 768（无 snap），支持 snap 的最小分辨率为 1366 * 768

3、系统会根据屏幕密度自动进行缩放，也就是说在开发 app 的时候只要考虑分辨率的适应问题即可

4、系统有 3 种缩放倍数：100%, 140%, 180%

5、比如 10.6 寸屏幕：1366*768 会缩放至 100%，1920*1080 会缩放至 140%，2560*1440 会缩放至 180%

6、通过 Window.Current.Bounds 获取到的宽度和高度不是屏幕分辨率，而是屏幕分辨率与缩放相结合之后的值

7、px 是像素，dpi 是密度（每英寸的点数），pt 是 1/72 英寸，px = pt * dpi / 72，WinRT 中与尺寸相关的单位通常是 px

8、Package.appxmanifest 中引用的图片也支持 scale









　　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

































　　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
[源码下载]