演習: 最初の XAML ページを作成する

10 分

電力会社のエンジニアは、定期的に顧客を訪問し、アプライアンスを修理したり、その他の電気的メンテナンス作業を行ったりします。エンジニアは、このアプリの一部で、訪問に関するメモを作成できます。エンジニアが詳細を入力して保存できる、シンプルなエディターが表示されます。

Android では、アプリは次のように表示されます。

Android で実行されているエンジニアのアプリ。エディターページが表示されます。

あなたは、このページに、さらにいくつかの機能を追加するよう依頼されています。開始する前に、このページがどのように作成されたかを理解する必要があるため、ソースコードを調べます。 UI がすべて C# コードを使用して作成されていることがわかります。このアプローチは機能しますが、レイアウトを処理するコードと、UI の動作方法を制御するコードが混在します。あなたは、やがてアプリの 2 つの側面が一緒に固定された状態となって、将来のメンテナンスが難しくなり、より多くの機能が追加されるにつれてアプリがより脆弱になる可能性があることを認識します。レイアウトを定義している C# コードをアプリから取り出し、それを XAML ページに置き換えることで、UI デザインを UI ロジックから分離することに決めました。

このモジュールでは、.NET 10.0 SDK を使用します。任意のコマンドターミナルで次のコマンドを実行して、.NET 10.0 がインストールされていることを確認します。

dotnet --list-sdks

次の例のような出力が表示されます。

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

10 で始まるバージョンが一覧に表示されていることを確実にします。何も表示されていない場合、またはコマンドが見つからない場合は、最新の .NET 10.0 SDK をインストールします。

既存のアプリを調べる

この演習の GitHub リポジトリをコンピューター上でローカルに複製します。

注

ビルドによって生成されたファイルが最大パス長を超えないようにするには、演習コンテンツを C:\dev などの短いフォルダーパスにクローンするまたはダウンロードすることをお勧めします。
リポジトリのローカルコピーの exercise1 フォルダーに移動します。
このフォルダーまたは Visual Studio Code のフォルダー内の visual Studio ソリューションファイルNotes.slnを開きます。
ソリューションエクスプローラーウィンドウで、Notes プロジェクトを展開し、MainPage.xaml ファイルを展開して、MainPage.xaml.cs ファイルを開きます。

このファイルで定義されている MainPage クラスを確認します。コンストラクターには、UI を作成する次のコードが含まれています。

public MainPage()
{
    var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };

    editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
    editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;

    var buttonsGrid = new Grid() { HeightRequest = 40.0 };
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });

    var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
    saveButton.Clicked += OnSaveButtonClicked;
    Grid.SetColumn(saveButton, 0);
    buttonsGrid.Children.Add(saveButton);

    var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
    deleteButton.Clicked += OnDeleteButtonClicked;
    Grid.SetColumn(deleteButton, 2);
    buttonsGrid.Children.Add(deleteButton);

    var stackLayout = new VerticalStackLayout 
    { 
        Padding = new Thickness(30, 60, 30, 30),
        Children = { notesHeading, editor, buttonsGrid }
    };

    this.Content = stackLayout;
}

UI は、3 つの列で VerticalStackLayout、Label、Editor を格納している Grid で構成されています。最初の列は saveButton コントロールを保持し、2 番目の列はスペーサー、3 番目の列には deleteButton コントロールがあります。

次の図に、UI の構造を示します。

Notes アプリの UI 構造の図。

MainPage クラスには、ボタンのイベント処理メソッドと、Editor コントロールを初期化するいくつかのコードも含まれていることに注意してください。このコードは UI 定義と区別されていません。

アプリの外観を確認するだけのために、Windows でアプリをビルドして実行します。 F5 キーを押してアプリをビルドして実行します。
完了したら、アプリを閉じて、Visual Studio または Visual Studio Code に戻ります。

UI の XAML バージョンを作成する

MainPage.xaml ファイルを開きます。このページ内のマークアップは、空の MAUI コンテンツページを表しています。

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

</ContentPage>

このコンテンツページに VerticalStackLayout コントロールを追加します。

<ContentPage ...>
    <VerticalStackLayout Margin="30,60,30,30">

    </VerticalStackLayout>
</ContentPage>

Label に VerticalStackLayout コントロールを追加します。次に示すように、このコントロールの Text、 HorizontalTextAlignment、 FontAttributes プロパティを設定します。

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label Text="Notes"
               HorizontalOptions="Center"
               FontAttributes="Bold" />
    </VerticalStackLayout>
</ContentPage>

Editor に VerticalStackLayout コントロールを追加します。

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
    </VerticalStackLayout>
</ContentPage>

Grid に子の VerticalStackLayout を追加します。この Grid には 3 つの列が必要です。1 列目と 3 列目は自動的にサイズ設定されますが、2 列目の幅は 30 です。

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ColumnDefinitions="Auto, 30, Auto">

        </Grid>
    </VerticalStackLayout>
</ContentPage>

子 Button の最初の列に Grid を追加します。 [保存] ボタンは次のとおりです。

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    Clicked="OnSaveButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

子 Button の 3 列目に別の Grid を追加します。 [ 削除 ] ボタンは次のとおりです。

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button ... />

            <Button Grid.Column="2"
                    Text="Delete" 
                     WidthRequest="100"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

分離コードファイルからレイアウトコードを削除する

ソリューションエクスプローラー ウィンドウで MainPage.xaml ノードを展開し、MainPage.xaml.cs ファイルを開きます。
MainPage クラスから Editor フィールドを削除します。
MainPage.xaml.cs ファイルの MainPage コンストラクターで、ユーザーインターフェイス要素を作成するすべてのコードを削除し、InitializeComponent メソッドの呼び出しに置き換えます。ノートの格納に使用するファイルが存在するかどうかを確認するコードを追加し、存在する場合は内容を読み取り、 エディター コントロールの [テキスト] フィールドに値を設定します。コンストラクターは、次のようになる必要があります。
```
public partial class MainPage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public MainPage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
        {
            editor.Text = File.ReadAllText(_fileName);
        }
    }

    ...
}
```
[ ビルド ] メニューの [ ソリューションのリビルド] を選択します。まったくエラーなくアプリがビルドされることを確認します。
アプリケーションを実行します。これは以前とまったく同様に機能するはずです。
時間がある場合は、Android エミュレーターを使用してアプリをデプロイし、実行します。アプリの UI は、この演習の開始時に画像で示したものと似ている必要があります。

フィードバック

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

演習: 最初の XAML ページを作成する

既存のアプリを調べる

UI の XAML バージョンを作成する

分離コード ファイルからレイアウト コードを削除する

フィードバック

分離コードファイルからレイアウトコードを削除する