WPF Button の外観を変更する ControlTemplate サンプル

ControlTemplateを使うことでButtonの機能はそのまま・見た目だけ差し替えます。

<Window x:Class="ControlTemplateSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Button Template Sample" Height="200" Width="300">
    <Window.Resources>

        <!-- カスタムButtonスタイル -->
        <Style x:Key="RoundButtonStyle" TargetType="Button">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#3A7AFE"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="12,6"/>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="border"
                                Background="{TemplateBinding Background}"
                                CornerRadius="20"
                                Padding="{TemplateBinding Padding}">

                            <!-- ContentPresenterはContentを表示する -->
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                RecognizesAccessKey="True"/>
                                <!-- RecognizesAccessKey="True" _（アンダースコア）を使ったアクセスキー（Altキーショートカット）を有効にする-->
                        </Border>

                        <!-- 状態変化 -->
                        <ControlTemplate.Triggers>

                            <!-- マウスオーバー -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border"
                                        Property="Background"
                                        Value="#5C8DFF"/>
                            </Trigger>

                            <!-- 押下 -->
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border"
                                        Property="Background"
                                        Value="#2F64D6"/>
                            </Trigger>

                            <!-- 無効 -->
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="border"
                                        Property="Opacity"
                                        Value="0.5"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

    <Grid>
        <Button Content="クリック"
                Width="140"
                Height="45"
                Style="{StaticResource RoundButtonStyle}"/>
    </Grid>
</Window>

実行すると四隅がまるいボタンが表示されます。

ControlTemplate で定義した Border の見た目やトリガー動作がButton に適用された Style の結果として反映されています。

Style の中に書けるのは基本的にこの 4 種類です。

<Style TargetType="Button">

    <!-- ① Setter -->
    <Setter Property="..." Value="..." />

    <!-- ② EventSetter -->
    <EventSetter Event="..." Handler="..." />

    <!-- ③ Triggers -->
    <Style.Triggers>
        ...
    </Style.Triggers>

    <!-- ④ Template（Setter経由） -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>...</ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

Styleで設定できないもの

private フィールド
通常の CLR プロパティ
コードビハインドの変数