【Xamarin.Forms】マテリアルデザインを使ってみた

数日前にXamarin.FormsでButtonやEntryなどのUIをマテリアルデザインにできる機能が追加されたようなので早速試してみました。

環境

Visual Studio Community 2017 for Mac
Xamarin.Forms (3.6.0.220655)

手順

まずは空のXamarin.Formsアプリを作り、Nugetパッケージ【Xamarin.Forms.Visual.Material】を各プロジェクト（共通、Android、iOS）にインストールします。また、全てのNugetパッケージは最新にしておきます。

　　
次にAndroidプロジェクトのTarget FrameworkをAndroid9.0に変更します。（ここで8.1などの低いバージョンになっているとこの後のコードでエラーになります）

最後にAndroid、iOSの各プロジェクトのファイルにコードを追加します。

Android(MainActivity.cs)

protected override void OnCreate(Bundle savedInstanceState)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    //ここを追加
    global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

    LoadApplication(new App());
}

iOS(AppDelegate.cs)

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();

    //ここを追加
    global::Xamarin.Forms.FormsMaterial.Init();　

    LoadApplication(new App());
    return base.FinishedLaunching(app, options);
}

これで準備は完了です。あとはXAMLに記述するだけです。UIのVisualプロパティを「Material」とすればOKです。例えばButtonだと以下のようになります。

<Button Visual="Material"
        Text="マテリアルデザインのボタン" />

Buttonを例にしてデフォルトとマテリアルデザインの比較を実際の画面で確認しましょう。

左：iOS 　　右：Android

iOSは結構変わりますね！

使ってみて一つ気になる点としては、マテリアルデザインにするとXAMLのプレビューでエラーが発生するようで、表示されなくなってしまうことです。うーん、これは困る。何か解決方法はないものか・・・。

といったところで今回の記事はこれまで！

参考ページ

https://blog.xamarin.com/beautiful-material-design-android-ios/

Xamarin.Forms マテリアル Visual - Xamarin | Microsoft Docs