Windows10-UWP中设备序列显示不同XAML的三种方式[3]
阅读目录:
概述
Windows10-UWP(Universal Windows Platform)增加一个新特性设备序列(DeviceFamily)特定视图,它允许开发者为指定的设备序列定义指定的XAML显示,(Desktop、Mobile、tablet、Iot等)。 如果你想为不同的设备序列显示较多不一样的UI时,它是非常有用的。当然,使用RelativePanel、VisualStateTriggers也是非常好用的。但倘若你的UI有非常多的不一样时,XAML代码会变的非常臃肿。 这时就可以单独使用一个完整的XAML页面,然后和其他XAML页面共享后台逻辑代码。
有三种方式可以为设备序列设置特定的XAML视图。 下面用一个简单的MainPage页面去描述,使用蓝色背景和一些文字,这时想要用不同的背景和不同的文本,为移动设备序列设置指定的XAML视图。
<Page x:Class="DeviceFamily.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:DeviceFamily" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Blue">
<TextBlock Foreground="White" Text="This is desktop." FontSize="72"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
假设有一个非常复杂的布局,我们想为移动设备序列做一个新的布局。:)
DeviceFamily-Type文件夹
大多数实现新布局的方法是在项目中指定一个新的文件夹,叫DeviceFamily-Type,其Type表示设备序列类型的名称,如DeviceFamily-Mobile,或替换成Team、Desktop、IoT。 在上诉例子中,应该创建一个叫DeviceFamily-Mobile的文件夹。
下一步是添加一个XAML视图叫同样的名字(和例子一样MainPage.xaml)。
这个文件不能有后端代码,它和desktop共用MainPage.xaml.cs后端代码。
因此如果你在移动设备上运行这个app(这里用模拟器), 它会从DeviceFamily-Mobile/MainPage.xaml加载要使用的界面。
这种定义一个新的视图是最多使用的。其他的博客也有很多介绍,比如这篇,创建在uwp中创建一个DeviceFamily指定布局(Creating DeviceFamily specific layouts in a Universal App.)。
DeviceFamily-Type扩展
第二种方式你能通过创建新的XAML视图达到同样的效果,使用同样的名称,但是DeviceFamily-Type是扩展的。比如MainPage页面,它意思是添加一个新的XAML视图文件叫MainPage.DeviceFamily-Mobile.xaml,它放在和MainPage同样的文件夹。
注意如果你同时使用方法1和方法2,会有一个编译错误:
Error Processing Resources failed with error: Duplicate Entry.。
如上,MainPage会根据你的设备序列,加载2个XAML文件中的其中一个。
InitializeComponent重载
有趣的是,在你添加一个指定视图到DeviceFamily-Type文件夹并编译时,编译器会生成一个新的InitializeComponent重载,在MainPage.g.i.cs里。
public void InitializeComponent(global::System.Uri resourceLocator) { if (_contentLoaded) return; _contentLoaded = true; if (resourceLocator <mark> null)
{
resourceLocator = new global::System.Uri("ms-appx:///MainPage.xaml");
}
global::Windows.UI.Xaml.Application.LoadComponent(this, resourceLocator, global::Windows.UI.Xaml.Controls.Primitives.ComponentResourceLocation.Application);
}
这个方法带了一个URL参数,因此你能明确指定想要的XAML视图。如果你没有指定任何页面,它会使用默认的那个页面。比如说你有一个主要的和次要的MainPage视图:
你可以在页面构造函数中使用任何逻辑,去决定你要使用哪一个页面布局。
public MainPage()
{
if (AnalyticsInfo.VersionInfo.DeviceFamily </mark> "Windows.Mobile")
{
if (usePrimary)
{
InitializeComponent(new Uri("ms-appx:///PrimaryMainPage.xaml", UriKind.Absolute));
}
else
{
InitializeComponent(new Uri("ms-appx:///SecondaryMainPage.xaml", UriKind.Absolute));
}
}
else
{
InitializeComponent();
}
}
让我们看下使用DeviceFamily指定视图的效果,首先是桌面的MainPage.xaml。
如果使用简单的方式1和方式2,为移动设备序列任意选择一个MainPage.xaml进行交互(用简单的不同背景和文字来区分)
然后模拟器会加载XAML视图:
如果使用方式3,添加不动的主要/次要移动视图,那么结果(依赖你InitializeComponent中使用哪一个视图)如下:
补充 - 单页面内状态触发器
这篇文章是关于创建多页面XAML视图。 如果你想在单页面XAML视图中根据DeviceFamily修改一些显示,状态触发器仍然是非常有用的。 使用状态触发器是非常简单的,你可以自己写触发器,也可使用已经存在的WindowsStateTriggers类库。
WindowsStateTriggers DeviceFamily sample
结论
DeviceFamily XAML视图特性是为不同设备序列创建不同页面,非常赞的一种方式。它为我们避免了在一个大XAML页面内,去定义区分这些设备类型的麻烦,方便我们为各种各样的设备序列设计APP。另外一个比较赞的事情是有多种方式去处理不同的UI,甚至可以手动去重载InitializeComponent去实现。
译自:http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/
Windows10-UWP中设备序列显示不同XAML的三种方式[3]的更多相关文章
- MATLAB 显示输出数据的三种方式
MATLAB 显示输出数据的三种方式 ,转载 https://blog.csdn.net/qq_35318838/article/details/78780412 1.改变数据格式 当数据重复再命令行 ...
- ASP.NET MVC中使用Unity进行依赖注入的三种方式
在ASP.NET MVC中使用Unity进行依赖注入的三种方式 2013-12-15 21:07 by 小白哥哥, 146 阅读, 0 评论, 收藏, 编辑 在ASP.NET MVC4中,为了在解开C ...
- Mybatis-plus中如何排除非表字段的三种方式
1.transient关键字 2.使用静态变量(static) 3.TableField(exit=false) 这三种方式可以在使用的过程中,是这个对象中的属性不被序列化.(直接被忽略)
- ASP.NET MVC2中Controller向View传递数据的三种方式
转自:http://www.cnblogs.com/zhuqil/archive/2010/08/03/Passing-Data-from-Controllers-to-View.html 在Asp. ...
- 在ASP.NET MVC中使用Unity进行依赖注入的三种方式
在ASP.NET MVC4中,为了在解开Controller和Model的耦合,我们通常需要在Controller激活系统中引入IoC,用于处理用户请求的 Controller,让Controller ...
- 在一个JSP页面中包含另一个JSP页面的三种方式
转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令 includ ...
- Shell 脚本中调用另一个 Shell 脚本的三种方式
主要以下有几种方式: Command Explanation fork 新开一个子 Shell 执行,子 Shell 可以从父 Shell 继承环境变量,但是子 Shell 中的环境变量不会带回给父 ...
- @Param注解在Mybatis中的使用 以及传递参数的三种方式
第一种: Dao层的方法 public User selectUser(String name,String password); 对应的Mapper.xml <select id=" ...
- 面试中被问Spring循环依赖的三种方式!!!
什么是循环依赖? 循环依赖其实就是循环引用,也就是两个或则两个以上的 Bean 互相持有对方,最终形成闭环.比如A依赖于B,B依赖于C,C又依赖于A.如下图: 如果在日常开发中我们用new 对象的方式 ...
随机推荐
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- EntityFramework Core 1.1是如何创建DbContext实例的呢?
前言 上一篇我们简单讲述了在EF Core1.1中如何进行迁移,本文我们来讲讲EF Core1.1中那些不为人知的事,细抠细节,从我做起. 显式创建DbContext实例 通过带OnConfiguri ...
- CRL快速开发框架系列教程十三(嵌套查询)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- CRL快速开发框架系列教程十二(MongoDB支持)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- MediatorPattern(中介者模式)
/** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...
- IteratorPattern(迭代子模式)
/** * 迭代子模式 * @author TMAC-J * 聚合:某一类对象的集合 * 迭代:行为方式,用来处理聚合 * 是一种行为模式,用于将聚合本身和操作聚合的行为分离 * Java中的COLL ...
- 【干货分享】流程DEMO-事务呈批表
流程名: 事务呈批表 业务描述: 办公采购.会议费用等事务的申请.流程发起时,会检查预算,如果预算不够,将不允许发起费用申请,如果预算够用,将发起流程,同时占用相应金额的预算,但撤销流程会释放相应金 ...
- 微软将向Linux用户提供SQL Server程序
微软公司(Microsoft Corp., MSFT)将向Linux操作系统的用户提供旗下一项最赚钱的产品,这是该公司几年前无法想像的举措.这家软件巨头周一表示,将向免费的Linux Server提供 ...
- 作为前端er,写在年末的一些话
写惯了技术类的文章,这种总结和唠嗑型的我基本也就在年末才来一篇.说实话,这种轻松类的文章往往比技术类的要受欢迎的多,因为其受众更广,看起来也不烧脑. 说来愧疚,这一年其实产出有点低,大致就写了不到二十 ...