ControlTemplate
WPFのUIエレメントは、Styleプロパティ(http://windowssdk.msdn.microsoft.com/en-us/library/system.windows.frameworkelement.style.aspx)を持っており、これを利用することであらかじめ定義しておいたプロパティ、トリガ、イベントなどを一度に適用させることができます。
このStyleについてまだご存じない方は、下記のページが参考になるかと思います。
http://windowssdk.msdn.microsoft.com/en-us/library/ms745683.aspx
このStyleとは別に、WPFのコントロール(http://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.aspx)は、Templateプロパティ(http://windowssdk.msdn.microsoft.com/en-us/library/system.windows.controls.control.template.aspx)を持っており、これを利用することでプロパティでは設定できない外観を変更することができます。
今までのWindowsフォームコントロールでは、プロパティでコントロールの背景色などは簡単に変更できましたが、たとえばボタンそのものの形を変更するとなると、少々特殊な処理を書かなければなりませんでした。また、それに伴ってマウスの処理なども変更しなければならかったこともあったかと思います。
WPFのコントロールでは、ControlTemplateを定義しておきそれを各コントロールへ適用することで、このようなことを比較的簡単に実現することができます。
ここでは三角形のボタンを作成する例をご紹介します。
この例では、StyleとControlTemplateの両方を使用します。StyleとControlTemplateはリソースとして定義する必要があります。
リソースは、システムレベルのリソース、アプリケーション単位のリソース、Window単位のリソース、各エレメント単位のリソースと様々なレベルで定義することができます。今回はResourceDictionaryとして別ファイルに定義したものを、Windowのリソースとして適用します。
リソースについてまだよくご存じない方は、下記のページが参考になるかと思います。
http://windowssdk.msdn.microsoft.com/en-us/library/ms750613.aspx
Dictionary1.xaml
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Polygon x:Name="ButtonBG" Points="0,200 150,0 300,200 0,200"
Stroke="Gold" StrokeThickness="3">
<Polygon.Fill>
<SolidColorBrush Color="Orange"/>
</Polygon.Fill>
</Polygon>
<ContentPresenter Margin="0,120,0,0" TextBlock.FontSize="36"
TextBlock.TextAlignment="Center">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Path.Fill" Value="Gold" TargetName="ButtonBG" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Path.Fill" Value="OrangeRed" TargetName="ButtonBG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-10"/>
<TranslateTransform X="-20"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-10"/>
<TranslateTransform X="-20" Y="10"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Window1.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ControlTemplate" Height="150" Width="400"
>
<Window.Resources>
<ResourceDictionary Source="\Dictionary1.xaml"/>
</Window.Resources>
<Viewbox Stretch="Uniform">
<StackPanel Orientation="Horizontal">
<Button Margin="10">はい</Button>
<Button Margin="10">いいえ</Button>
<Button Margin="10">キャンセル</Button>
</StackPanel>
</Viewbox>
</Window>
これを実行しますと、下記のような画面となります。
ボタンに三角形の画像を張り付けたのとは違い、きちんと三角形の中にマウスポインタがないとボタンを押すことはできません。
Window1.xamlのResourceDictionary部分をコメントアウトすると、下記のような画面になります。
ControlTemplateを使えば、今までは実現したくてもできなかった素敵なUIを作ることができそうです。