XAML 中的平台特定值

  • 5 分鐘

應用程式的視覺體驗在每個平台上都有所不同。 因此您將會常常需要依據所使用的視覺元素，針對每個平台微調 UI。 .NET MAUI 可讓您根據這些裝置屬性，來管理應用程式的版面配置。

本單元會介紹 .NET MAUI 提供的功能，可供根據應用程式執行的平台來微調應用程式 UI。

使用裝置類別

DeviceInfo 類別屬於公用程式類別，可提供裝置特有的資訊 (即執行您應用程式的裝置)。 此類別會透過一組屬性來公開此資訊。 最重要的屬性是 DeviceInfo.Platform，其會傳回字串，指出目前使用中的裝置類型：Android、iOS、WinUI 或 macOS。

關於可能會使用到此功能的時機，則能以下列情境為例。 .NET MAUI iOS 應用程式中的預設行為，是某個頁面的新增內容會逐漸干擾到畫面頂端的 iOS 狀態列。 而您想要變更此行為。 最簡單的解決方式是在頁面上將該內容下移。 您在上次練習時建立的「Notes」解決方案會將 VerticalStackLayout 控制項的 Padding 屬性設定為將內容下移 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 則設為黃色。

<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>

知識檢查

1.

您可以在 XAML 程式碼中使用何種標記延伸模組，來偵測應用程式在何種平台上執行？

2.

OnPlatform 延伸模組的 TypeArguments 屬性的用途麼？