背水一战 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(); // 关掉自定义启动屏幕,跳转到程序主页面
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
[源码下载]
背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向的更多相关文章
- 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸
[源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/F ...
- 背水一战 Windows 10 (5) - UI: 标题栏
[源码下载] 背水一战 Windows 10 (5) - UI: 标题栏 作者:webabcd 介绍背水一战 Windows 10 之 UI 标题栏 示例TitleBarDemo.xaml <P ...
- 背水一战 Windows 10 (4) - UI: 多窗口
[源码下载] 背水一战 Windows 10 (4) - UI: 多窗口 作者:webabcd 介绍背水一战 Windows 10 之 UI 多窗口 示例1.自定义帮助类,用于简化 Secondary ...
- 背水一战 Windows 10 (9) - 资源: 资源限定符概述, 资源限定符示例
[源码下载] 背水一战 Windows 10 (9) - 资源: 资源限定符概述, 资源限定符示例 作者:webabcd 介绍背水一战 Windows 10 之 资源 资源限定符概述 资源限定符示例 ...
- 背水一战 Windows 10 (99) - 关联启动: 关联指定的文件类型, 关联指定的协议
[源码下载] 背水一战 Windows 10 (99) - 关联启动: 关联指定的文件类型, 关联指定的协议 作者:webabcd 介绍背水一战 Windows 10 之 关联启动 关联指定的文件类型 ...
- 背水一战 Windows 10 (98) - 关联启动: 使用外部程序打开一个文件, 使用外部程序打开一个 Uri
[源码下载] 背水一战 Windows 10 (98) - 关联启动: 使用外部程序打开一个文件, 使用外部程序打开一个 Uri 作者:webabcd 介绍背水一战 Windows 10 之 关联启动 ...
- 背水一战 Windows 10 (8) - 控件 UI: StateTrigger
[源码下载] 背水一战 Windows 10 (8) - 控件 UI: StateTrigger 作者:webabcd 介绍背水一战 Windows 10 之 控件 UI VisualState 之 ...
- 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI
[源码下载] 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI 作者:webabcd 介绍背水一战 Wind ...
- 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate
[源码下载] 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate 作者:webabcd 介绍背水一战 Windows 10 ...
随机推荐
- How to Change RabbitMQ Queue Parameters in Production?
RabbitMQ does not allow re-declaring a queue with different values of parameters such as durability, ...
- bianma 水平 技巧
能够写出这样的代码, 其实体现了水平 switch (state) { case 0: break; case 3: return; // already connected case 4: stat ...
- 我心中的核心组件(可插拔的AOP)~调度组件quartz.net续~任务管理器的开发
回到目录 对于任务调度来说,越来越多的团队选择了quartz,它在java和.net环境下表现都十分优秀,配置简单,功能强大,时间表达式配置灵活,但在使用时,还是感觉缺点什么,怎么说,你在服务器上安装 ...
- Java程序员的日常—— POI与JDBC、Mockmvc与单元测试
周日没怎么休息好,周一一天都迷迷糊糊的,不过还算是干了不少的活. 总结一下,大致有以下几点内容: 1 使用poi以及mysql jdbc实现了一个复杂excel的导入 2 基于工程原有的代码,书写sp ...
- 真正的mybatis_redis二级缓存
网上流传的代码缓存失效存在严重问题. 思路....以后再细说 目前的方案还不够完美,失效力度控制不够细. 主要代码 import java.io.BufferedReader; import java ...
- struts2DMI(动态方法调用)
struts2动态方法调用共有三种方式: 1.通过action元素的method属性指定访问该action时运行的方法 <package name="action" exte ...
- javase基础复习攻略《三》
编程语言的发展: 机器语言——直接由计算机的指令组成,指令.地址.数据都是以"0"和"1"的符号串组成,可以被计算机直接执行. 汇编语言——用容易理解和记忆的符 ...
- SQL Cookbook
1. 利用LAG OVER抑制结果集中的重复值 原始结果如下: SQL> select deptno,ename from emp order by deptno; DEPTNO ENAME ...
- HTML5的学习--performance
HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析. 它是浏览器的直接实现,比在网页中用js设置D ...
- Android基于mAppWidget实现手绘地图(十三)–如何显示/隐藏任意类型的地图对象
这个很简单,想要显示或隐藏任意类型的地图对象,首先要对地图对象进行分类.不同类型的地图对象放置到不同的地图图层上,然后控制地图图层的显示/隐藏即可. 实例: Layer sportsLayer = m ...