Sample9 / TemplateのStyle化

About

ここまでに"ControlTemplate"と"Style"、2種類のデザイン(外観)の変更方法について解説してきました。それぞれの利点や役割については大まかに、ControlTemplateは詳細なレベルで外観を設定(変更)することができる、Styleは容易に外観を設定し共有することができる、と解説しています。

しかしながら突き詰めれば、ControlTemplateでカッコよくデザインしたものを、Styleのように容易にあつかいたい、という需要が発生します。そこでSample9ではStyleからControlTemplateを指定する方法について解説します。

HowTo

このサンプルで解説する部分は1か所だけです。ControlTemplateのSetterに注目してください。Setterが対象とするプロパティをTemplateに設定し、またその値をStaticResourceにしていることが確認できます。以下に該当箇所を取り上げます。

<Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>

つまりSetterではControlTemplateを設定することもできるということです。このサンプルではStaticResourceにButtonTemplateを指定していますが、これはControlTemplateに名前(x:Key)ButtonTemplateを指定してあることに注意してください。ControlTemplateの解説でも同様の解説をしましたが、ControlTemplateやSetterが指定する名前(x:Key)は、その記述(設定)より上に記述(設定)されている必要があります。

    <UserControl.Resources>        
        <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">            
            <Border Name="border"
                    Background="{TemplateBinding Background}"
                    CornerRadius="10"
                    Padding="10">
                <ContentPresenter Content="{TemplateBinding Content}" 
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"/>
            </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="Blue" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter TargetName="border" Property="Background" 
                            Value="{Binding Background,
                            RelativeSource={RelativeSource TemplatedParent} }" />
                </Trigger>
            </ControlTemplate.Triggers>            
        </ControlTemplate>
        
        <Style TargetType="Button">
            <Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </UserControl.Resources>
    
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">        
        <Button Content ="Hello Style" Height="50" Width="200" 
                Background="Crimson" />
        <Button Content="Hello Style" Height="50" Width="200"
                Background="CornFlowerBlue" Margin="0,10,0,0"/>
    </StackPanel>

これでSample9は終わりです。また当初予定していた全ての項目の解説を終えました。ControlTemplateとStyleについては、まだまだ基本的なあつかい方やテクニックが多くありますが、ここまでの内容を理解できれば、公式や他の有志の方々が公開されている情報から十分に学ぶことができると思います。