重新想象 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
[源碼下載]