コマンド長かった~!次はスタイル!!
CSSのスタイルシートみたいに、見た目を定義するのによく使いそう。
WPFのコントロールは、軒並みStyleプロパティを持ってて、そこにStyleを設定できるようになってる。
ということで簡単なもので動きを確認してみる。
<Window x:Class="WpfStyleStudy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button Content="Hello Style" Background="Aquamarine">
</Button>
</Grid>
</Window>
実行するとAquamarine色のボタンが表示される。
まだ、スタイルは使ってない。これをStyleで書き直してみると↓のような感じになる。
<Window x:Class="WpfStyleStudy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button Content="Hello Style">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Aquamarine" />
</Style>
</Button.Style>
</Button>
</Grid>
</Window>
Styleの構文はとても簡単。StyleタグにTargetTypeを指定する。
そして、SetterタグのProperty属性でプロパティ名を指定してValue属性で、プロパティの値を指定する。実行結果はさっきと同じなので省略。
さて、StyleがButtonタグの中にあると、CSSのように再利用したいよ!って思ったときに難しい。
ということで通常は、Resourcesに入れてStaticResourceあたりで参照する形で使うことになる。
<Window x:Class="WpfStyleStudy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<!-- リソースにスタイルを定義! Keyも指定してる。 -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Aquamarine" />
</Style>
</Window.Resources>
<Grid>
<!-- StaticResourceでStyleを取得してる -->
<Button Content="Hello Style" Style="{StaticResource buttonStyle}">
</Button>
</Grid>
</Window>
因みに、これでもWindowの範囲でしか再利用できないから、もっと汎用的に再利用だぜ!っていう場合にはApplicationクラスのResourcesに入れる。
そうすると、アプリケーション全体で再利用可能なものが出来上がる。
最期に、ResourcesにあるStyleのKey値を省略すると自動的にTargetTypeで指定した型が入るっぽい。
Keyに型が入ってると、その型に自動的にStyleがあたるようになってる。
これを利用すると、下みたいな感じでいける。
<Window x:Class="WpfStyleStudy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Aquamarine" />
</Style>
</Window.Resources>
<Grid>
<Button Content="Hello Style">
</Button>
</Grid>
</Window>
これは、DefaultStyleKeyプロパティというのがあってそこらへんと絡んでくるみたいだ。でも、それは別の話。