通过

基于平台和设备惯例自定义 UI 外观

  • 项目

浏览示例。 浏览示例

.NET Multi-platform App UI (.NET MAUI) 应用可以针对特定平台和设备自定义其 UI。 这样你的应用将能够：

  • 充分利用空间。 如果你设计的应用在移动装置上看起来不错，那么也可以在桌面设备上使用，但很可能会浪费一些空间。 当屏幕超过特定大小时，可以自定义应用以显示更多内容。 例如，购物应用可能会一次在移动装置上显示一项，但可能会在桌面设备上显示多项。 此外，通过在屏幕上放置更多内容，可以减少用户需要执行的导航次数。
  • 充分利用设备的功能。 某些设备可能具有特定的功能。 例如，移动装置可能有位置传感器和相机，而桌面设备可能没有。 你的应用可以检测到哪些功能可用，和启用使用这些功能的控件。
  • 输入优化。 可以重新排列 UI 元素以针对特定输入类型进行优化。 例如，如果将导航元素放置在应用底部，则移动用户将更容易访问它们。 但桌面用户通常会在接近于应用顶部看到导航元素。

在针对特定平台和设备惯例优化应用 UI 时，会创建一个响应式 UI。 在 .NET MAUI 中创建响应式 UI 的主要方法涉及使用 OnPlatform 标记扩展和 OnIdiom 标记扩展。

注意

有一类触发器（称为状态触发器），可用于在特定方案中自定义 UI 外观，例如：设备方向发生更改时。 有关详细信息，请参阅状态触发器。

基于平台自定义 UI 外观

OnPlatform 标记扩展使你能够基于平台自定义 UI 外观。 它提供的功能与 OnPlatform<T> 和 On 类相同，但表现形式更简洁。

OnPlatform 标记扩展由 OnPlatformExtension 类提供支持，该类定义以下属性：

  • object，类型的 Default，设置为要应用于表示平台的属性的默认值。
  • object，类型的 Android，设置为要在 Android 上应用的值。
  • object，类型的 iOS，设置为要在 iOS 上应用的值。
  • object，类型的 MacCatalyst，设置为要在 Mac Catalyst 上应用的值。
  • object，类型的 Tizen，设置为要在 Tizen 平台上应用的值。
  • object，类型的 WinUI，设置为要在 WinUI 上应用的值。
  • Converter，类型为 IValueConverter，设置为 IValueConverter 实现。
  • ConverterParameter，类型为 object，设置为要传递给 IValueConverter 实现的值。

注意

XAML 分析程序允许将 OnPlatformExtension 类缩写为 OnPlatform。

Default 属性是 OnPlatformExtension 的内容属性。 因此，对于用大括号表示的 XAML 标记表达式，如果它是第一个参数，则可以删除表达式的 Default= 部分。 如果未设置 Default 属性，则会将其默认为 BindableProperty.DefaultValue 属性值，前提是标记扩展面向 BindableProperty。

重要说明

XAML 分析程序要求将正确类型的值提供给使用 OnPlatform 标记扩展的属性。 如果需要进行类型转换，则 OnPlatform 标记扩展将尝试使用 .NET MAUI 提供的默认转换器执行转换。 但是，某些类型转换不能由默认转换器执行，在这些情况下，Converter 属性应设置为 IValueConverter 实现。

OnPlatform Demo 页显示如何使用 OnPlatform 标记扩展：

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

在此示例中，所有三个 OnPlatform 表达式都使用 OnPlatformExtension 类名的简化版本。 在 iOS 和 Android 上，三个 OnPlatform 标记扩展将 BoxView 的 xref:Microsoft.Maui.Graphics.Color、WidthRequest 和 HeightRequest 属性设置为不同值。 标记扩展还为未指定平台上的这些属性提供默认值，同时删除表达式的 Default= 部分。

根据设备惯例自定义 UI 外观

通过 OnIdiom 标记扩展，可以根据应用正在运行的设备惯例自定义 UI 外观。 OnIdiomExtension 类可以为其提供支持，它定义以下属性：

  • Default，类型为 object，设置为要应用于表示设备惯例的属性的默认值。
  • Phone，类型为 object，设置为要在手机上应用的值。
  • Tablet，类型为 object，设置为要在平板电脑上应用的值。 此属性并非 Android 和 iOS 平台独占。
  • Desktop，类型为 object，设置为要在桌面平台上应用的值。 请注意，某些笔记本电脑可能使用 Tablet 属性分类。
  • TV，类型为 object，设置为要在电视平台上应用的值。
  • Watch，类型为 object，设置为要在 Watch 平台上应用的值。
  • Converter，类型为 IValueConverter，设置为 IValueConverter 实现。
  • ConverterParameter，类型为 object，设置为要传递给 IValueConverter 实现的值。

注意

XAML 分析程序允许将 OnIdiomExtension 类缩写为 OnIdiom。

Default 属性是 OnIdiomExtension 的内容属性。 因此，对于用大括号表示的 XAML 标记表达式，如果它是第一个参数，则可以删除表达式的 Default= 部分。

重要说明

XAML 分析程序要求将正确类型的值提供给使用 OnIdiom 标记扩展的属性。 如果需要进行类型转换，则 OnIdiom 标记扩展将尝试使用 .NET MAUI 提供的默认转换器执行转换。 但是，某些类型转换不能由默认转换器执行，在这些情况下，Converter 属性应设置为 IValueConverter 实现。

以下 XAML 示例显示了如何使用 OnIdiom 标记扩展：

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

在此示例中，所有三个 OnIdiom 表达式都使用 OnIdiomExtension 类名的简化版本。 这三个 OnIdiom 标记扩展会在手机、平板电脑和桌面惯例中将 BoxView 的 Color、WidthRequest 和 HeightRequest 属性设置为不同的值。 标记扩展还为未指定惯例中的这些属性提供默认值，同时删除表达式的 Default= 部分。