演習: 動作を XAML ページに追加する

10 分

以前に Notes アプリの UI レイアウトを C# コードから XAML に変更しました。これで、次の機能をページに追加する準備が整いました。

ラベルのフォントの色と背景色、ボタン、およびエディターコントロールのカスタマイズをサポートします。これにより、ハイコントラスト UI を必要とするユーザーのアクセシビリティ向上のために、アプリを容易に調整できます。
Android および iOS のエディターコントロールの高さを調整します。 Windows で実行する場合、このコントロールには十分な幅があり、ユーザーはコントロールをスクロールする前に十分な量のテキストを入力できます。 Android スマートフォンや iPhone では、幅が狭いほどスクロールが素早く行われるため、垂直方向のスペースを広げることをお勧めします。

XAML で静的リソースを使用する

アプリのフォントの色と背景色の値を保持する静的クラスを作成します。次に、x:Static マークアップ拡張機能を使用してこれらの値をクラスから読み取り、それをページ上のコントロールの XAML マークアップに適用します。

Visual Studio で、前の演習で編集した Notes アプリに戻ります。

注

アプリの作業コピーは、前の演習の開始時に複製した演習リポジトリの exercise2 フォルダーにあります。
ソリューションエクスプローラー ウィンドウで、Notes プロジェクトを右クリックし、[追加] を選択し、続いて [クラス] を選択します。
[新しい項目の追加] ダイアログボックスで、[クラス] テンプレートが選択されていることを確認します。新しいクラスファイルに SharedResources.cs という名前を付けた後、[追加] を選択します。
SharedResources.cs ファイルで、using ディレクティブを以下のコードに置き換え、SharedResources クラスを static としてマークします。
```
namespace Notes;

static class SharedResources
{

}
```
static readonly フィールド FontColor を SharedResources クラスに追加します。このフィールドは現在、青に対応する値を提供していますが、任意の有効な RGB 値の組み合わせを使用して変更できます。
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

static readonlyBackgroundColor という名前の 2 番目のフィールドを追加し、任意の色に設定します。

static class SharedResources
{
    ...
    public static readonly Color BackgroundColor = Color.FromRgb(0xFF, 0xF0, 0xAD);
}

MainPage.xaml ファイルを開きます。
以下の XML 名前空間宣言を、ContentPage 要素の x:Class 属性の前に追加します。この宣言は、C# Notes 名前空間のクラスを XAML ページのスコープに取り込みます。
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
次のコードに示す TextColor 属性を Label コントロールに追加します。このマークアップは、x:Static マークアップ拡張機能を使用して、static クラスのフィールドに格納されている値を取得します。
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

x:Static マークアップ拡張機能を使用して、TextColor および BackgroundColor コントロールの Editor および Button 属性を設定します。 MainPage.xaml ファイルの完成したマークアップは次のようになります。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage">

    <VerticalStackLayout Padding="30,60,30,30">
        <Label Text="Notes"
            HorizontalOptions="Center"
            FontAttributes="Bold" 
            TextColor="{x:Static Member=notes:SharedResources.FontColor}" />

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" 
                TextColor="{x:Static Member=notes:SharedResources.FontColor}"/>

        <Grid Grid.Row="2" ColumnDefinitions="Auto,30,Auto">

            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnSaveButtonClicked" />

            <Button Grid.Column="2"
                    Text="Delete" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>

</ContentPage>

注

この XAML コードには、TextColor および BackgroundColor プロパティを設定するマークアップの繰り返しが含まれています。 XAML を使用すると、App.xaml ファイルでリソースディクショナリを使用することで、アプリ全体にグローバルに適用できるリソースを定義できます。この手法については、後のモジュールで説明します。

アプリをリビルドし、Windows を使用して実行します。 SharedResources クラスで指定したものと色が一致していることを確認します。時間がある場合は、Android エミュレーターを使用してアプリを実行してみてください。
完了したら Visual Studio に戻ります。

プラットフォーム固有のカスタマイズを追加する

Visual Studio で MainPage.xaml ファイルを開きます。
Editor コントロールの定義を探し、次の例に示すように HeightRequest プロパティの値を変更します。
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
このマークアップは、既定のコントロールの高さを 100 単位に設定しますが、Android では 500 に増やします。
アプリをリビルドし、Windows を使用して実行してから、Android を使用して実行します。アプリは、各プラットフォームで次のようになります。

フィードバック

このページはお役に立ちましたか?