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

来源:http://www.cnblogs.com/webabcd/archive/2016/03/10/5260546.html
-Advertisement-
Play Games

背水一戰 Windows 10 之 UI: UI 設計概述, 啟動屏幕（閃屏）, 屏幕方向


[源碼下載]


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



作者：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
[源碼下載]


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vs2010開發鏈接伺服器出現錯誤（SourceSafe）
    用vs2010開發項目鏈接伺服器時出現 之前是因為許可權問題，每次打開項目文件時 ，都要先直接進伺服器然後打開項目。 用了兩天，又不行了。就這個問題已經問了了老大不下3次了。 其實很是不想再麻煩他老人家的啦，在網上找的解決方案說是這樣設置 菜單欄==》調試==》選項和設置==》源代碼管理==》當前源代
  • WCF學習之旅——第一個WCF示例（一）
    最近需要用到WCF，所以對WCF進行瞭解。在實踐中學習新知識是最快的，接下來先做了一個簡單的WCF服用應用示例。 本文的WCF服務應用功能很簡單，卻涵蓋了一個完整WCF應用的基本結構。希望本文能對那些準備開始學習WCF的初學者提供一些幫助。 在這個例子中，我將實現一個簡單的書籍數據查詢功能（Book...
  • mvc自定義全局異常處理
    異常信息處理是任何網站必不可少的一個環節，怎麼有效顯示，記錄，傳遞異常信息又成為重中之重的問題。本篇將基於上篇介紹的html2cancas截圖功能，實現mvc自定義全局異常處理。先看一下最終實現效果：http://yanweidie.myscloud.cn/Home/Index 閱讀目錄 我理解中好
  • OOD、OOP、AOP區別
    OOD：面向對象設計(Object-Oriented Design，OOD)方法是OO方法中一個中間過渡環節。其主要作用是對OOA分析的結果作進一步的規範化整理，以便能夠被OOP直接接受。 OOP：面向對象編程(Object Oriented Programming，OOP，面向對象程式設計)是一種
  • Ext.Net學習筆記01：在ASP.NET WebForm中使用Ext.Net
    Ext.Net是一個對ExtJS進行封裝了的.net控制項庫，可以在ASP.NET WebForm和MVC中使用。從今天開始記錄我的學習筆記，這是第一篇，今天學習瞭如何在WebForm中使用Ext.Net控制項庫。 下載Ext.Net 首先要去Ext.Net網站上下載Ext.Net，我先學習的是WebF
  • SSRS 報表 如何匿名查看
    SSRS 報表 如何匿名查看 昨晚一直研究怎麼能匿名訪問報表然後給客戶看呢？ 研究了好幾種辦法 我試過的分為三種，其中推薦我認為相對可控一點。 1.修改SSRS配置文件來禁止他驗證登陸用戶許可權　操作過的文章：SSRS匿名登錄　可以完全匿名訪問，因為我們系統是涉及到客戶要自己做報表的，所以這裡屏蔽了權
  • C#DataTable 的一些操作經常操作
    關於C# DataTable 的一些操作 經常操作DATATABLE 對於一些不需要再通過sql 來重覆操作的 可以通過操作datatable來達到同樣的效果 方法一： 也是廣為人知的一種： YourDataTable.Columns.Remove("列名"); 但是這種情況只適合於去掉很少列的情況
  • SSRS 報表 如何加參數
    SSRS 報表 如何加參數 連接上以後出現一個問題 就是給報表加上參數以後報表不斷刷新，跟上次那個報表刷新是同樣的問題。那麼下麵我們來解決一下。 1. 這是給報表添加預設參數進入頁面後就不斷的刷新刷新。 ReportParameter para = new ReportParameter("Repo
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類