Last-modified: Sun, 24 Mar 2013 10:06:27 JST
Counter:1232 Today:2 Yesterday:0 Online:3
このエントリーをはてなブックマークに追加

Sample8 / Styleの対象設定

About

Sample7で、"Styleの場合には、Styleを定義した時点で全ての対象となるコントロールにStyleが適用されます。"と述べていますが、厳密には異なります。もし本当にStyleの定義が全てのコントロールに適用されてしまうようでは、柔軟に対応できる、というStyleの良さを潰してしまいます。ここではStyleを一部の対象にのみ適用する方法について解説します。

Styleが全ての対象に適用されてしまうこともそれほど悪いことではないのですが、それは末の項目で解説します。

HowTo

解説する内容はほとんどなく、変更された部分も2か所だけです。ControlTemplateと同様に、Styleにもx:Keyを設定することができます。改めてx:Keyについて説明すると、Styleに任意の名前を付けておくための設定(機能)です。ここではx:Key="ImpactButton"として、設定するStyleにImpactButtonという名前を付けました。

x:Keyが設定されたStyleは、その段階で全ての対象へStyle(変更)を適用しなくなります。Styleを適用したいコントロール(要素)は、Style="{StaticResource Styleの名前}"を設定することでStyleの変更内容を適用します。ここでは2つのButtonコントロールの内、2つ目のコントロールがStyleを適用しています。そしてこの設定方法もControlTemplateと同様であることに注目します。ControlTemplateのときは "Template=" でした。Styleではそれが "Style=" になっただけです。

    <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" x:Key="ImpactButton">
            <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"
                Style="{StaticResource ImpactButton}"/>
    </StackPanel>

これでSample8は終わりです。実質的にControlTemplateの時点でStyleの解説もほとんど終えていたことが分かります。

補足

Styleが指定した全ての対象に対して無条件に変更を適用することは、実はそれほど悪いことではないかもしれません。

例えばここで例に挙げているButton(ボタン)コントロールですが、一般的なアプリケーションでは、ほとんどのボタンのデザインは統一されているでしょう。なので細々変更することは稀なことかもしれません。もしも3種類程度のデザインを用意する必要があったとして、そのほとんどがその内の1種(仮にAデザイン)とすると、AデザインでStyleを設定して、残りの少数は名前付きのStyleか、あるいは別の方法でデザインをすることが考えられます。

またここでは文字の装飾を例にStyleを解説していますが、例えば文字の設定についてはすべて共通である、などそういう場合にはStyleの性質は非常に有効です。状況に応じてうまく使い分けることが重要になります。