背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向

简介: 原文:背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向[源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1、UI 设计概述UI/Summary.
原文: 背水一战 Windows 10 (2) - 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
[源码下载]

目录
相关文章
|
9月前
|
开发工具 Windows
Windows平台RTMP推送|轻量级RTSP服务实现本地摄像头|屏幕|叠加数据预览
大家在做Windows平台RTMP推送或轻量级RTSP服务的时候,不管是采集屏幕还是采集摄像头,亦或屏幕摄像头的叠加模式,总会有这样的诉求,采集到的数据,希望能本地看看具体采集的数据或者图像实际效果,也就是本次介绍的“预览”功能。
204 0
|
1月前
|
Windows
LabVIEW启用/禁用Windows屏幕保护程序
LabVIEW启用/禁用Windows屏幕保护程序
24 4
LabVIEW启用/禁用Windows屏幕保护程序
|
23天前
|
编解码 人工智能 自然语言处理
让大模型理解手机屏幕,苹果多模态Ferret-UI用自然语言操控手机
【5月更文挑战第29天】苹果推出Ferret-UI,一个结合图像识别和自然语言处理的多模态大语言模型,允许用户通过自然语言指令操控手机。该系统能适应不同屏幕布局,识别UI元素并执行相应操作,有望变革手机交互方式,提升无障碍体验,并在测试和开发中发挥作用。但需面对屏幕多样性及准确性挑战。[论文链接](https://arxiv.org/pdf/2404.05719.pdf)
38 3
|
1月前
|
存储 XML 编译器
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
63 3
|
8月前
|
XML JavaScript 前端开发
SAP UI5 的数据绑定语法概述
SAP UI5 的数据绑定语法概述
|
9月前
|
数据采集 开发工具 图形学
Windows平台实现Unity下窗体|摄像头|屏幕采集推送
随着Unity3D的应用范围越来越广,越来越多的行业开始基于Unity3D开发产品,如传统行业中虚拟仿真教育、航空工业、室内设计、城市规划、工业仿真等领域。
|
8月前
|
XML SQL JavaScript
使用纯 ABAP 开发 SAP UI5 之一:概述
使用纯 ABAP 开发 SAP UI5 之一:概述
|
8月前
|
XML JavaScript 前端开发
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
SAP UI5 sap.m.Table Manual Pop-In Mode 概述
SAP UI5 sap.m.Table Manual Pop-In Mode 概述
|
8月前
|
XML 搜索推荐 数据可视化
SAP UI5 SmartTable column 的个性化设置使用概述
SAP UI5 SmartTable column 的个性化设置使用概述