根據平臺和裝置語氣自定義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 上的值。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
為 ,您設定為要套用在平板電腦上的值。 此屬性不專屬於 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
個標記延伸會將的、 WidthRequest和 HeightRequest 屬性BoxView設定Color
為手機、平板電腦和桌面慣用語上的不同值。 標記延伸也會在未指定慣用語上提供這些屬性的預設值,同時排除 Default=
表達式的一部分。