画像ボタンを作成してみる。

カスタムボタンを定義

とりあえず、カスタムボタンを定義し、基本的にスタイルのみ設定していみる。

<Button x:Class="MyButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:App1"
             mc:Ignorable="d" >
    <Button.Style>
        <Style TargetType="Button" >
            <Setter Property="Foreground" Value="Red" />
            <Setter Property="FontSize" Value="25" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Button.Style>

ControlTemplateでボタンの内部構成とTriggerで表示・非表示を切り替える。

状態ごとに、表示を切り替えているだけだが、上手く動いた

    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Image Name="Normal" Source="/App1;component/Images/btn_normal.png"/>
                <Image Name="MouseOver" Source="/App1;component/Images/btn_mouseover.png" Visibility="Hidden"/>
                <Image Name="Pressed" Source="/App1;component/Images/btn_pressed.png" Visibility="Hidden"/>
                <Image Name="Disabled" Source="/App1;component/Images/btn_gray.png" Visibility="Hidden"/>
                <TextBlock Name="NormalText" Margin="0,5,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Text="{TemplateBinding Content}"/>
                <TextBlock Name="PressedText" Margin="0,5,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Foreground="White" Text="{TemplateBinding Content}"  Visibility="Hidden"/>
                <TextBlock Name="DisabledText" Margin="0,5,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Foreground="Gray" Text="{TemplateBinding Content}"  Visibility="Hidden"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                    <Setter TargetName="NormalText" Property="Visibility" Value="Hidden"/>
                    <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="PressedText" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                    <Setter TargetName="MouseOver" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                    <Setter TargetName="NormalText" Property="Visibility" Value="Hidden"/>
                    <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="DisabledText" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
           
        </ControlTemplate>
    </Button.Template>