XAMLのお勉強メモ ④

 こんばんは。ざわです。

今回もXAML ネタです。よろしくお願いします。

これまでのXAMLメモはこちらになります。

・XAMLのお勉強メモ①

・XAMLのお勉強メモ②

・XAMLのお勉強メモ③

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

今回試してみたこと

　少し前にマテリアルデザインの概念について学ぶ機会がありました。

　そこで、今回はXamarin Formsでマテリアルデザインを試してみようと思います。

　実装の流れとしては

1. 「Xamarin.Forms.Visual.Material」NuGetパッケージをインストール
2. マテリアルビジュアルを初期化
3. マテリアルビジュアルを適用

　1. 「Xamarin.Forms.Visual.Material」NuGetパッケージをインストール

NuGetで「Xamarin.Forms.Visual.Material」で検索し、 

iOS および Android プラットフォームのプロジェクトにインストールします。

　　

私の環境では、バージョン「5.0.0.2401」でインストールしようとするとエラーになりましたので、バージョンを下げて再度実行しました。

　　

 

　　

　2. マテリアルビジュアルを初期化

iOS 、Androidの各プラットフォームのプロジェクトで、Material Visualを初期化します。

iOSの場合 

AppDelegate.cs で、

Xamarin.Forms.Forms.Initメソッドの後に

Xamarin.Forms.FormsMaterial.Initメソッドを呼び出します。

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

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

 Androidの場合 

MainActivity.cs で、

Xamarin.Forms.Forms.Initメソッドの後に

Xamarin.Forms.FormsMaterial.Initメソッドを呼び出します。

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

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

 

　3. マテリアルビジュアルを適用

ここまで準備できたら、XAML側にマテリアルを適用します。

以下のコントロールが、マテリアルビジュアルがサポートされているコントロールなので、 

この中のいくつかを使って試してみます。

　・ActivityIndicator

　・Button

　・CheckBox

　・DatePicker

　・Editor

　・Entry

　・Frame

　・Picker

　・ProgressBar

　・Slider

　・Stepper

　・TimePicker

今回は「Button」「Entry」「DatePicker」「TimePicker」「Editor」「Slider」を使いました。 

ContentPage内のコントロールすべてに対して適用するため、
ContentPageに Visual="Material" を設定します。（特定のコントロールのみ設定することもできます）
マテリアルビジュアルを適用しない場合は Visual="Default" と設定します。

 

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="App4.MainPage"

             Visual="Material">

    <StackLayout BackgroundColor="#90caf9">

        <Label Text="タイトル:" Margin="20" />

        <Entry Placeholder="タイトル" x:Name="title" Margin="30, 0, 30, 10"/>

        <Label Text="日付:" Margin="20" />

        <DatePicker x:Name="datePicker"

        Format="D"

        Margin="30, 0, 30, 10" />

        <Label Text="時刻:" Margin="20" />

        <TimePicker x:Name="timePicker"

        Time="11:00:00"

        Format="T"

        Margin="30, 0, 30, 10" />

        <Label Text="メモ:" Margin="20" />

        <Editor x:Name="editor" Margin="30, 0, 30, 10" HeightRequest="80" />

        <Slider VerticalOptions="Fill" Margin="20" Maximum="360"/>

        <Button Text="登録" Margin="30, 0, 30, 10"/>

    </StackLayout>

</ContentPage>

 

実行結果

　左側が Material適用した画面で、右側が適用していない画面です。
　今回はAndroidでの確認のみで、iOSはまだ確認できていないのですが、、、
　Materialを適用した場合は、iOS と Android でほぼ同じ外観になっているはずです。

　

　これからはマテリアルデザイン、使っていきたいと思います。

　それではまた！