まず、ウィンドウの真ん中に Button コントロールを配置しましょう。やり方はいろいろありますが、ここでは次のよう に配置します。
コード 7.1：Button コントロールを中心に配置する MainView.xaml
1 2 3 4 5 6 7 8 9 10
<Window x:Class="YKWpfIntroduction.Practices.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainView" Height="300" Width="300">
<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Button />
</Border>
</Grid>
</Window>
Content プロパティなどを何も指定していないため、非常に小さなボタンが表示されます。
図 7.1：真ん中にボタンが配置されている
この Button コントロールに対して Style を定義していきましょう。例えば次のように Style から Content プロパテ ィを設定します。
コード 7.2：Button コントロールの Style を定義する MainView.xaml
1 2
<Window x:Class="YKWpfIntroduction.Practices.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 4 5 6 7 8 9 10 11 12 13 14 15 16
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainView" Height="300" Width="300">
<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="Click me." />
</Style>
</Button.Style>
</Button>
</Border>
</Grid>
</Window>
Style クラスはそのスタイルがどのコントロールに対するものなのかを指定する TargetType プロパティがあるので、こ
れに対して Button クラスの型情報を指定します。そして、Style クラスの中に Setter クラスを羅列していくことでそ のスタイルを定義していきます。上記では Content プロパティに "Click me." という文字列を設定しています。実行す ると次のようにコンテンツが設定されていることが確認できます。
図 7.2：Style を通して Content プロパティが設定されている
他にも Setter を並べることで色々な設定をおこなうことができます。
コード 7.3：Style に Setter を並べることで設定を追加する MainView.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<Window x:Class="YKWpfIntroduction.Practices.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainView" Height="300" Width="300">
<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="Click me." />
<Setter Property="Padding" Value="10,5" />
<Setter Property="FontFamily" Value="Consolas" />
<Setter Property="FontSize" Value="24" />
</Style>
</Button.Style>
16 17 18 19
</Button>
</Border>
</Grid>
</Window>
図 7.3：FontFamily などを設定された Button コントロール
また、Setter の Value に入れ子のクラスを指定したいときは、Setter のタグの中に Value を書かずに次のように記 述します。
コード 7.4：Setter.Value プロパティを入れ子で指定する MainView.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<Window x:Class="YKWpfIntroduction.Practices.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainView" Height="300" Width="300">
<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="Click me." />
<Setter Property="Padding" Value="10,5" />
<Setter Property="FontFamily" Value="Consolas" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="LightGray" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Border>
</Grid>
</Window>
LinearGradientBrush はグラデーションで塗りつぶすためのブラシです。実行結果は次のようになります。
図 7.4：グラデーションで塗りつぶされた Button コントロール このように Style を通してプロパティを設定することができます。