WPF Styleまとめ

WPFのStyleを使ってみたのでまとめ。

Styleを使うと選択した物によって文字の色を変えたり

Triggerというプロパティやバインディングの状態によって値を変えることによって、
テキストの上にマウスが乗ったら文字の透明度をあげたり、
クリックするたびに画像を切り替えるなど、色々とできます。

○画像の切り替え

<Image>
   <Image.Style>
      <Style TargetType="{x:Type Image}">
         <Style.Triggers>
            <DataTrigger Binding="{Binding IsPlay}" Value="False">
	       <Setter Property="Source" Value="play.png"/>
	     </DataTrigger>
	     <DataTrigger Binding="{Binding IsPlay}" Value="True">
	       <Setter Property="Source" Value="Stop.png"/>
	     </DataTrigger>
	 </Style.Triggers>
      </Style>
   </Image.Style>
</Image>

：解説
DataTriggerはバインディングで使われる。
今回はボタンがクリックされるたびにフラグを切り替えるプロパティを用意し、
その値がTrueだったらStop、されてなかったらPlayの画像を読み込むといったことをしている。
今回はクリック毎に画像を変えるのがXAML上では出来なくてそうしてる(調べが甘いだけでほんとは出来るのかもしれない)が、
マウスが上に乗ったら(IsMouseOverプロパティ)を使えば透明度を上げたりして強調するなども出来る。

○選択した物によって文字の色を変える

<Style TargetType="TextBlock" x:Key="EventItem">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Category}" Value="0">
            <Setter Property="Foreground" Value="{StaticResource RedBrushColor}"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Category}" Value="1">
            <Setter Property="Foreground" Value="{StaticResource GreenBrushColor}"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Category}" Value="2">
            <Setter Property="Foreground" Value="{StaticResource BlueBrushColor}"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

:解説
上と同じようにDataTriggerを使って文字色を切り替えをしている。
使われてるプロパティは↓(ReactivePropertyを使っているのでINofityPropertyを継承せずに自動実装プロパティを使ってます)

public class EventAnimation
{
    public string Name
    {
        get;
        set;
    }
    public uint Category
    {
        get;
        set;
    }
}
    

このCategoryプロパティはコンボボックスにもバインディングされているので、
コンボボックスで値が変わったら自動的に文字色が変わる仕組みになっています。
また、上記と違ってListBoxのItemに使われているのでStaticResource化しているのも特徴です。

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel>
            <TextBlock Text="{Binding Name}" Style="{StaticResource EventItem}" />
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

今回は以上です。
また何か触ったら書こうと思います。