Xamarin.Forms.Visual.Materialでコントロールの見た目を変更する

docs.microsoft.com

devblogs.microsoft.com

iOSとAndroidで可能な限り同じマテリアルデザインの見た目に統一することができる.

これまではそれぞれネイティブのコントロールをそのまま使っていたところを,見た目を統一できる,かつデザインを新し目のものにできる,というところかな.

Xamarin.Forms.Visual.MaterialをNugetでインストールする.

次に,Android,iOSの各プロジェクトにそれぞれ以下を追記します.

Android

MainActivity.csで,global::Xamarin.Forms.Forms.Init(this, savedInstanceState);の下に次の1行を追加します.

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

iOS

iOS側ではAppDelegate.csで同じくglobal::Xamarin.Forms.Forms.Init();の下に以下の1行を追加します.

global::Xamarin.Forms.FormsMaterial.Init();

デフォルトとマテリアルの切り替え

ContentPageのVisualプロパティにDefaultまたはMaterialを指定することで切り替えることができます.

<ContentPage
    Visual="Material"
...
>

デザイン適用対象となるコントロール

• ActivityIndicator
• Button
• CheckBox
• DatePicker
• Editor
• Entry
• Frame
• Picker
• ProgressBar
• Slider
• Stepper
• TimePicker

見た目の比較

見た目はDefaultとMaterialで以下のような違いがあります.

色の指定はしていないほぼデフォルトでの違いです.

Visual="Default"の場合

Visual="Material"の場合

相違点

比較的大きな違いは以下の点です

• Buttonに影が付き,若干立体的になった(Frameと同じぐらいかな)
• Editor,Entry,PickerなどPlaceholderを持つコントロールの場合,フォーカス時にPlaceholderが左上にアニメーションで退避する

↓フォーカス

• 入力欄の見た目が変わった ↓

入力欄の見た目やプレースホルダーのアニメーションは好ましいと思った.