かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

WPF4.5入門 その50 「Style」

Styleについては、「WPF4.5入門 その21 「WPFのコンセプトと重要な機能つまみ食い」 - かずきのBlog@hatena」で簡単に紹介したとおり、コントロールに設定するプロパティの値のセットを集めるためのものです。共通の設定を行うコントロールが多数ある場合は、Styleを使うことで手間を軽減できます。

ここでは、まだ説明していないStyleの機能を中心に説明していきます。

スタイルの継承

Styleは、別のスタイルを元にして新しいStyleを作ることが出来ます。Styleの継承は、BaseOnというプロパティに元になるStyleを指定することで実現出来ます。例えば、基本的なテキストのフォントサイズを12にしてフォントをMeiryo UIにするようなTextBlock用のStyleを定義して、フォントはそのままに、サイズを24にして色を赤にしたいというケースの場合のStyleの定義例を以下に示します。

<Window.Resources>
    <!-- 継承元のスタイル -->
    <Style x:Key="DefaultTextStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="Meiryo UI" />
        <Setter Property="FontSize" Value="12" />
    </Style>
    
    <!-- 継承先のスタイル -->
    <Style x:Key="TitleTextStyle" TargetType="{x:Type TextBlock}" 
BasedOn="{StaticResource DefaultTextStyle}">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Foreground" Value="Red" />
    </Style>
</Window.Resources>

Styleを適用する側のTextBlockのコード例を以下に示します。

<StackPanel>
    <TextBlock Text="タイトル" Style="{StaticResource TitleTextStyle}" />
    <TextBlock Text="デフォルトのテキスト" Style="{StaticResource DefaultTextStyle}" />
</StackPanel>

実行すると、以下のような見た目になります。

f:id:okazuki:20140904200203p:plain

トリガー

Styleでは、Triggerを使うことでプロパティの値に応じてプロパティの値を変更することが出来ます。例えばマウスが上にあるときにTrueになるIsMouseOverプロパティがTrueの時に、背景色を青にするには以下のようなStyleを記述します。

<Style x:Key="DefaultTextStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="FontFamily" Value="Meiryo UI" />
    <Setter Property="FontSize" Value="12" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Blue" />
        </Trigger>
    </Style.Triggers>
</Style>

この例では、Triggerの中にSetteriが1つだけですが、複数のSetterを指定することも出来ます。実行して、TextBlockの上にマウスを移動させると以下のように背景色が青色になります。

f:id:okazuki:20140904200224p:plain

TriggerのPropertyに設定かのうなプロパティは、依存関係プロパティなので、その点に注意が必要です。

過去記事