Ｃ＃＋WPF でボタンをテンプレートで画像に変更した時にマウスイベントで入れ替えたい。

C# + WPFプログラミングを独学で勉強中のものです。

WPFのボタンをテンプレートを使って画像に変更したボタンを作成しました。
マウスでクリックした時にボタンの画像を入れ替えたいのですが、どのように実装して良いのかご教授頂けると幸いです。

WPF
1<Button Click="button_Click">
2    <Button.Template>
3        <ControlTemplate TargetType="Button">
4            <ContentPresenter>
5                <ContentPresenter.ContentTemplate>
6                    <DataTemplate>
7                        <Image Source="aaa.png" />
8                    </DataTemplate>
9                </ContentPresenter.ContentTemplate>
10            </ContentPresenter>
11        </ControlTemplate>
12    </Button.Template>
13</Button>

C#
1private void button_Click(object sender, RoutedEventArgs e)
2{
3    // bbb.pngにボタンの画像を入れ替えたい。
4}

行動規範の内容に同意します

回答1件

ベストアンサー

マウスでクリックした時にボタンの画像を入れ替えたい

クリックごとに入れ替えたいのでしょうか？
もしそうだとするとそれはToggleButtonです。

例１テンプレートはそのまま
例２テンプレート変更

ON・OFFの単純な状態ではないし、コードからいろんな画像を設定したい。

例３ Binding Content

事情があってこのxamlは変更したくない。

例４ VisualTreeHelper

ほかにもいろいろ手法はあります。

xml
1<Window
2  x:Class="Questions271981.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <StackPanel Orientation="Horizontal">
8
9    <!--  例１ テンプレートはそのまま  -->
10    <ToggleButton VerticalAlignment="Top">
11      <ToggleButton.Style>
12        <Style TargetType="{x:Type ToggleButton}">
13          <Setter Property="Content">
14            <Setter.Value>
15              <Image Source="aaa.png" Stretch="None" />
16            </Setter.Value>
17          </Setter>
18          <Style.Triggers>
19            <Trigger Property="IsChecked" Value="True">
20              <Setter Property="Content">
21                <Setter.Value>
22                  <Image Source="bbb.png" Stretch="None" />
23                </Setter.Value>
24              </Setter>
25            </Trigger>
26          </Style.Triggers>
27        </Style>
28      </ToggleButton.Style>
29    </ToggleButton>
30
31    <!--  例２ テンプレート変更  -->
32    <ToggleButton VerticalAlignment="Top">
33      <ToggleButton.Template>
34        <ControlTemplate TargetType="ToggleButton">
35          <Image
36            x:Name="image"
37            Source="aaa.png"
38            Stretch="None" />
39          <ControlTemplate.Triggers>
40            <Trigger Property="IsChecked" Value="True">
41              <Setter TargetName="image" Property="Source" Value="bbb.png" />
42            </Trigger>
43          </ControlTemplate.Triggers>
44        </ControlTemplate>
45      </ToggleButton.Template>
46    </ToggleButton>
47
48    <!--  例３Binding Content  -->
49    <Button
50      VerticalAlignment="Top"
51      Click="Button_Click"
52      Content="aaa.png">
53      <Button.Template>
54        <ControlTemplate TargetType="Button">
55          <Image Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" />
56        </ControlTemplate>
57      </Button.Template>
58    </Button>
59
60    <!--  例４ VisualTreeHelper  -->
61    <Button VerticalAlignment="Top" Click="button_Click">
62      <Button.Template>
63        <ControlTemplate TargetType="Button">
64          <ContentPresenter>
65            <ContentPresenter.ContentTemplate>
66              <DataTemplate>
67                <Image Source="aaa.png" Stretch="None" />
68              </DataTemplate>
69            </ContentPresenter.ContentTemplate>
70          </ContentPresenter>
71        </ControlTemplate>
72      </Button.Template>
73    </Button>
74  </StackPanel>
75</Window>

cs
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Windows;
5using System.Windows.Controls;
6using System.Windows.Media;
7using System.Windows.Media.Imaging;
8
9namespace Questions271981
10{
11    public partial class MainWindow : Window
12    {
13        public MainWindow() => InitializeComponent();
14
15        // 例３ Binding Content
16        private void Button_Click(object sender, RoutedEventArgs e)
17        {
18            if(sender is Button button) button.Content = "bbb.png";
19        }
20
21        // 例４ VisualTreeHelper
22        private void button_Click(object sender, RoutedEventArgs e)
23        {
24            if(sender is Button button)
25            {
26                var image = button.Descendants<Image>().Single();
27                image.Source = new BitmapImage(new Uri("bbb.png", UriKind.Relative));
28            }
29        }
30    }
31
32    // [VisualTreeの子孫要素を取得する - xin9le.net](https://blog.xin9le.net/entry/2013/10/29/222336)
33    internal static class DependencyObjectExtensions
34    {
35        public static IEnumerable<DependencyObject> Children(this DependencyObject obj)
36        {
37            if(obj == null) throw new ArgumentNullException(nameof(obj));
38
39            var count = VisualTreeHelper.GetChildrenCount(obj);
40            if(count == 0) yield break;
41
42            for(var i = 0; i < count; i++)
43            {
44                var child = VisualTreeHelper.GetChild(obj, i);
45                if(child != null) yield return child;
46            }
47        }
48        public static IEnumerable<DependencyObject> Descendants(this DependencyObject obj)
49        {
50            if(obj == null) throw new ArgumentNullException(nameof(obj));
51
52            foreach(var child in obj.Children())
53            {
54                yield return child;
55                foreach(var grandChild in child.Descendants())
56                    yield return grandChild;
57            }
58        }
59        public static IEnumerable<T> Children<T>(this DependencyObject obj) where T : DependencyObject
60            => obj.Children().OfType<T>();
61        public static IEnumerable<T> Descendants<T>(this DependencyObject obj) where T : DependencyObject
62            => obj.Descendants().OfType<T>();
63    }
64}