XAML 中特定于平台的值
- 5 分钟
应用在每个平台上的视觉体验各不相同。 通常需要根据所使用的视觉元素对每个平台的 UI 进行微调。 使用 .NET MAUI 可以根据这些设备属性管理应用的布局。
本单元介绍 .NET MAUI 提供的功能，这些功能让你可以根据运行应用的平台调整应用的 UI。
使用 Device 类
DeviceInfo 类是一个实用工具类，它为运行应用的设备提供特定于设备的信息。 它通过一组属性公开此信息。 最重要的属性是 DeviceInfo.Platform，该属性返回一个指示当前使用的设备类型的字符串：Android、iOS、WinUI 或 macOS。
参考以下示例场景来确定何时可以使用此功能。 某个 .NET MAUI iOS 应用的默认行为存在一个问题：添加到页面中的内容会占据屏幕顶部的 iOS 状态栏。 你想要改变这种行为。 最简单的解决方法是将页面中的内容下移。 在上一个练习中创建的 Notes 解决方案解决此问题的方法是将 Padding 控件的 VerticalStackLayout 属性设置为将内容下移 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>