Xamarin.Forms XamlでOS毎に別のViewを指定する方法

今回はXamarin.FormsでXaml上でOS毎に別のViewを指定する方法についてのお話です。

Viewの一部についてiOSとAndroidで別のViewを表示したいということもあるかと思います。
その際にXaml上で簡単にViewの出し訳を設定することができます。

早速そのやり方についてです。

<OnPlatform x:TypeArguments="View">
    <On Platform="iOS">
        <Button
            WidthRequest="120"
            HeightRequest="60"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
    </On>
    <On Platform="Android">
        <ImageButton
            WidthRequest="120"
            HeightRequest="60"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
    </On>
    <On Platform="UWP">
        <BoxView
            WidthRequest="120"
            HeightRequest="60"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
    </On>
</OnPlatform>

このように、OnPlatformというのを使用し、OSごとにViewの設定を行うことができます。
AndroidとUWPは同じでよいが、iOSだけ違うViewを設定したいという時も、

<OnPlatform x:TypeArguments="View">
    <On Platform="iOS">
        <ImageButton
            WidthRequest="120"
            HeightRequest="60"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
    </On>
    <On Platform="Android, UWP">
        <Button
            WidthRequest="120"
            HeightRequest="60"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
    </On>
</OnPlatform>

このようにして、まとめて設定することが可能です。

コードでわざわざViewの作成、出し分けをしなくて済むのでとても便利です。