欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

程序员文章站 2022-06-22 12:27:43
阅读目录:概述DeviceFamily-Type文件夹DeviceFamily-Type扩展InitializeComponent重载结论概述Windows10-UWP(Universal Windows Platform)增加一个新特性设备序列(DeviceFamily)特定视图,它允许开发者为指... ......

阅读目录:

概述 DeviceFamily-Type文件夹 DeviceFamily-Type扩展 InitializeComponent重载 结论 概述

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的文件夹。

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

下一步是添加一个XAML视图叫同样的名字(和例子一样MainPage.xaml)。

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

这个文件不能有后端代码,它和desktop共用MainPage.xaml.cs后端代码。

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

因此如果你在移动设备上运行这个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同样的文件夹。

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

注意如果你同时使用方法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视图:

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

你可以在页面构造函数中使用任何逻辑,去决定你要使用哪一个页面布局。

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。

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

如果使用简单的方式1和方式2,为移动设备序列任意选择一个MainPage.xaml进行交互(用简单的不同背景和文字来区分)

然后模拟器会加载XAML视图:

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

如果使用方式3,添加不动的主要/次要移动视图,那么结果(依赖你InitializeComponent中使用哪一个视图)如下:

Windows10-UWP中设备序列显示不同XAML的三种方式[3]Windows10-UWP中设备序列显示不同XAML的三种方式[3]

补充 - 单页面内状态触发器

这篇文章是关于创建多页面XAML视图。 如果你想在单页面XAML视图中根据DeviceFamily修改一些显示,状态触发器仍然是非常有用的。 使用状态触发器是非常简单的,你可以自己写触发器,也可使用已经存在的WindowsStateTriggers类库。

WindowsStateTriggers DeviceFamily sample

结论

DeviceFamily XAML视图特性是为不同设备序列创建不同页面,非常赞的一种方式。它为我们避免了在一个大XAML页面内,去定义区分这些设备类型的麻烦,方便我们为各种各样的设备序列设计APP。另外一个比较赞的事情是有多种方式去处理不同的UI,甚至可以手动去重载InitializeComponent去实现。

完整代码在GitHub

译自:http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/