[WPF] XAML の構文を理解する: 要素、属性、型変換

前回は、XAML とコード側のクラスがどのように結び付くのかを見ました。

今回は、XAML の最も基本的な読み方である、要素、属性、型変換を整理します。

XAML は見た目こそ XML ですが、WPF では .NET オブジェクトを作成し、そのプロパティに値を設定するための記法として使われます。

まずは、次の短い例を見てみます。

<Button Content="保存"
        Width="120"
        Height="32" />

この一行には、XAML の基本がほとんど入っています。

要素はオブジェクトを表す

XAML の要素は、多くの場合 .NET の型に対応します。

<Button />

これは、WPF の Button オブジェクトを作ることを表します。

C# で書くと、次のようなイメージです。

Button button = new Button();

同じように、次の XAML は StackPanel の中に TextBlock と TextBox を作ります。

<StackPanel>
    <TextBlock />
    <TextBox />
</StackPanel>

要素の親子関係は、オブジェクトの所有関係やコレクションへの追加として解釈されます。

この例では、StackPanel の子要素として TextBlock と TextBox が配置されます。

属性はプロパティを設定する

XAML の属性は、多くの場合、その要素が持つプロパティに値を設定します。

<Button Content="保存"
        Width="120"
        Height="32" />

これは、C# で書くと次のようなイメージです。

Button button = new Button();
button.Content = "保存";
button.Width = 120;
button.Height = 32;

Content、Width、Height は、Button が持つプロパティです。

XAML では、要素でオブジェクトを作り、属性でプロパティを設定する、と考えると読みやすくなります。

文字列として書いた値が型に変換される

XAML の属性値は、引用符の中に書きます。

<Button Width="120" />

見た目上は "120" という文字列です。しかし、Width プロパティの型は文字列ではなく double です。

それでも正しく動くのは、XAML の読み込み時に文字列から適切な型へ変換されるためです。

<Border Background="LightBlue"
        Margin="10"
        CornerRadius="4" />

この例では、属性値がそれぞれ別の型に変換されます。

この変換を支える仕組みが、型変換です。

TypeConverter

.NET には、文字列から特定の型へ変換するための TypeConverter という仕組みがあります。

WPF の XAML では、この仕組みによって、短い属性値を実際のオブジェクトや値に変換できます。

たとえば、Margin プロパティは Thickness 型です。

<Button Margin="10" />

これは、四方向すべてに同じ余白を指定する値として解釈されます。

<Button Margin="10,20,10,20" />

この場合は、左、上、右、下の順に余白を指定します。

C# で書くと、次のようなイメージです。

button.Margin = new Thickness(10, 20, 10, 20);

XAML では、このような値を簡潔な文字列で表現できます。

色とブラシの変換

WPF で背景色を設定するとき、次のように書けます。

<Grid Background="White" />

Background プロパティの型は Brush です。文字列の White が、そのまま Brush 型であるわけではありません。

XAML の読み込み時に、White という文字列から白色のブラシが作られます。

色は、名前だけでなく 16 進表記でも指定できます。

<Grid Background="#FFF0F4F8" />

このように、属性値は短く書けますが、内部では必要な型に変換されています。

列挙値の変換

列挙値も、文字列から変換されます。

<StackPanel Orientation="Horizontal" />

Orientation プロパティの型は文字列ではなく、Orientation 列挙型です。Horizontal という文字列が、列挙値へ変換されます。

stackPanel.Orientation = Orientation.Horizontal;

同じように、表示状態も文字列で指定できます。

<TextBlock Text="処理中"
           Visibility="Collapsed" />

Collapsed は Visibility 列挙型の値として解釈されます。

属性で書けない値

属性構文は簡潔ですが、すべての値を属性で書けるわけではありません。

たとえば、ボタンの中に複数の要素を入れたい場合、属性だけでは表しにくくなります。

<Button>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="保存" />
    </StackPanel>
</Button>

このような場合は、要素の中に別の要素を書きます。

また、プロパティに複雑なオブジェクトを設定したい場合は、次回扱うプロパティ要素構文を使います。

まとめ

XAML の基本は、要素と属性です。

XAML を読むときは、次のように考えると整理しやすくなります。

<Button Content="保存"
        Width="120" />

これは、Button オブジェクトを作り、Content と Width プロパティに値を設定している、という意味です。

属性値は文字列のように見えますが、double、Brush、Thickness、列挙値など、プロパティが求める型へ変換されます。

次回は、属性では表しにくい複雑な値を設定するための、プロパティ要素構文について整理します。