UWP 入门教程2——如何实现自适应用户界面

简介: 系列文章 UWP入门教程1——UWP的前世今生   如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界面元素。Grid 布局与CSS 中的表格控件类似,可将各元素按单元排列。

系列文章

UWP入门教程1——UWP的前世今生

 

如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界面元素。Grid 布局与CSS 中的表格控件类似,可将各元素按单元排列。

新提供的 RelativePanel 即相对布局,各个元素之间存在相对关系,可用来创建自适应界面。当用户设备发生变化时,用户界面也会重新排列重新组织,而有了RelativePanel就省去了界面元素重新排列。

如图所示,无论用户使用哪种设备,蓝色按钮始终放在文本框右侧,并排放在黄色按钮顶部。

Relativepanel example

XAML 代码如下:


<RelativePanel>
    <TextBox x:Name="textBox1" Text="textbox" Margin="5"/>
    <Button x:Name="blueButton" Margin="5" Background="LightBlue" Content="ButtonRight" RelativePanel.RightOf="textBox1"/>
    <Button x:Name="orangeButton" Margin="5" Background="Orange" Content="ButtonBelow" RelativePanel.RightOf="textBox1" RelativePanel.Below="blueButton"/>
</RelativePanel>

使用可视化状态触发器创建自适应UI

UWP 提供自适应可视化状态,可根据窗口大小来调整状态值。StateTriggers定义了一个阈值,达到阈值则触发可视化状态。下面示例了,当窗口大于720像素,wideView 状态则被触发,游戏面板重新排列,如图所示:

Visual state trigger example. Wide view

当窗口小于720px,则narrowView视态被触发,因为wideView 触发器无法满足条件,NarrowView 状态则将Best-rated games 置于最底端,并且向左对齐,效果图如下:

 

XAML 代码如下:

 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="best.(RelativePanel.RightOf)" Value="free"/>
                    <Setter Target="best.(RelativePanel.AlignTopWidth)" Value="free"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="narrowView">
                <VisualState.Setters>
                    <Setter Target="best.(RelativePanel.Below)" Value="paid"/>
                    <Setter Target="best.(RelativePanel.AlignLeftWithPanel)" Value="true"/>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</Grid>

 

创建UWP可使用的工具

创建App时,通常会明确目标设备,当需要在设备中预览App,可以使用VS中的Preview toolbar(预览工具箱)查看App,可以模拟不同的设备,如PC,TV,智能手机等。

 

Visual Studio 2015 device preview toolbar

自适应扩展

Windows 10 引入“缩放模型”的升级版,除了缩放矢量图之外,有一个统一的缩放因子集合,能够保证UI元素在不同的屏幕尺寸和分辨率下,界面元素大小的一致性。缩放因子能够兼容多种操作系统如iOS,Android等,资源科跨多平台共享。

 

通用输入处理

可使用通用控件创建通用Windows App来管理控制不同的输入模式,如鼠标,键盘,触摸笔,控制器等。本文列举了以下API 来访问输入:

CoreIndependentInputSource:是新增加的API,可将源输入,迁移到主线程或后台线程。

PointerPoint:统一了触摸,鼠标,笔数据。具有一致的接口和事件。

PointerDevice:是设备API,可支持查询设备支持的输入能力。

新的 InkCanvas XAML 控件和InkPresenter API 可访问Stroke 数据

 

编写代码

VS中开发Windows10 项目支持多种开发语言,如C++,C#,VB以及JavaScript。也可以使用XAML,开发原生UI 用户体验。

调用API来实现目标设备族群

无论需要调用哪种API,你需要了解API适应的设备族群,是否满足您App开发的需要。如以下代码所示,设备族群是Universal:

 
 
    Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += TestView_BackRequested;

 

当然也可以调用API ,在App中不实现。

这种情况通常指当你的目标设备族群未在文档中标明,你可以调用此api,修改一些代码即可。

使用ApiInformation 类编写自适应代码

编写自适应代码只需要两步,一,确定需要调用的API,二,使用Windows.Foundation.Metadata.ApiInformation 类来测试API 。可用于评估App是否运行良好。

如果想同时调用很多API,可以使用ApiInformation.IsTypePresent 方法,如下:

   // Note: Cache the value instead of querying it more than once.
    bool isHardwareButtonsAPIPresent =
        Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons");
 
    if (isHardwareButtonsAPIPresent)
    {
        Windows.Phone.UI.Input.HardwareButtons.CameraPressed +=
            HardwareButtons_CameraPressed;
    }

上述示例中HardwareButtons类实现了CameraPressed事件,因为该类成员有相同的信息需求。

 

用户体验

通用Windows App 可利用所有设备特征来呈现App.App可充分利用桌面设备的处理能力,平板电脑的自然交互方式,以及智能手机的便捷性和移动性等。

良好的设计从确定用户交互方式开始,同时满足App的功能性和外观。用户体验非常重要直接影响了用户是否喜欢你的App,使用过程中是否愉悦或始终保持积极的情绪,而不受阻碍。设计通用App更加需要注意影响用户体验的不同设备因素。

Windows-powered devices

除了设备的交互方式不同,还需要利用跨平台的优点,如:

  • 使用云计算来访问不同设备资源
  • 考虑怎样支持从一种设备迁移到另一种设备之上,并保持一致性。
  • 使用导航设计指南来设计工作流程,使得App可兼容移动设备,较小的屏幕或较大的屏幕设备。
  • 考虑特殊情况,较小的移动设备屏幕失效,也可能有一些功能区在固定式台式机上不起作用,而需在移动设备上才能运行。
  • 考虑如何兼容多种输入形式

通过Dashboard提交通用 Windows 应用

利用新的通用的 Windows 开发人员中心仪表板,可以在同一位置管理和提交所有面向 Windows 设备的应用。新功能简化了流程,并具有更多的控制权限。

在进行UWP开发时,还可以借助一些开发工具,有效提高开发效率。ComponentOne Studio for UWP 是一套可以编写所有 UWP 平台应用的控件集,包括表格、报表、图表、仪表盘、组织图、地图、PDF、Excel、Word、日程安排、输入、导航等多个控件,有效的帮助开发过程。

 

相关阅读:

微软 Build 2017 开发者大会:Azure 与 AI 的快速发展

是什么让C#成为最值得学习的编程语言

从Visual Studio看微软20年技术变迁

C#开发人员应该知道的13件事情

Visual Studio 2017正式版发布全纪录

 

相关文章
|
存储 索引
Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)
在上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。
|
6月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
258 0
|
前端开发 JavaScript UED
封装库/工具库中重要概念之动画
前端开发中,动画是一个非常重要的技术特性。它可以提升用户体验,增加页面交互性,并且让网站看起来更加生动活泼。然而,在实现复杂动画时,手写代码往往会变得繁琐且容易出错。因此,前端工具库和封装库的出现为我们提供了便利。在本文中,我们将探讨前端中的封装库和工具库以及它们在实现动画效果方面的作用。
112 0
|
3月前
|
开发框架 数据安全/隐私保护 开发者
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计,涵盖布局基础、常用组件、样式设计、实战应用、响应式布局及性能优化等方面,助力开发者打造精美用户界面。
70 7
|
6月前
|
C# Windows 开发者
当WPF遇见OpenGL:一场关于如何在Windows Presentation Foundation中融入高性能跨平台图形处理技术的精彩碰撞——详解集成步骤与实战代码示例
【8月更文挑战第31天】本文详细介绍了如何在Windows Presentation Foundation (WPF) 中集成OpenGL,以实现高性能的跨平台图形处理。通过具体示例代码,展示了使用SharpGL库在WPF应用中创建并渲染OpenGL图形的过程,包括开发环境搭建、OpenGL渲染窗口创建及控件集成等关键步骤,帮助开发者更好地理解和应用OpenGL技术。
487 0
|
6月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
323 0
|
前端开发 JavaScript 开发者
封装库/工具库中重要概念之UI框架
UI(User Interface)框架是前端开发中十分重要的一部分,它提供了各种组件和样式,用于构建页面和用户界面。在前端开发中,封装库/工具库可以帮助我们更加高效地使用 UI 框架。
216 0
|
JSON Android开发 数据格式
Flutter从0到1实现高性能、多功能的富文本编辑器(模块分析篇)
经过前面两篇文章的基础知识铺垫,我们终于要进入到专栏的核心内容 — 富文本。富文本编辑器可以说是APP中最复杂,但使用场景又极广的组件之一。例如各大笔记APP的核心功能、闲鱼的商品发布功能、还
Flutter从0到1实现高性能、多功能的富文本编辑器(模块分析篇)

热门文章

最新文章