共用方式為


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

流覽範例。 流覽範例

.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 上的值。
  • ConverterIValueConverter別為 的 ,可設定為實 IValueConverter 作。
  • ConverterParameterobject別為 的 ,可設定為要傳遞至實作 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為 ,您設定為要套用在平板電腦上的值。 此屬性不專屬於 Android 和 iOS 平臺。
  • Desktop,類型 object為 ,您設定為要套用在桌面平臺上的值。 請注意,某些膝上型計算機可能會使用 Tablet 屬性來分類。
  • TV,類型 object為 ,您設定為要套用在電視平臺上的值。
  • Watch,類型 object為 ,您設定為要套用在 Watch 平臺上的值。
  • ConverterIValueConverter別為 的 ,可設定為實 IValueConverter 作。
  • ConverterParameterobject別為 的 ,可設定為要傳遞至實作 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個標記延伸會將的、 WidthRequestHeightRequest 屬性BoxView設定Color為手機、平板電腦和桌面慣用語上的不同值。 標記延伸也會在未指定慣用語上提供這些屬性的預設值,同時排除 Default= 表達式的一部分。