[アーティクル]
10/20/2021

Visual Studio 2010 自習書～ Do-It-Yourself シリーズ～
XAML による Windows アプリケーション開発の基礎

第 1 回 XAML 概要

更新日: 2011 年 1 月 6 日

本 XAML Do-It-Yourself シリーズでは、13 回にわたって XAML (Extensible Application Markup Language) の基礎を学習していきます。本書の目的は、初めて XAML を学ぶプログラマが、XAML を利用する WPF アプリケーション (スタンドアロンで実行可能) や、Silverlight アプリケーション (ブラウザーで実行可能) を開発する際のファーストステップを提供することです。コンパクトな実例を紹介し、XAML によるコード作成を体験しながら、XAML の基礎を理解していただきます。

まずはコードを作成する前準備として、今回は XAML の概要を紹介するとともに、Visual Studio 2010 を使った XAML プログラミングの手順について紹介します。次回以降は、実際に XAML を記述して WPF アプリケーションを作成しながら、XAML の記述方法や XAML で実現できる機能について学習していきます。

実行環境について

本書では、XAML を記述してアプリケーションを実行する環境として、Visual Studio 2010 Express Edition 以上を前提にしています。XAML のコードを記述したファイルは通常のテキストファイルですので、実際には Microsoft Windows SDK とテキストエディターがあれば WPF アプリケーションを作成することもできますが、シンタックスに応じたカラー構文表示や、ビルドが容易であるといった統合開発環境のメリットを考慮して、Visual Studio 2010 を用います。無償で利用が可能な Visual Studio 2010 Express Edition はこちらからダウンロードできます。

Visual Studio 2010 では、従来の Windows フォームアプリケーションと同様に、コントロールをウィンドウにドラッグアンドドロップして配置することで WPF アプリケーションを作成でき、XAML を自動的に生成することもできます。しかし、WPF アプリケーションでユーザーインターフェイスの定義を担う XAML ファイルを直接扱うことで、より高度で効率的な WPF アプリケーション開発が可能です。

ページのトップへ

2. XAML とは

XAML とは、ユーザーインターフェイスを記述するためのマークアップ言語で、WPF (Windows Presentation Foundation) アプリケーションや Silverlight などのアプリケーション開発で利用されます。WPF は .NET Framework 3.0 から提供されているフレームワークで、2D および 3D グラフィックスや動画を含めたさまざまなメディアを統一された手法で利用でき、今までにないユーザーエクスペリエンスを実現します。

以下の画面は、WPF アプリケーションの実行例です。

図 1

XAML は WPF アプリケーションのユーザーインターフェイスを定義するものであり、非常に重要な役割を果たします。例えば前記画面で示した WPF アプリケーションの XAML のコードは次のように記述されています (一部を抜粋)。

            <TextBlock Grid.Row="0" Grid.ColumnSpan="3" Style="{DynamicResource TitleText}">
                <Span>Order Prints and Gifts</Span>
            </TextBlock>

このように、XAML はマークアップ言語である XML をベースにしており、要素 (Element) と属性 (Attribute) を XML と同様のタグ "< ～ >" を用いて記述します。ただし XAML では、XML 宣言である「<?xml version="1.0" encoding="utf-8"?>」を冒頭に挿入する必要はありません。

ページのトップへ

3. XAML の特徴

XML でユーザーインターフェイスを記述する XAML のプログラミングには、以下のような特徴があります。

ユーザーインターフェイスとロジックの分離

最も大きな特徴は、ユーザーインターフェイスのデザインと、アプリケーションのロジックを完全に分離できることです。コンピューターの高性能化や、それに伴うユーザビリティーの高度化により、精巧で効果的なユーザーインターフェイスが求められる現在の状況では、これは大きなメリットです。

C# や Visual Basic などを用いたこれまでの Windows フォームアプリケーションの作成では、フォームなどのユーザーインターフェイス部分もプログラミング言語のソースファイルの一部として作成されていました。高度なユーザーインターフェイスのデザイン作業では、専門的なデザイナーの協力が欠かせませんが、従来ではこれが簡単ではありませんでした。

これに対し XAML を用いたアプリケーション開発では、ユーザーインターフェイスを定義する XAML ファイルと、アプリケーションのロジックを記述するソースファイル (コードビハインドファイル) が分離されています。XAML にはユーザーインターフェイスのデザイン要素が集約されているため、デザイナーは XAML ファイルを作成してユーザーインターフェイスを作成、一方プログラマはロジックの作成という具合に作業を完全に分離できます。ボタンのクリックや、マウスの移動といったユーザーインターフェイス関連の処理は XAML ファイルとは別のソースファイルに記述します。

統一されたプログラミング

もう 1 つの XAML の特徴は、すべてのグラフィックス機能を、統一した方法で利用できる点です。これは、厳密には XAML というより WPF の特徴ですが、WPF の機能を実現するための記述を XAML で行うという点で、ここでは XAML の特徴として挙げておきます。

これまでのプログラミングでは、コントロールの描画はコモンコントロール (User32) を用い、線や矩形の描画は GDI (GDI+) を、3D グラフィックスを描画するには DirectX を、また、動画をコントロールしたい場合は、DirectShow を用いるといった具合に、さまざまなコンポーネントを混ぜて利用する必要がありました。それぞれの API のスタイルが異なるため、残念ながら従来のプログラミング環境では、プログラミング作業は複雑です。しかし XAML では、これらを統一されたモデルで取り扱い可能であり、また 2D/3D グラフィックスをより簡単に扱えます。

ベクターグラフィックス

また、描画はベクターグラフィックスで行われるため、ジャギーのない、滑らかな表示が行われます。表示内容を拡大/縮小してもジャギーのない表示が行えるのが特徴です。

カスタマイズの柔軟性

XAML では、ボタンやリストボックスなどの既存のコントロールのカスタマイズが簡単に行えることも大きな特徴です。これまではカスタムコントロールを作成してライブラリ化していたようなことも、XAML では、XAML 上で記述を追加することで、既存のコントロールの外見を簡単に変更できます。

また XAML でツリー状 (階層的) に記述されたコントロールは、上位のコントロールの設定が下位に記述されたコントロールに継承されます。これにより無駄のない効率的なユーザーインターフェイスの記述が行えます。次に示すボタンの例は、ボタンの輪郭にグラデーションを付加したものです。

図 2

ページのトップへ

4. WPF アプリケーションの作成

XAML への実践的な理解を深めるために、実際に Visual Studio 2010 を使って WPF アプリケーションを作成し、その中身を見てみることにしましょう。

Visual Studio 2010 から「WPF アプリケーション」プロジェクトテンプレートを選択して新規プロジェクトを作成し、WPF アプリケーションを生成します。生成されるプロジェクトに含まれるファイルのうち、次の 4 つのファイルが重要です。ここでは利用するプログラミング言語として C# を選択しています。

App.xaml
App.xaml.cs
Window1.xaml
Window1.xaml.cs

これらのファイルのうち、拡張子が示すように XAML ファイルは 2 つで、ほかの 2 つは C# のソースコードです。

まず App.xaml は、アプリケーションの定義を行う XAML ファイルで、WPF アプリケーションでは不可欠です。そして Window1.xaml がアプリケーションのユーザーインターフェイスとなるウィンドウを定義します。こちらが今回のドキュメントで扱う XAML の中心となるファイルです。.cs ファイルはコードビハインドと呼ばれる、ユーザーインターフェイスに対応するロジックなどを記述するファイルです。コードビハインドについては「第 3 回イベント & トリガー」で詳しく紹介する予定です。

さて、Visual Studio の統合開発環境から Windows1.xaml を開くと、XAML ファイルを編集するためのデザイナーウィンドウ (WPF デザイナー) が開きます。このウィンドウの下部 (XAML ビュー) に表示されているコード (画面の赤枠部分) が XAML のコードです。統合開発環境では、左側にあるツールボックスからコントロールをドラッグアンドドロップしてユーザーインターフェイスを作成できますが、学習のため、本書では XAML ビューから直接 XAML を記述することでウィンドウのデザインを行っていきます。WPF デザイナーでは、XAML の記述に応じてデザインビューの表示が変化しますので、記述した XAML の内容の確認が容易に行えます。

図 3

プロジェクトテンプレートから生成された Windows1.xaml には次のような記述が含まれています。すでに説明したように、XML のルールでタグの記述が行われているのが分かります。

</Grid>
</Window>

XAML の構文については次項で説明しますが、試しに <Grid> タグと </Grid> タグの間の空行の部分に、

<Button Width="100" Height="40">はじめまして</Button>

と記述してみましょう。ウィンドウの中央に「はじめまして」と表示されたボタンがデザインビューに現れます。

ビルドして実行してみると、ここで記述されているとおり、525 × 350 ピクセルのウィンドウの中央に、100 × 40 ピクセルの正方形のボタンが表示されています。

図 4

ページのトップへ

5. XAML の言語仕様

このように、ボタンやリストボックスといったコントロールを XAML で記述していくことで、アプリケーションのユーザーインターフェイスが出来上がるわけです。

ここでは個別のプログラミングに進む前に、XAML の言語仕様の基本を押さえておきましょう。すでに述べたように、XAML には XML 宣言が含まれませんが、エンコードは UTF-8 です。また XML と同様、大文字と小文字は区別されます。

ルート要素と名前空間

XAML は XML をベースにしていますので、要素 (タグ) が階層的に記述されます。WPF アプリケーションの場合、最上位の要素であるルート要素は、前項で見たように <Window> 要素になります。ルート要素はほかにも <Application> や <Page> (Silverlight、ブラウザーベースのアプリケーションの場合) など、XAML を使用する状況に応じて複数あります。

WPF アプリケーションの場合の <Window> タグをもう一度見てみましょう。

まず <Windows> タグには名前空間 (xmlns) が 2 つ定義されています。1 つは既定の (WPF) 名前空間を指定するもの (https://schemas.microsoft.com/winfx/2006/xaml/presentation)、もう 1 つは XAML の名前空間を指定するものです (https://schemas.microsoft.com/winfx/2006/xaml)。XAML の名前空間には "x: " というプレフィックスが付けられています。XAML の名前空間を使用する場合は、この "x: " を付けて記述します。

例えば上記の例では「x:Class=" WpfApplication1.MainWindow"」と記述されていますが、これは、この XAML ファイルに対応するロジックを記述したクラスの名前空間がWpfApplication1、クラス名が Window1 であることを示しています。XAML における 2 つの名前空間は、XAML を記述する場合は常に必要なものです。

そのほかの、Title、Height、Width といった属性は、簡単に想像が付くように、表示されるウィンドウのタイトル、ウィンドウの大きさを指定しています。そして <Windows> 要素は、終了タグである </Windows> で閉じられています。

XAML 要素と属性を記述する

ルート要素である <Window> は、WPF のクラスライブラリにある System.Windows 名前空間の Window クラスに対応します。WPF には Button や TextBox といったクラス (コントロール) がありますが、こういったクラスは、XAML 上ではタグ名に対応すると考えてよいでしょう (詳細は次回に説明します)。そして Title や Width といった属性は、クラスのプロパティに対応します。また、<Window> タグの中に <Button> などのタグを記述することは、ルート要素が表すウィンドウ領域にボタンコントロールを配置していることになります。

XAML では、属性 (プロパティ) の記述方法に、いくつかのバリエーションが用意されています。先ほどは <Button> タグでボタンの大きさ (Width 属性と Height 属性) を指定し、さらにボタンに表示する文字列「はじめまして」を次のようにタグで囲んで記述しました。

<Button Width="100" Height="40">はじめまして</Button>

Content 属性を使えば、これは次のように属性だけを使って記述することもできます。

一方、プロパティの書き方に関しては、次のような記述も可能です。

<Button>
    <Button.Width>100</Button.Width>
    <Button.Height>100</Button.Height>
    <Button.Content>Hello</Button.Content>
</Button>

Button.Width という記述は、C# や Visual Basic でプロパティにアクセスする際のコーティングと似ています。XML のルールとしては、<Button> タグと <Button.Width> には何の関係もありませんが、XAML では <Button.Width> というタグは、上位の <Button> 要素のプロパティであることを示します。

このような記述は冗長なので、通常は、わざわざこういった記述はしませんが、スタイルやリソースの指定でプロパティの内容としてクラスを記述しなければならないような場合では「プロパティ要素構文」と呼ばれるこのような記述が有効な場合があります。また、プロパティ要素構文に対して、属性値としてプロパティを記述する構文を「属性構文」と呼びます。

マークアップ拡張機能

さらに XAML 独自の属性の記述方法として「マークアップ拡張機能」があります。これは "{}" を使って属性を記述します。次のコードでは、<Button> タグの Style 属性の部分でマークアップ拡張機能が用いられています。

<Window x:Class="WpfApplication1.MainWindow"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button" x:Key="MyBackground">
            <Setter Property="Background" Value="Yellow"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Width="100" Height="80" Style="{StaticResource MyBackground}">Style Button</Button>
    </Grid>
</Window>

マークアップ拡張機能については「第 5 回リソース」で詳しく紹介する予定です。

プロパティの継承

XAML が XML をベースにしていることから、XAML で定義するユーザーインターフェイスの構造は階層的になります。そのため上位の要素に設定した属性 (プロパティ) は下位の要素 (コントロール) に継承されます。

例えば、複数のコントロールをまとめる働きをするパネル (StackPanel) を配置し、このパネルのプロパティとして文字の大きさ (TextBlock.FontSize) を 20 ピクセルにセットします。そして、このパネル上にボタンとラベルを配置したとします。XAML は次のような内容になります。

<StackPanel Height="150" Width="240" TextBlock.FontSize="20">
    <Button Height="50">Button1</Button>
    <Button Height="50">Button2</Button>
    <Label Height="50">これはラベルです</Label>
</StackPanel>

実行すると、StackPanel で定義したフォントの大きさが、パネルに含まれるボタンやラベルにも継承されていることが分かります。

図 5

このように、XAML 上で階層的に定義されたコントロールでは、上位のコントロールのプロパティが継承されます。このようなコントロールの階層構造による影響は、プロパティだけではなくイベント処理でも発生します。

ページのトップへ

6. まとめ

今回は XAML の概要を紹介してきました。XAML が XML ベースであること、タグが WPF のクラス (コントロール) に対応し、属性がプロパティに対応していること、またタグを階層的に記述すると上位のコントロールのプロパティが継承されることをお伝えしました。

次回は、実際にウィンドウに配置するさまざまなコントロールについて学習します。

ページのトップへ

次の方法で共有

Visual Studio 2010 自習書～ Do-It-Yourself シリーズ～
XAML による Windows アプリケーション開発の基礎

第 1 回 XAML 概要

目次

1. はじめに - XAML Do-It-Yourself について

実行環境について

2. XAML とは

3. XAML の特徴

ユーザーインターフェイスとロジックの分離

統一されたプログラミング

ベクターグラフィックス

カスタマイズの柔軟性

4. WPF アプリケーションの作成

5. XAML の言語仕様

ルート要素と名前空間

XAML 要素と属性を記述する

マークアップ拡張機能

プロパティの継承

6. まとめ

その他のリソース

次の方法で共有

Visual Studio 2010 自習書 ～ Do-It-Yourself シリーズ ～ XAML による Windows アプリケーション開発の基礎

第 1 回 XAML 概要

目次

1. はじめに - XAML Do-It-Yourself について

実行環境について

2. XAML とは

3. XAML の特徴

ユーザー インターフェイスとロジックの分離

統一されたプログラミング

ベクター グラフィックス

カスタマイズの柔軟性

4. WPF アプリケーションの作成

5. XAML の言語仕様

ルート要素と名前空間

XAML 要素と属性を記述する

マークアップ拡張機能

プロパティの継承

6. まとめ

その他のリソース

Visual Studio 2010 自習書～ Do-It-Yourself シリーズ～
XAML による Windows アプリケーション開発の基礎

ユーザーインターフェイスとロジックの分離

ベクターグラフィックス