XAML を使用する利点
- 5 分
XAML は、C# コードの代わりに UI を構築するために使用できるマークアップ言語です。 XAML を使用すると、UI と動作のコードを分離して、両方を管理しやすくできます。
このユニットでは、XAML を使用する場合と、C# コードを使用する UI レイアウトの定義を比較します。 また、UI を定義するためのマークアップ言語として XAML を使用するメリットのいくつかについて学習します。
マークアップ言語とは何ですか。
マークアップ言語は、ドキュメントにさまざまな要素を導入するために使用できるコンピューター言語です。 定義済みのタグを使用して要素を記述します。 タグには、ドキュメントが使用されているドメインのコンテキストで特別な意味があります。
たとえば、ハイパーテキスト マークアップ言語 (HTML) を使用して、Web ブラウザーで表示できる Web ページを作成できます。 次の例で使用するすべてのタグを理解する必要はありません。重要なのは、このコードで、コンテンツとして "Hello World!" というテキストを含むドキュメントを記述することです。
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
あなたはマークアップ言語を使用した作業を経験済みかもしれません。 HTML を使用して Web ページを作成したことがあるかもしれません。または Visual Studio の project.csproj ファイルで拡張マークアップ言語 (XML) を変更したことがあるかもしれません。 Microsoft Build Tools は、このファイルを解析して処理します。
マークアップ言語を含むファイルが他のソフトウェア ツールによって処理され、解釈されることは一般的です。 このマークアップが解釈される性質は、XAML で意図される動作方法とまったく同じです。 ただし、これを解釈するソフトウェア ツールは、アプリの UI を生成できます。
XAML とは
XAML は、Microsoft によって作成された宣言型マークアップ言語です。 XAML は、アプリケーションで UI を作成するプロセスを簡略化するように設計されました。
作成する XAML ドキュメントには、アプリケーションの UI 要素を宣言によって記述する要素が含まれています。 XAML のこれらの要素がオブジェクトのインスタンス化を直接表すことに留意してください。 1 度 XAML で要素を定義すれば、分離コード ファイルでその要素にアクセスし、C# コードを使用して動作を定義できます。
.NET MAUI XAML と Microsoft XAML の違い
XAML は Microsoft 2009 XAML 仕様に基づいています。 ただし、その仕様は、その言語の構文のみを定義します。 XAML を使用する Windows Presentation Foundation (WPF)、Universal Windows Platform (UWP)、WinUI 3 と同様に、XAML で宣言する要素は変化します。
XAML は、2006 年に WPF で初めて登場しました。 Microsoft XAML をしばらくの間を操作した経験があれば、XAML 構文はお馴染みのはずです。
XAML の .NET MAUI フレーバーと、他の UI ツールで使用される XAML とは、いくつかの重要な違いがあります。 構造と概念は似ていますが、クラスとプロパティの名前の一部が異なります。
.NET MAUI XAML を使用して UI を作成する
XAML の動作を確認する最善の方法は、C# コード化された ContentPage ページの種類の既存の例を確認することです。 続いて、これを XAML を使用して定義された、同じ UI をもつ別のページと比較します。
次のようにコーディングされた ContentPage がアプリにあるとします。
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
ページには、レイアウト コンテナー、2 つのラベル、2 つのエントリ、1 つのボタンが含まれています。 このコードは、ボタンの Clicked イベントも処理します。 また、ページの要素にはほんの数個のデザイン プロパティが設定されています。 実行時、Android デバイスでは、ページは次のようになります。
ページにあるのは単純なデザインですが、同じファイルに動作とデザインの組み合わせがあります。
同じページを XAML を使用して定義したページ レイアウトは次のようになります。
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
ページを初期化し、Clicked コントロールの LoginButton イベントのイベント ハンドラーを実装する分離コード ファイル内の C# コードは次のようになります。
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
注
ページ コンストラクターの InitializeComponent メソッドでは、ページの XAML 記述を読み取り、そのページのさまざまなコントロールを読み込み、そのプロパティを設定します。 このメソッドを呼び出すのは、XAML マークアップを使用してページを定義する場合のみです。 C# コードを使用して UI を作成する方法を示す前の例では、InitializeComponent は呼び出されません。
この構造では、デザインと動作を分離できます。 UI の宣言全体は、UI の動作とは別の単一の専用ソース ファイルに含まれています。 さらに、XAML マークアップにより、アプリケーションの外観を理解しようとしている開発者にとって、わかりやすさが増します。
XAML を使用する利点
XAML を使用すると、動作ロジックを UI デザインから分離できます。 この分離によって、それぞれの部分を独立して構築でき、アプリが大きくなっても、アプリ全体を簡単に管理できるようになります。
また、この方法により、専門家の UI デザイナーは、UI ロジックを更新する開発者とは独立して、XAML 編集ツールを使用して UI の外観を更新できます。