【WPF】複数のImageコントロールにそれぞれ画像を表示したい、また画像を切り替えたい

Question

前提・実現したいこと

WPFで、複数のButtonコントロールとそれに対応した複数のImageコントロールがあるアプリを作っています。ButtonコントロールとImageコントロールはXAMLで定義したものを、cs側で配列のように扱えるように読み込んでいます。Button[0],Image[0]のような感じで。
各Button.Contentには識別のために文字列が入っています。

ここで、Button[x]をクリックしたときにImage[x]に画像が動的に表示されるようにしたいです。また、クリック回数で場合分けして画像が切り替わるようにもしたいです。
（表示なし）→画像AAA.png→画像BBB.png→（表示なし）→以下ループ
といった感じに。

以下コードになります。

        private int[] count = new int[5];//ボタンのクリック回数をリストに保存
        private System.Windows.Controls.Button[] button_ = new System.Windows.Controls.Button[5];
        private System.Windows.Controls.Image[] image_ = new System.Windows.Controls.Image[5];

        private void button_Click(object sender, RoutedEventArgs e)
        {
                //int x; 
                if (count[x] == 0)　//クリック回数が0回
                {
                    image_[x] = new Image();
                    image_[x].Visibility = Visibility.Visible;
                    BitmapImage bi = new BitmapImage();
                    bi.BeginInit();
                    bi.UriSource = new Uri("/Resources/AAA.png", UriKind.Relative);
                    bi.EndInit();
                    image_[x].Source = bi;                    
                    count[x]++;
                }
                else if (count[x] == 1)//クリック回数が1回
                {
                    image_[x] = new Image();
                    image_[x].Visibility = Visibility.Visible;
                    BitmapImage bi = new BitmapImage();
                    bi.BeginInit();
                    bi.UriSource = new Uri("/Resources/BBB.png", UriKind.Relative);
                    bi.EndInit();
                    image_[x].Source = bi;                    
                    count[x]++;
                }
                else if (count[x] == 2)//クリック回数が2回
                {
                    image_[x].Visibility = Visibility.Hidden;
                    count[x] = 0;
                }
　　　　 }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 5; i++)//各コントロールを配列化
            {
                button_[i] = this.FindName("Button_" + i.ToString()) as System.Windows.Controls.Button;
                image_[i] = this.FindName("ButtonImage_" + i.ToString()) as System.Windows.Controls.Image;
            }
        }

　　　　//座標情報など省きます。
        <Image x:Name="ButtonImage_0" IsHitTestVisible="False"/>
        ...
        <Image x:Name="ButtonImage_4" IsHitTestVisible="False"/>

        <Button x:Name="Button_0" Click="button_Click">
　　　　...
        <Button x:Name="Button_4" Click="button_Click">

これだと画像は表示されませんでした。
countが変わっているのは確認できたので、Buttonコントロールの配列化はできていると思います。Imageコントロールの方が参照されていないような気がしています。

初心者故、そもそもの前提知識もあやふやなところがあるので、Imageコントロールはこのように参照できない等の間違いがあればそちらも教えていただきたいです。

よろしくお願いします。

Answer 1

image_[x] = new Image();こうしたところで、元のButtonImage_0等には何の影響もありません。

Imageはすでにxamlで配置しているわけですから新たに作る必要はなく、Sourceを変更するだけでいいのです^^

<Window
  x:Class="Questions372108.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450">
  <StackPanel>
    <UniformGrid Rows="1">
      <Button x:Name="Button_0" Click="Button_Click" Content="Button_0" />
      <Button x:Name="Button_1" Click="Button_Click" Content="Button_1" />
      <Button x:Name="Button_2" Click="Button_Click" Content="Button_2" />
      <Button x:Name="Button_3" Click="Button_Click" Content="Button_3" />
      <Button x:Name="Button_4" Click="Button_Click" Content="Button_4" />
    </UniformGrid>

    <UniformGrid Rows="1">
      <Image x:Name="ButtonImage_0" IsHitTestVisible="False" />
      <Image x:Name="ButtonImage_1" IsHitTestVisible="False" />
      <Image x:Name="ButtonImage_2" IsHitTestVisible="False" />
      <Image x:Name="ButtonImage_3" IsHitTestVisible="False" />
      <Image x:Name="ButtonImage_4" IsHitTestVisible="False" />
    </UniformGrid>
  </StackPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;

namespace Questions372108
{
    public partial class MainWindow : Window
    {
        private readonly int[] counts = new int[5];
        private readonly Button[] buttons = new Button[5];
        private readonly Image[] images = new Image[5];

        private Button Button_0_Test;
        private Button currentButton;

        public MainWindow()
        {
            InitializeComponent();

            for (var i = 0; i < 5; i++)
            {
                buttons[i] = FindName($"Button_{i}") as Button;
                images[i] = FindName($"ButtonImage_{i}") as Image;
            }

            Button_0_Test = Button_0;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var x = Array.IndexOf(buttons, sender);

            if (counts[x] == 0)
            {
                var bi = new BitmapImage();
                bi.BeginInit();
                //bi.UriSource = new Uri("/Resources/AAA.png", UriKind.Relative);
                bi.UriSource = new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
                bi.EndInit();

                images[x].Source = bi;
                counts[x]++;
            }
            else if (counts[x] == 1)
            {
                var bi = new BitmapImage();
                bi.BeginInit();
                //bi.UriSource = new Uri("/Resources/BBB.png", UriKind.Relative);
                bi.UriSource = new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u20/201856/m2cobCxI_thumbnail.jpg");
                bi.EndInit();

                images[x].Source = bi;
                counts[x]++;
            }
            else if (counts[x] == 2)
            {
                images[x].Source = null;
                counts[x] = 0;
            }


            // これが何の意味もない理由
            //image_[x] = new Image();

            // 例えばこうしたとして、表示されているButton_0が入れ替わるわけではない！
            Button_0_Test = new Button { Content = "Button_0がこうは変わらない！", };

            // 単に変数Button_0_Testの指す先が、新しいボタンに変わっただけ
            // Button_0は依然表示されたまま
            // 新たに作ったボタンはウィンドウに追加されていないので、
            // 表示されずにただメモリ内にあるだけになっている


            // こういった使い方なら意味はあるが
            currentButton = sender as Button;
            currentButton.Content = $"Button_{x}_{counts[x]}";
            //buttons[x].Content = $"Button_{x}_{counts[x]}";
        }
    }
}

Comments

[ksgtksa43]

回答ありがとうございます。
ボタンクリックによる画像の表示および切り替えができるようになりました！

また、new Image()についても分かりやすく解説していただきありがとうございます。勉強になります。