根據平臺和裝置語氣自定義UI外觀

  • 發行項

Browse sample. 流覽範例

.NET 多平臺應用程式 UI （.NET MAUI） 應用程式可以針對特定平台和裝置自定義其 UI。 這可讓您的應用程式：

  • 充分利用空間。 如果您將應用程式設計成在行動裝置上看起來不錯，則應用程式仍然可以在桌面裝置上使用，但很可能會有一些浪費的空間。 您可以自定義應用程式，以在畫面超過特定大小時顯示更多內容。 例如，購物應用程式可能會一次在行動裝置上顯示一個專案，但可能會在桌面裝置上顯示多個專案。 此外，藉由在畫面上放置更多內容，您可以減少使用者需要執行的流覽量。
  • 利用裝置功能。 某些裝置更有可能具有特定功能。 例如，行動裝置更有可能有位置感測器和相機，而桌面裝置可能也沒有。 您的應用程式可以偵測哪些功能可用，並啟用使用這些功能的控件。
  • 針對輸入進行優化。 您可以重新排列 UI 元素，以針對特定輸入類型進行優化。 例如，如果您將瀏覽元素放在應用程式底部，行動使用者將更容易存取。 但桌面使用者通常會預期會看到瀏覽元素接近應用程式頂端。

當您針對特定平台和裝置慣用語優化應用程式的 UI 時，您會建立回應式 UI。 在 .NET MAUI 中建立回應式 UI 的主要方法包括使用 OnPlatform 標記延伸和 OnIdiom 標記延伸。

注意

觸發程式類別稱為狀態觸發程式，可用來自定義特定案例中的UI外觀，例如裝置方向變更時。 如需詳細資訊，請參閱 狀態觸發程式。

根據平臺自定義UI外觀

OnPlatform 標記延伸可讓您自訂每個平台的 UI 外觀。 它提供與 OnPlatform<T> 和 On 類別相同的功能，但具有更簡潔的表示法。

類別 OnPlatform 支援 OnPlatformExtension 標記延伸，其定義下列屬性：

  • Default類型 object為的 ，您設定為要套用至表示平臺的屬性的預設值。
  • Android，類型 object為 ，您設定為要套用在 Android 上的值。
  • iOS，類型 object為 ，您設定為要套用在 iOS 上的值。
  • MacCatalyst，類型 object為 ，您設定為要套用在 Mac Catalyst 上的值。
  • Tizen，類型 object為 ，您設定為要套用在 Tizen 平臺上的值。
  • WinUI，類型 object為 ，您設定為要套用在 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 示範 ] 頁面會顯示如何使用 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 縮寫版本。 OnPlatform三個標記延伸會將的、 WidthRequest和 屬性BoxView設定xref:Microsoft.Maui.Graphics.Color為 iOS 和 HeightRequest Android 上的不同值。 標記延伸也會在未指定之平臺上提供這些屬性的預設值，同時排除 Default= 表達式的一部分。

根據裝置語式自定義UI外觀

標記 OnIdiom 延伸可讓您根據應用程式執行裝置的成語來自定義UI外觀。 類別支援 OnIdiomExtension 此類別，其定義下列屬性：

  • Default，類型 object為 ，您設定為預設值，以套用至代表裝置慣用語的屬性。
  • Phone，類型 object為 ，您設定為要套用在手機上的值。
  • Tablet，類型 object為 ，您設定為要套用在平板電腦上的值。
  • Desktop，類型 object為 ，您設定為要套用在桌面平臺上的值。
  • 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個標記延伸會將的、 WidthRequest和 HeightRequest 屬性BoxView設定Color為手機、平板電腦和桌面慣用語上的不同值。 標記延伸也會在未指定慣用語上提供這些屬性的預設值，同時排除 Default= 表達式的一部分。