XAML 中特定于平台的值

5 分钟

应用在每个平台上的视觉体验各不相同。通常需要根据所使用的视觉元素对每个平台的 UI 进行微调。使用 .NET MAUI 可以根据这些设备属性管理应用的布局。

本单元介绍 .NET MAUI 提供的功能，这些功能让你可以根据运行应用的平台调整应用的 UI。

使用 Device 类

DeviceInfo 类是一个实用工具类，它为运行应用的设备提供特定于设备的信息。它通过一组属性公开此信息。最重要的属性是 DeviceInfo.Platform，该属性返回一个指示当前使用的设备类型的字符串：Android、iOS、WinUI 或 macOS。

参考以下示例场景来确定何时可以使用此功能。某个 .NET MAUI iOS 应用的默认行为存在一个问题：添加到页面中的内容会占据屏幕顶部的 iOS 状态栏。你想要改变这种行为。最简单的解决方法是将页面中的内容下移。在上一个练习中创建的 Notes 解决方案解决此问题的方法是将 VerticalStackLayout 控件的 Padding 属性设置为将内容下移 60 点：

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

问题在于，此解决方法只适用于 iOS。在 Android 和 WinUI 上将内容下移这么多个点会导致页面顶部的屏幕空间浪费。

可以查询 DeviceInfo.Platform 属性来解决此显示问题。可将以下代码添加到应用的页面构造函数，以扩大页面顶部的填充（但仅适用于 iOS）：

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

注意

DevicePlatform.iOS 是一个 DevicePlatform 结构，它返回字符串值 iOS。其他支持的平台也提供等效的属性。应使用这些属性，而不要与硬编码的字符串相比较；这是一种良好的做法，如果将来其中某些字符串值更改，它可为代码提供证明。

此代码可有效运行，但它位于该页的代码隐藏文件中。填充是特定于用户界面的值。可以说，从 XAML（而不是代码隐藏）执行此操作更适合且更方便。

使用 OnPlatform 标记扩展

.NET MAUI XAML 提供 OnPlatform 标记扩展，允许你从 XAML 代码内部检测运行时平台。可将此标记扩展作为设置属性值的 XAML 代码的一部分应用。该扩展要求提供属性类型，以及一系列 On Platform 块，可在其中根据平台设置属性值。

注意

OnPlatform 标记扩展是泛型的；它采用一个类型参数。 TypeArguments 特性指定的类型可确保使用正确的扩展类型。

可按如下所示设置 Padding 属性。请注意，Padding 属性的类型为 Thickness：

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

对于 iOS 以外的平台，填充将保持设置为默认值“0,0,0,0”。对于 WinUI 和 Android，可以使用附加的 OnPlatform 块将填充设置为 30 点：

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

可将这种方法应用于其他属性。以下示例将 iOS、Android 和 Windows 中页面上的堆积布局的背景颜色分别更改为 Silver、Green 和 Yellow。

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

此语法有点冗长，但 OnPlatform 扩展还可以使用一种简化的语法。可按如下所示简化设置填充的示例：

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

可以连同任何特定于平台的值一起指定属性的默认值。在此格式中，类型参数是从 OnPlatform 属性应用到的属性推理出来的。

若要设置背景颜色，可以使用此 XAML 片段代替前面的第二个示例：

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>

知识检查

可以在 XAML 代码中使用哪个标记扩展来检测运行应用的平台？

DevicePlatform

DeviceInfo

OnPlatform

OnPlatform 扩展的 TypeArguments 属性的作用是什么？

它指定扩展的类型参数，并确保创建正确的扩展类型。

它指定运行应用的平台的类型。

它可用于指定要连同特定于平台的值一起设置的属性。

在检查工作前，必须回答所有问题。

XAML 中特定于平台的值

使用 Device 类

使用 OnPlatform 标记扩展

知识检查

反馈