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 = "锁定当前方向";
}
}
}
