原文:
重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInformation
重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInformation
作者：webabcd
介绍
重新想象 Windows 8.1 Store Apps 之系统 UI 的新特性
- Theme - 主题（共有两种主题：Light 和 Dark，默认是 Dark）
- 窗口宽度可调
- ApplicationView
- DisplayInformation
示例
1、Theme - 主题（共有两种主题：Light 和 Dark，默认是 Dark）
Theme.xaml
<Page x:Class="Windows81.UI.Theme" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows81.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"> <!-- 关于 ThemeResource 的全部信息请参见：http://msdn.microsoft.com/en-us/library/windows/apps/dn518235.aspx --> <StackPanel Name="root" Margin="120 0 0 0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBlock FontSize="14.667" Name="lblMsg" /> <TextBlock FontSize="14.667" Text="xbox one 的主要目标是创造一个生动的娱乐体验" Margin="0 10 0 0" /> <Button Name="btnChangeTheme" Click="btnChangeTheme_Click" Margin="0 10 0 0">change theme</Button> </StackPanel> </Grid> </Page>
Theme.xaml.cs
/* * Theme - 主题（共有两种主题：Light 和 Dark，默认是 Dark） * 关于 Theme 的基础请参见 http://www.cnblogs.com/webabcd/archive/2013/09/02/3295840.html 中的“High Contrast”一节 * * * 1、应用程序级别指定 Theme 的话，在 App.xaml 中做如下声明 <Application RequestedTheme="Dark"></Application> * 2、FrameworkElement 级别指定 Theme 的话，则指定 FrameworkElement.RequestedTheme 即可 */ using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows81.UI { public sealed partial class Theme : Page { public Theme() { this.InitializeComponent(); } // 动态变换主题 private void btnChangeTheme_Click(object sender, RoutedEventArgs e) { if (root.RequestedTheme == ElementTheme.Default) // 未指定 root 的主题 { if (Application.Current.RequestedTheme == ApplicationTheme.Dark) // application 是 Dark 主题 { root.RequestedTheme = ElementTheme.Light; } else { root.RequestedTheme = ElementTheme.Dark; } } else if (root.RequestedTheme == ElementTheme.Dark) // root 是 Dark 主题 { root.RequestedTheme = ElementTheme.Light; } else // root 是 Light 主题 { root.RequestedTheme = ElementTheme.Dark; } // 当前 Application 级别的 Theme lblMsg.Text = "application theme: " + Application.Current.RequestedTheme.ToString(); lblMsg.Text += Environment.NewLine; // 当前 root 的 Theme lblMsg.Text += "FrameworkElement theme: " + root.RequestedTheme.ToString(); } } }
2、在 win8.1 中窗口宽度可调（之前win8中snap的概念已经去掉了），并且支持在一个屏幕上同时显示两个以上的应用
ResizableWindows.xaml
<Page x:Class="Windows81.UI.ResizableWindows" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows81.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" Margin="0 10 0 0" /> <Button Name="btnLaunchBrowser" Content="LaunchUriAsync 或 LaunchFileAsync 时，新打开的 app 的窗口模式" Click="btnLaunchBrowser_Click" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
ResizableWindows.xaml.cs
/* * 在 win8.1 中窗口宽度可调（之前win8中snap的概念已经去掉了），并且支持在一个屏幕上同时显示两个以上的应用 * * * 关于可调窗口宽度，在 manifest 中有一个设置如下，可以设置最小宽度为 320 或 500（默认） * <?xml version="1.0" encoding="utf-8"?> * <Package xmlns="http://schemas.microsoft.com/appx/2010/manifest" xmlns:m2="http://schemas.microsoft.com/appx/2013/manifest"> * <Applications> * <Application> * <VisualElements> * <!-- * win8.1 中没有 snap 的概念了，默认最小窗口宽度为 500 像素（1x） * 窗口的最小宽度的设置有两种可能 * 1、width500（默认） * 2、width320 * --> * <ApplicationView MinWidth="width500" /> * </VisualElements> * </Applications> * </Package> * * * 另外： * 1、由于窗口宽度可变，要注意 app 在各种可能宽度下的 UI 显示，以及各种弹出框是否正常 * 2、由于没有 snap 的概念了，所以 ApplicationView.Value, ApplicationView.TryUnsnap, ApplicationViewState 等相关的 API 均无效了。相关可用的 API 请参见：ApplicationViewDemo.xaml */ using System; using Windows.Graphics.Display; using Windows.System; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows81.UI { public sealed partial class ResizableWindows : Page { public ResizableWindows() { this.InitializeComponent(); // 窗口尺寸发生变化时触发的事件 Window.Current.SizeChanged += Current_SizeChanged; } void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) { lblMsg.Text = "width: " + e.Size.Width.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "height: " + e.Size.Height.ToString(); lblMsg.Text += Environment.NewLine; lblMsg.Text += "ResolutionScale: " + DisplayInformation.GetForCurrentView().ResolutionScale; } private async void btnLaunchBrowser_Click(object sender, RoutedEventArgs e) { /* * LauncherOptions 的基础请参见：http://www.cnblogs.com/webabcd/archive/2013/06/13/3133447.html * * 在 win8.1 中其新增了一个属性 * DesiredRemainingView - 启动目标应用程序后，自己要如何显示（ViewSizePreference 枚举） * Default - 由系统设置，默认是 UseHalf * UseLess - 打开目标后，自己使用 50% 以下的可用水平屏幕像素 * UseHalf - 打开目标后，自己使用 50% 的可用水平屏幕像素 * UseMore - 打开目标后，自己使用 50% 以上的可用水平屏幕像素 * UseMinimum - 打开目标后，自己使用 package.appxmanifest 中指定的 app 最小宽度（320 或 500） * UseNone - 打开目标后，自己消失 */ var uri = new Uri("http://webabcd.cnblogs.com"); var options = new LauncherOptions(); options.DesiredRemainingView = ViewSizePreference.UseMinimum; bool success = await Launcher.LaunchUriAsync(uri, options); } } }
3、演示 ApplicationView 的应用
ApplicationViewDemo.xaml
<Page x:Class="Windows81.UI.ApplicationViewDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows81.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" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
ApplicationViewDemo.xaml.cs
/* * 演示 ApplicationView 的应用 */ using System; using Windows.UI.ViewManagement; using Windows.UI.Xaml.Controls; namespace Windows81.UI { public sealed partial class ApplicationViewDemo : Page { public ApplicationViewDemo() { this.InitializeComponent(); ApplicationView aw = ApplicationView.GetForCurrentView(); // 当前 app 是否与屏幕左边缘相邻 lblMsg.Text = "AdjacentToLeftDisplayEdge: " + aw.AdjacentToLeftDisplayEdge; lblMsg.Text += Environment.NewLine; // 当前 app 是否与屏幕右边缘相邻 lblMsg.Text += "AdjacentToRightDisplayEdge: " + aw.AdjacentToRightDisplayEdge; lblMsg.Text += Environment.NewLine; // 当前 app 的方向（ApplicationViewOrientation 枚举：Landscape, Portrait） lblMsg.Text += "Orientation: " + aw.Orientation; lblMsg.Text += Environment.NewLine; // 当前 app 是否是全屏 lblMsg.Text += "IsFullScreen: " + aw.IsFullScreen; lblMsg.Text += Environment.NewLine; // 当前 app 是否在锁屏上 lblMsg.Text += "IsFullScreen: " + aw.IsOnLockScreen; lblMsg.Text += Environment.NewLine; // 当前 app 是否可被截屏（可以将其设置为禁用） lblMsg.Text += "IsFullScreen: " + aw.IsScreenCaptureEnabled; // 当前 app 的 title // 第一种场景：左侧的“曾经打开的软件列表”中的 app 的标题 // 第二种场景：在 win8.1 中 metro 程序可以在桌面上运行，本例中其 title 就是“webabcd - windows81” aw.Title = "webabcd"; } } }
4、演示 DisplayInformation 的应用（原来 win8 中的 DisplayProperties 不再使用）
DisplayInformationDemo.xaml
<Page x:Class="Windows81.UI.DisplayInformationDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows81.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" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
DisplayInformationDemo.xaml.cs
/* * 演示 DisplayInformation 的应用（原来 win8 中的 DisplayProperties 不再使用） */ using System; using Windows.Graphics.Display; using Windows.UI.Xaml.Controls; namespace Windows81.UI { public sealed partial class DisplayInformationDemo : Page { public DisplayInformationDemo() { this.InitializeComponent(); DisplayInformation di = DisplayInformation.GetForCurrentView(); // 缩放比例（Invalid, Scale100Percent, Scale120Percent, Scale140Percent, Scale150Percent, Scale160Percent, Scale180Percent, Scale225Percent） lblMsg.Text = "ResolutionScale: " + di.ResolutionScale; lblMsg.Text += Environment.NewLine; // 平板的方向（Windows.Graphics.Display.DisplayOrientations 枚举：None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped） // 注：Landscape 顺时针转是 Portrait lblMsg.Text += "CurrentOrientation: " + di.CurrentOrientation; lblMsg.Text += Environment.NewLine; // 平板上的“windows”键相对于平板本身的方向 lblMsg.Text += "NativeOrientation: " + di.NativeOrientation; lblMsg.Text += Environment.NewLine; // 每英寸的像素 lblMsg.Text += "LogicalDpi: " + di.LogicalDpi; lblMsg.Text += Environment.NewLine; // x 方向每英寸的像素 lblMsg.Text += "RawDpiX: " + di.RawDpiX; lblMsg.Text += Environment.NewLine; // y 方向每英寸的像素 lblMsg.Text += "RawDpiY: " + di.RawDpiY; lblMsg.Text += Environment.NewLine; // 设备是否支持 3D lblMsg.Text += "StereoEnabled: " + di.StereoEnabled; lblMsg.Text += Environment.NewLine; // 指定当前 app 所支持的方向，即仅允许设备支持指定的方向（模拟器中无效） // 注：可在 Package.appxmanifest 中指定 lblMsg.Text += "AutoRotationPreferences: " + DisplayInformation.AutoRotationPreferences; // 当显示需要重新绘制时触发的事件 // DisplayInformation.DisplayContentsInvalidated // 当 CurrentOrientation 或 NativeOrientation 发生变化时触发的事件 // di.OrientationChanged // 当 LogicalDpi 发生变化时触发的事件 // di.DpiChanged // 当 StereoEnabled 发生变化时触发的事件 // di.StereoEnabledChanged // 获取当前国际色彩联合会 (ICC) 颜色配置文件 // di.GetColorProfileAsync() // 当“颜色配置文件”发生变化时触发的事件 // mdi.ColorProfileChanged } } }
OK
[源码下载]
