WPF の ControlTemplate に挑戦

はじめに

ControlTemplate を使って、マウスカーソルがボタンの上にあるときと、押したときに背景色が変わる簡単なボタン用テンプレートを作成します。書籍とかずきさんのブログを参考に作成。

XAML

<Window x:Class="TemplateSample.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>

        <!--ボタンのテンプレート-->
        <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">

            <!--テンプレート内でアクセスするので名前を付けておく-->
            <!--角を丸めてボタンっぽく見せる-->
            <Border Name="border" CornerRadius="20,20,20,20" BorderThickness="2">

                <!--ボタンの背景を左から右へグラデーションさせる-->
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,1">
                        <GradientStop Color="#0593E2" Offset="0"/>
                        <GradientStop Color="#303030" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>

                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>

                <!--ボタンの上にマウスカーソルがあるとき-->
                <Trigger Property="IsMouseOver" Value="True">
                    <!--ボタンの上にマウスカーソルがある間は背景色を変更-->
                    <Setter TargetName="border" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,1">
                                <GradientStop Color="#0593E2" Offset="0"/>
                                <GradientStop Color="#FFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>

                <!--ボタンが押されたとき-->
                <Trigger Property="IsPressed" Value="True">
                    <!--押されている間は背景色を変更する-->
                    <Setter TargetName="border" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,1">
                                <GradientStop Color="#FF0000" Offset="0"/>
                                <GradientStop Color="#303030" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!--Styleを使ってTemplateをまとめて適用させる-->
        <Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
            <Setter Property="Template" Value="{StaticResource buttonTemplate}"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Foreground" Value="#FFFFFF"/>
        </Style>

    </Window.Resources>
    <StackPanel>
        <Button Content="Sample" />
        <Button Content="Test" />
    </StackPanel>
</Window>