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

层层文章

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

 

倘上文所说的,布局面板根据可用的屏幕空间,指定界面元素的轻重以及职位。例如StackPanel
会水平要垂直排列界面元素。Grid 布局以及CSS
中的报表控件类似,可拿诸要素以单元排列。

初供的 RelativePanel
即相对布局,各个要素中存在相对关系,可用来创造于适应界面。当用户设备发生变化时,用户界面也会见重新排列重新组织,而起了RelativePanel就节约了界面元素重新排列。

如图所示,无论用户以啊种配备,蓝色按钮始终在文本框右侧,并下在黄色按钮顶部。

C++ 1

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
状态则被硌,游戏面板重新排列,如图所示:

C++ 2

当窗口小于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,智能手机等。

 

C++ 3

自从适应扩展

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更加急需专注影响用户体验的异装备因素。

C++ 4

而外配备的交互方式不同,还亟需采取跨平台的亮点,如:

  • 以云计算来访问不同装备资源
  • 考虑怎样支持从同种植C++装备迁移至外一样种配备之上,并保持一致性。
  • 采用导航设计指南来统筹工作流程,使得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业内版发布全纪录