背水一戰 Windows 10 (2) - UI: 概述, 啟動屏幕, 屏幕方向

本文轉載自查看原文 2016-03-10 09:09 1707 UWP

作者：webabcd

介紹
背水一戰 Windows 10 之 UI

UI 設計概述
啟動屏幕（閃屏）
屏幕方向

示例
1、UI 設計概述
UI/Summary.xaml

<Page
    x:Class="Windows10.UI.Summary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.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="10 0 10 10">

            <TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="0 10 10 10">
                <Run>1、UWP - Universal Windows Platform</Run>
                <LineBreak />
                <Run>2、設計 UWP 應用時，要以有效像素（effective pixels）進行設計，而不是以物理像素（physical pixels）進行設計。因為系統會根據設備的像素密度和觀看距離自動縮放</Run>
                <LineBreak />
                <Run>3、有效分辨率 - 以有效像素為單位的分辨率；物理分辨率 - 以物理像素為單位的分辨率</Run>
                <LineBreak />
                <Run>4、對於有效分辨率的理解可以參考 ios 的邏輯分辨率的概念，比如 iPhone 4s 的物理分辨率為 960 * 640，其邏輯分辨率為 480 * 320（設計時按照此分辨率設計）</Run>
                <LineBreak />
                <Run>5、有效分辨率和物理分辨率之間的比例是如何決定的呢？由系統根據設備的像素密度和觀看距離來決定比例</Run>
                <LineBreak />
                <Run>6、當系統縮放 UI 時，會按 4 的倍數（multiples of 4, 從字面上理解不一定是整倍數）進行縮放。若要確保縮放后保持清晰的外觀，請將你的設計貼靠到 4*4 像素網格，使 UI 元素的邊距、大小和位置為 4 個有效像素的倍數</Run>
            </TextBlock>

        </StackPanel>
    </Grid>
</Page>

2、啟動屏幕（閃屏）
UI/MySplashScreen.xaml

<Page
    x:Class="Windows10.UI.MySplashScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!--
        var color = (Color)this.Resources["SystemAccentColor"];
    -->
    <Grid Name="grid" Background="{ThemeResource SystemAccentColor}">

        <Image x:Name="splashImage" Source="/Assets/SplashScreen.png" HorizontalAlignment="Center" />

        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0 0 0 20">
            <ProgressRing IsActive="True" Foreground="White" />
            <TextBlock Name="lblMsg" Text="我是自定義啟動頁，1 秒后跳轉到主頁" Margin="0 10 0 0" />
        </StackPanel>

    </Grid>
</Page>

UI/MySplashScreen.xaml.cs

/*
 * 演示如何自定義啟動屏幕（閃屏）
 * 
 * 說明及應用場景：
 * 1、在 Package.appxmanifest 中可以設置 app 的啟動屏幕，例如: <uap:SplashScreen Image="Assets\SplashScreen.png" BackgroundColor="#ff0000" />，其就是一個顯示在窗口中間的圖片（620 * 300）以及一個全窗口背景色
 * 2、在 app 的啟動屏幕過后，可以顯示一個自定義啟動屏幕
 * 3、在自定義啟動屏幕顯示時，可以做一些程序的初始化工作，初始化完成后再進入主程序
 */

using System;
using System.Threading.Tasks;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10
{
    using Windows10.UI;

    public partial class App
    {
        // partial method，實現了 App.xaml.cs 中的聲明
        partial void OnLaunched_SplashScreen(LaunchActivatedEventArgs args)
        {
            // 啟動后顯示自定義啟動屏幕
            if (args.PreviousExecutionState != ApplicationExecutionState.Running)
            {
                MySplashScreen mySplashScreen = new MySplashScreen(args);
                Window.Current.Content = mySplashScreen;
            }
        }
    }
}

namespace Windows10.UI
{
    public sealed partial class MySplashScreen : Page
    {
        /*
         * SplashScreen - app 的啟動屏幕對象，在 Application 中的若干事件處理器中的事件參數中均可獲得
         *     ImageLocation - app 的啟動屏幕的圖片的位置信息，返回 Rect 類型對象
         *     Dismissed - app 的啟動屏幕關閉時所觸發的事件
         */

        // app 啟動屏幕的相關信息
        private SplashScreen _splashScreen;

        public MySplashScreen()
        {
            this.InitializeComponent();

            lblMsg.Text = "自定義 app 的啟動屏幕，打開 app 時可看到此頁面的演示";
        }

        public MySplashScreen(LaunchActivatedEventArgs args)
        {
            this.InitializeComponent();
            
            ImplementCustomSplashScreen(args);
        }

        private async void ImplementCustomSplashScreen(LaunchActivatedEventArgs args)
        {
            // 窗口尺寸發生改變時，重新調整自定義啟動屏幕
            Window.Current.SizeChanged += Current_SizeChanged;

            // 獲取 app 的啟動屏幕的相關信息
            _splashScreen = args.SplashScreen;

            // app 的啟動屏幕關閉時所觸發的事件
            _splashScreen.Dismissed += _splashScreen_Dismissed;

            // 獲取 app 啟動屏幕的圖片的位置，並按此位置調整自定義啟動屏幕的圖片的位置
            Rect splashImageRect = _splashScreen.ImageLocation;
            splashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            splashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            splashImage.Height = splashImageRect.Height;
            splashImage.Width = splashImageRect.Width;

            await Task.Delay(1000);

            // 關掉自定義啟動屏幕，跳轉到程序主頁面
            var rootFrame = new Frame();
            rootFrame.Navigate(typeof(MainPage), args);
            Window.Current.Content = rootFrame;
            Window.Current.Activate();
        }

        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            // 獲取 app 啟動屏幕的圖片的最新位置，並按此位置調整自定義啟動屏幕的圖片的位置
            Rect splashImageRect = _splashScreen.ImageLocation;
            splashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            splashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            splashImage.Height = splashImageRect.Height;
            splashImage.Width = splashImageRect.Width;
        }

        private void _splashScreen_Dismissed(SplashScreen sender, object args)
        {
            // app 的啟動屏幕關閉了
        }
    }
}

3、屏幕方向
UI/ScreenOrientation.xaml

<Page
    x:Class="Windows10.UI.ScreenOrientation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.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="10 0 10 10">

            <ToggleButton Name="btnLock" Content="鎖定當前方向" IsChecked="False" Checked="btnLock_Checked" Unchecked="btnLock_Unchecked" />

            <TextBlock Name="lblMsg" 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 Windows10.UI
{
    public sealed partial class ScreenOrientation : Page
    {
        public ScreenOrientation()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 使用設備時的推薦方向，一般而言就是當“windows”鍵在下方時，設備的方向。手機一般是 Portrait，平板一般是 Landscape
            lblMsg.Text = "NativeOrientation: " + DisplayInformation.GetForCurrentView().NativeOrientation.ToString();
            lblMsg.Text += Environment.NewLine;

            // 設備的方向（Windows.Graphics.Display.DisplayOrientations 枚舉：None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped）
            // 注：LandscapeFlipped 是 Landscape 翻轉了 180 度，PortraitFlipped 是 Portrait 翻轉了 180 度
            // 注：Landscape 順時針轉（右轉） 90 度是 Portrait，再順時針轉（右轉） 90 度是 LandscapeFlipped
            lblMsg.Text += "CurrentOrientation: " + DisplayInformation.GetForCurrentView().CurrentOrientation.ToString();

            // NativeOrientation 或 CurrentOrientation 發生變化時觸發的事件（NativeOrientation 一般是不會變的）
            DisplayInformation.GetForCurrentView().OrientationChanged += ScreenOrientation_OrientationChanged;
        }

        private void ScreenOrientation_OrientationChanged(DisplayInformation sender, object args)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "NativeOrientation: " + DisplayInformation.GetForCurrentView().NativeOrientation.ToString();
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CurrentOrientation: " + DisplayInformation.GetForCurrentView().CurrentOrientation.ToString();
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            DisplayInformation.GetForCurrentView().OrientationChanged -= ScreenOrientation_OrientationChanged;
        }

        private void btnLock_Checked(object sender, RoutedEventArgs e)
        {
            /* 在 Package.appxmanifest 中可以配置 app 的允許方向，類似如下（如果不配置就是允許任何方向）
               <uap:InitialRotationPreference>
                   <uap:Rotation Preference="portrait" />
                   <uap:Rotation Preference="landscape" />
                   <uap:Rotation Preference="portraitFlipped" />
                   <uap:Rotation Preference="landscapeFlipped" />
               <uap:InitialRotationPreference>
            */

            // DisplayInformation.AutoRotationPreferences - 指定當前 app 的首選方向，即強制通過指定的方向顯示（必須是在 Package.appxmanifest 配置的允許方向之一）
            DisplayInformation.AutoRotationPreferences = DisplayInformation.GetForCurrentView().CurrentOrientation;
            btnLock.Content = "解除方向鎖定";
        }

        private void btnLock_Unchecked(object sender, RoutedEventArgs e)
        {
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.None;
            btnLock.Content = "鎖定當前方向";
        }
    }
}

OK
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。