WPFでボタンに画像を張り付ける

ボタンに画像を張り付けて、押したとき/押していないときの画像を切り替えるようなことをしました。

f:id:mr-xxxx-bank-band:20190214110005j:plain

f:id:mr-xxxx-bank-band:20190214110015j:plain

これは以下のxamlコードを書くことで実現できます。

<UserControl x:Class="ButtonImage.Button1"
             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:ButtonImage"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <Style x:Key="ButtonBase" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Image  Name="image" Stretch="Fill" Width="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelWidth}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelHeight}"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="False">
                                <Setter TargetName="image" Property="Source" Value="/Resource/red.png" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="image" Property="Source" Value="/Resource/blue.png"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Button Style="{StaticResource ButtonBase}"/>
    </Grid>
</UserControl>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA