[WPF]押下するとイメージが切り替わるボタンの作り方

押下時にイメージが切り替わるボタンって頻繁に使うと思うのですが、標準では無いですよね??
xamlいじればできるのはわかるのですが、これくらいは用意してくれてても。。とか思ったりして。
色々調べるの面倒っす。

愚痴はおいておいて、イメージが切り替わるボタンのサンプルです。
最初にxaml内にControlTemplateを定義します。

<Window.Resources>

<ControlTemplate x:Key="buttonTemplate" TargetType="Button">
    <Border Name="border" BorderThickness="0" BorderBrush="Transparent">
        <Border.Background>
            <ImageBrush ImageSource="普段のイメージ.png" />
        </Border.Background>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="border" Property="Background" >
                <Setter.Value>
                    <ImageBrush ImageSource="押下された時のイメージ.png" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

</Window.Resources>

ちょっと説明しますと、ボタンの表示をBorderコントロールで行うようにして、そのBackgroundイメージを
プロパティトリガーにより切り替えるようにしています。

で、これをButtonに設定すればOKです。
こんな感じですね。

<Button  Height="90" Width="90"  Template="{StaticResource buttonTemplate}"/>

Buttonのタグ内に直接記述する場合には下記のようになります。

<Button Height="90" Width="90" >
<Button.Template>

    <ControlTemplate  TargetType="Button">
        <Border Name="border" BorderThickness="0" BorderBrush="Transparent">
            <Border.Background>
                <ImageBrush ImageSource="普段のイメージ.png" />
            </Border.Background>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="border" Property="Background" >
                    <Setter.Value>
                        <ImageBrush ImageSource="押下された時のイメージ.png" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

</Button.Template>
</Button>

スタイルを書き換えても対応出来そうだったのですが、どうしても上手くいかなかったので
テンプレートを使って対応しました。

あ、そうそう、「IsChecked」に対してのTriggerを追加すればトグルボタンになりますよ。

以上

[WPF]押下するとイメージが切り替わるボタンの作り方」への1件のフィードバック

  1. tkwatana

    そのままコピペして使わせていただいたのですが型 ‘System.Windows.Markup.XamlParseException’ の初回例外が PresentationFramework.dll で発生しました
    とのエラーが出力されてしまいます。なぜでしょうか?
    MainWindow.xaml————————————————————————

    ————————————————————————————————————————————————–
    MainWindow.xmal.cs———————————————————————————————————————-
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;

    namespace WpfApplication7
    {
    ///
    /// MainWindow.xaml の相互作用ロジック
    ///
    public partial class MainWindow : Window
    {
    public MainWindow()
    {
    InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {

    }
    }
    }
    ————————————————————————————————————–

    返信

コメントを残す

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