Sample7 / Styleの基本
About
Sample6まではControlTemplateについてあつかいましたが、Sample7からはStyleについて解説します。StyleもControlTemplateと同様に、WPFが提供するUIなどの外観を装飾・変更することができます。Styleは主にWebで利用されているCSS(CascadingStyleSheets)と類似する仕組みです。詳細についてはWebの話になるので割愛しますが、[1]定義された文章などの枠組みと、[2]その文章を表示する方法を、別々に管理したほうがメンテナンス性が向上し、変更に柔軟に対応できるでしょう、という設計方針です。
ControlTemplateに関する項目を既に読了している場合には、Styleについては簡単に把握することができるはずです。
このコンテンツは将来的にControlTemplateの解説とStyleの解説とに分けられる可能性があります。Styleについて十分に解説されていないためです。また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を選択するのが良いでしょう。