Sample7 / Styleの基本

About

Sample6まではControlTemplateについてあつかいましたが、Sample7からはStyleについて解説します。StyleもControlTemplateと同様に、WPFが提供するUIなどの外観を装飾・変更することができます。Styleは主にWebで利用されているCSS(CascadingStyleSheets)と類似する仕組みです。詳細についてはWebの話になるので割愛しますが、[1]定義された文章などの枠組みと、[2]その文章を表示する方法を、別々に管理したほうがメンテナンス性が向上し、変更に柔軟に対応できるでしょう、という設計方針です。

ControlTemplateに関する項目を既に読了している場合には、Styleについては簡単に把握することができるはずです。

HowTo

ControlTemplateとの比較(差別化)のため、あえてControlTemplateの内容は残しています。ControlTemplateの後に続いて、Styleが定義されていることを確認してください。次にStyleの定義だけを抜き出します。

        <Style TargetType="Button">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontStyle" Value="Italic"/>
        </Style>

StyleはControlTemplateと同じように適用する対象を設定する必要があります。ここでは引き続きButtonコントロールを対象とする例を示します。TargetType=Buttonとなっていることを確認してください。これはControlTemplateで解説したものと全く同じです。

ただし、ControlTemplateではTemplateを適用したいButtonコントロールに Template="{StaticResource ButtonTemplate}" などと設定して、適用することを明示しましたが、Styleの場合には、Styleを定義した時点で全ての対象となるコントロールにStyleが適用されます。

次いでStyleによって外観を変更する方法について解説します。サンプルのソースコードを見ればわかるように、これもControlTemplateであつかった内容と同様です。ControlTemplateのTriggerであつかったものと同じように、Setterを定義することによって対象の外観を変更します。Setterについての解説はControlTemplateの内容を読了しているものとして割愛します。

    <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="FontWeight" Value="Bold"/>
            <Setter Property="FontStyle" Value="Italic"/>
        </Style>
    </UserControl.Resources>
    
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">        
        <Button Content ="Hello Style" Height="50" Width="200" 
                Background="Green" Template="{StaticResource ButtonTemplate}" 
                Foreground="White" />
        <Button Content="Hello Style" Height="50" Width="200" Margin="0,10,0,0" />
    </StackPanel>

これでSample7は終わりです。Styleは、ControlTemplateと比較して外観の詳細な部分までを変更することはできませんが、容易に統一的なデザインの変更・外観の装飾ができます。Styleを学習することによって、例えばいくつかあるButtonの1つ1つに設定をすることなく、たった1つのデザインを定義するだけで全てのButtonの外観を変更することができます。ControlTemplateではそのControlが持っている機能や構成要素を把握し、それぞれについて定義する必要がある、といった手間がかかりますから、単純なデザインの共有だけであればStyleを選択するのが良いでしょう。