XAMLのお勉強メモ

ずいぶんお久しぶりの投稿となります。ざわです。

はじめに

　社内でアプリを作るにあたりクロスプラットフォーム開発で「.NET MAUI」でやりましょうと。

　そこでXAMLのお勉強を始めてみました。

　初歩の初歩レベルからですが、ちょこちょこ触って試してみたことをメモっていきたいと思います。

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

　　（.NET MAUI が目的なのですが、まずは情報の多い Xamarin.Forms を使ってみます）

試してみたこと

1. 　MainPageに画面遷移用のボタンを追加し、別のページ（Page1.xaml） に遷移
2. 　画面遷移用ボタンに画像を表示
3. 　Page1.xaml によく使いそうなコントロールを配置

　０．準備

1) 「モバイル アプリ（Xamarin.Forms） C#」で空の新規プロジェクトを作成

 

 

2) 新しいXAMLページを追加

　新しい項目追加で「コンテンツページ」を選択

Page1.xaml を作成

　１．MainPageに画面遷移用のボタンを追加し、別のページ（Page1.xaml） に遷移

1) MainPage.xaml に画面遷移用のボタンを追加

 

 　23行目の 

 　<Button x:Name="button1" Text="次ページ" Clicked="button1_Clicked"

　これを追加すると、

　C#プログラム（MainPage.xaml.cs）にボタンクリックイベントが自動で作成されます。

2)  ボタンクリックイベントに Page1.xaml に画面遷移するコードを追加

　イベントに Page1.xaml に画面遷移するコードを追加しますが、

　その前に、ページのナビゲーションを行うには、

　アプリで最初に表示する画面をNavigationPageクラス にする必要がある、とのことなので、

　プロジェクトのAppクラスのコンストラクタ（App.xaml.cs）を 次のように書き換えます。

public App()

{

    InitializeComponent();

    //MainPage = new MainPage();

    MainPage = new NavigationPage(new App1.MainPage());

}

 

　MainPage.xaml.cs のボタンクリックイベントでは、

　Navigation の PushAsyncメソッドを呼びます。　

　（モーダル表示でページ遷移する方法）

private void button1_Clicked(object sender, EventArgs e)

{

    Navigation.PushAsync(new Page1());

}

 

■実行結果

　２．ボタンに画像を表示

スマホアプリのボタンはもっとおしゃれでなきゃ、と思い、ボタンコントロールに画像を表示してみることにしました。

 

1) 表示したい画像ファイルをソリューションの以下ディレクトリに配置

Androidプロジェクト：　\Resources\drawable

iOSプロジェクト：　　　\Resources

Image1.png を配置

 

 

 

2) 画像ファイルのプロパティでビルドアクションを設定

Androidプロジェクト：　AndroidResource

iOSプロジェクト：　　　BundleResource

3) 上の１．1)で追加したMainPage.xaml の ボタンコントロール を以下のように変更

（ImageSource プロパティに画像ファイルをバインド） 

 <Button x:Name="button1" Clicked="button1_Clicked" ImageSource="Image1.png" />

 

■実行結果

 いまいちの仕上がりですが、まぁ、今日のとこはこれくらいで。。

 

　３．Page1.xaml によく使いそうなコントロールを配置

Page1.xaml にテキスト、日付、時刻などのコントロールを配置してみます。

XAMLではレイアウトコントロールの上に、子要素となるテキスト等のコントロールを配置しますが、

今回は「StackLayout」と「Grid」で試してみようと思います。

<レイアウトコントロール> 

　・StackLayout

　・AbsoluteLayout

　・RelativeLayout

　・Grid

　・FlexLayout 

StackLayout 版

<StackLayout BackgroundColor="Azure">

    <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"

        DateSelected="OnDateSelected" />

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

    <TimePicker x:Name="timePicker"

        Time="11:00:00"

        Format="T"

        Margin="30, 0, 30, 10"

        PropertyChanged="OnTimePickerPropertyChanged" />

       

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

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

</StackLayout>

 

■実行結果 

Grid 版

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition Height="4*" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition Width="3*" />

    </Grid.ColumnDefinitions>

    <BoxView Grid.Row="0" Grid.ColumnSpan="2" Color="Blue" />

    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="画面タイトル"

            HorizontalOptions="Center" VerticalOptions="Center" FontSize="Large" FontAttributes="Bold" />

   

    <Label Grid.Row="1" Grid.Column="0" Text="タイトル："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <Entry Grid.Row="1" Grid.Column="1" Placeholder="タイトル" x:Name="title" />

    <Label Grid.Row="2" Grid.Column="0" Text="日付："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <DatePicker Grid.Row="2" Grid.Column="1"

        x:Name="datePicker"

        Format="D"

        DateSelected="OnDateSelected" />

    <Label Grid.Row="3" Grid.Column="0" Text="時刻："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <TimePicker Grid.Row="3" Grid.Column="1"

        x:Name="timePicker"

        Time="11:00:00"

        Format="T"

        PropertyChanged="OnTimePickerPropertyChanged" />

    <BoxView Grid.Row="4" Grid.Column="0" Color="Orange" />

    <Label Grid.Row="4" Grid.Column="0" Text="メモ："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <BoxView Grid.Row="4" Grid.Column="1" Color="Orange" />

    <Editor Grid.Row="4" Grid.Column="1" x:Name="editor" HeightRequest="80" />

</Grid>

■実行結果  

・Gridを5行2列で定義

・１行目～４行目は同じ行高さで５行目（メモ欄）だけ 他の行の4倍の高さを設定

<RowDefinition Height="4*" />

・2列目は1列目の3倍の幅を設定。 

<ColumnDefinition Width="3*" />

・1行目（画面タイトル欄）は Grid.ColumnSpan でセル結合。

Grid.ColumnSpan="2"

 

（Gridの分割が分かるように一部背景色を設定しています） 

 

Fin

　XAMLのホットリロード機能が使えたのでリアルタイムに修正が反映されて便利でした。

　次はもう少しシュッとしたつくりの画面をご紹介できるようにしたいと思います。

　それではまた。