XAML in Xamarin.Forms 基礎篇 電子書

特別說明

2017/02/07

Xamarin FAQ 2-007 : 同平台下執行,有不同Xaml屬性值

問題

若您想要在同樣一個 XAML 頁面中,根據當時所執行的行動裝置平台不同,而能夠產生不同的效果,例如,想要定義一個 BoxView 控制項的背景顏色,在 Android / iOS / UWP 平台下,有著不同的顏色與寬度,該如何在 XAML 中宣告呢?

解答

您可以參考底下的範例,首先使用 Property-Element 的表示方式,例如,這裡使用 BoxView.Color 的方式來定義這個 BoxView 的背景顏色,不過,在 Property-Element 內,不直接宣告固定的顏色物件,而是使用 OnPlatform 這個方法,根據不同行動裝置作業平台,設定不同的顏色。其中,先宣告 OnPlatform 這個項目,不過,需要使用 x:TypeArguments 來標示這個 OnPlatform 要用到的泛型型別,接著,就可以在底下,這設定不同的顏色。
在這裡有個需要注意到的地方,若要使用 OnPlatform 來定義不同平台會使用不同的物件值,您需要知道當時宣告的物件型別為何,並且使用 x:TypeArguments 來宣告,在 WidthRequest 這個屬性,因為實際的型別為 dobule,所以,在這裡需要使用 x:TypeArguments="x:Double" 來宣告。
    <BoxView HorizontalOptions="Center">
      <BoxView.Color>
        <OnPlatform x:TypeArguments="Color"
          iOS="Green"
          Android="#738182"
          WinPhone="Accent" />
      </BoxView.Color>

      <BoxView.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double"
          iOS="330"
          Android="240"
          WinPhone="150" />
      </BoxView.WidthRequest>
      <BoxView.HeightRequest>300</BoxView.HeightRequest>     
    </BoxView>
Xamarin-跨平台手機應用程式設計入門-粉絲團

沒有留言:

張貼留言