Sample1 / Templateの基本

About

ControlTemplateとは、あるコントロール例えばボタンやチェックボックスなどの外観を構成する枠組み、を決定するものです。ここでは最もシンプルなControlTemplateの変更について解説します。サンプルは全てButtonを対象としています。またそのButtonはStackPanelの子要素となっています。

HowTo

現実的にはあまり使われませんが、最もシンプルにButtonの外観を変更する方法は次の通りです。Buttonタグの中に、Buttonの外観を示すためのButton.Templateタグを定義し、さらにその中に、ControlTempateタグを定義します。

ContolTemplateタグの中にTargetTypeが指定されていることを確認してください。これは定義するControlTemplateが、どのコントロールの外観を定める(装飾する)ものかを決定するためのものです。ここではButtonを装飾するので、ターゲットはButtonとなっています。

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        
        <Button Content="Button" Height="50" Width="200">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Background="Blue"
                            CornerRadius="10"
                            Padding="10">
                        <TextBlock Text="Hello Template"
                                   Foreground="White"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Left"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>
        
    </StackPanel>

ControlTemplateの中身を見ていきます。まずBorderと、TextBlockから構成されていることに注目します。BorderやTextBlockがどのようなコントロールであるかを理解できなければ、このコンテンツを読み進めることはできません。基本的な内容なので、解説を割愛します。

BorderとTextBlockにはそれぞれ外観を定めるプロパティ、Backgroundや、Foreground、文字を表示するTextプロパティが設定されています。ControlTemplate内で設定されたこれらは、そのControlTemplateが対象とするコントロールの外観を、設定されたプロパティに沿って変更します。

難しく書きましたが、つまり、ControlTemplateで背景は青と設定すれば、そのControlTemplateが適用されるコントロールの背景は青になります。ここではButtonの背景が青くなるわけです。

Sample1はこれで終わりです。まだまだ実用的ではありませんが、これが最低限の機能を持ったControlTemplateの例です。