TOC

This article is currently in the process of being translated into Japanese (~87% done).

XMAL:

Basic XAML

前の章ではXAMLは何か、XAMLを何のために使うかを述べましたが、XAMLのコントロールはどう作りますか?次の例のように、XAMLのコントロールの作成は山カッコで囲まれた名前を書くのと同じぐらい簡単です。例えば、Buttonはこのようになります。

<Button>

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

<Button></Button>

または

<Button />

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

<Button>A button</Button>

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

<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はとても短く簡潔にインターフェースを記述できると考えます。