Basic XAML

前の章ではXMALは何か、XMAL を何のために使うかを説明しましたが、実際にはどのようにXAMLでコントロールを記述するのでしょうか。次の例のように、XMAL でコントロールを作成するにはコントロールの名称を山カッコで囲むことで簡単にできます。例えば、Buttonはこのようになります。

<Button>

XAMLタグは終了タグを書くか、開始タグの最後にスラッシュをつけて終わらなければなりません。

<Button></Button>

または

<Button />

多くのコントロールは開始タグと終了タグの間に中身（コンテンツ）を置くことができます。これがコントロールのコンテンツになります。例えばButtonコントロールは開始タグと終了タグの間にボタンの上に表示するテキストを置くことができます：

<Button>A button</Button>

HTMLは大文字小文字を区別しませんが、XAMLではコントロール名は .NET frameworkの型に一致する必要があるので区別します。コントロールのプロパティに対応する属性名も同様です。タグに属性を追加して２つのプロパティを定義したボタンを示します：

<Button FontWeight="Bold" Content="A button" />

FontWeightプロパティでボールド書式を設定し、Contentプロパティを設定します。これは開始タグと終了タグの間の文字を書くのと同じです。しかし、コントロールの全ての属性はControl-Dot-Property記法を使ったメインコントロールの子タグとして定義することも出来ます。

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

この結果は正確に上と同じになります。この場合は全て構文に関するものであり、それ以外の何ものでもありません。しかし、多くのコントロールはテキスト以外のContent、例えば他のコントロールなどを持つことが出来ます。ボタン内部にいくつかのTextBlockコントロールを使い、同じボタンに異なる色のテキストを持つボタンの例を以下に示します：

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

Contentプロパティは単一の子要素だけが許されているので、ここでは違った色のテキストを含んだWrapPanelを使っています。WrapPanelのようなWPFで重要な役割をするものについては後ほど詳細に議論しますが、今はこれらを単にコントロールを格納するものと考えます。

単純に違う方法で書いた以下のマークアップは、全く同じ結果になります。

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

コードとXAML

上記の例はXAMLの作成がとても簡単なことを示していると願いますが、これを行う多くの違った方法があり、上記の例が違った色のテキストのボタンを作る多くのマークアップだと考えるなら、全く同じ動作をするC#と比べてみましょう：

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

もちろん、上記の例をもっと分かりやすく、より簡単な文法でも書けるかも知れませんが、XAML の方がとても短く、簡潔にインターフェースを記述できると思います。