首页 > 代码库 > 重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInformation

重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInformation

原文:重新想象 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
[源码下载]

重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInformation