WPFで２次元配列にセットした画像を表示したい

Question

環境

VisualStudio2017（WPF）

実現したいこと

やりたいのは上画像の6*5のすべての目に5種類のピースの画像をランダムに並べることです。
現状はSTARTボタンをクリックするとピースが並べられるようにしているつもりですが、ボタンを押しても何も表示されない状態です。

以下、ソースと現状の詳細を記載します。
インデクサのBindingに失敗していそうだと思っているのですが、どこが悪いでしょうか？

開発経験はなくC#を触り始めたばかりの初心者のため、かなりお見苦しいコードになっていると思いますが、ご回答のほどよろしくお願いします。

###現状のソース

<Window x:Class="Pazzle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PazDra"
        mc:Ignorable="d"
        Title="MainWindow" Height="700" Width="500">
    <Grid>
        <Button x:Name="btn_GemGenerate" Content="START" HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Top" Width="100" Height="50" FontSize="20" Click="button_Click_START"/>
        <Grid x:Name="BoardGrid" HorizontalAlignment="Center" Margin="0,0,0.0,0" VerticalAlignment="Bottom" ShowGridLines="True" Height="300" Width="350" Grid.ColumnSpan="4" Opacity="0.985">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
　　　　　　　　　<!--6列。長いので以下略-->
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
　　　　　　　　　<!--5行。長いので以下略-->
            </Grid.RowDefinitions>
            <!--インデクサPeace[x][y]をImageのSourceにBindingし、下のC#のソースでモデル上の盤面に配置した各要素を表示する。-->
            <Image x:Name="GridCell0_0" Source="{Binding Path=Peace[0][0]}" Margin="1"  Grid.Row="0" Grid.Column="1"/>
            <Image x:Name="GridCell1_0" Source="{Binding Path=Peace[1][0]}" Margin="1"  Grid.Row="0" Grid.Column="1"/>
            <Image x:Name="GridCell2_0" Source="{Binding Path=Peace[2][0]}" Margin="1"  Grid.Row="0" Grid.Column="2"/>
            <Image x:Name="GridCell3_0" Source="{Binding Path=Peace[3][0]}" Margin="1"  Grid.Row="0" Grid.Column="3"/>
            <!--盤上のすべての目に画像をBinding。配列の記法はPeace[,]のほうが正しいかも。現状はどちらの記法でも動かない-->
            <!--長いので以下略-->
        </Grid>
    </Grid>
</Window>

/// MainWindow.xaml の相互作用ロジック

namespace Pazzle
{
    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();

        //STARTボタンをクリックすると盤上にピースが配置される。
        private void button_Click_START(object sender, RoutedEventArgs e)
        {
            Board board = new Board();
            GridCell0_0.DataContext = board;
        }
    }
}

//２次元配列の添え字でアクセスして盤上のピースを配置、取得するインデクサ
namespace Pazzle
{
    class Peaces
    {
        public const int WIDTH = 6;
        public const int HEIGHT = 5;
        string[,] PeaceImg = new string[HEIGHT, WIDTH];
        public string this[int X, int Y]
        {
            set
            {
                this.PeaceImg[X,Y] =value;
            }
            get
            {
                return this.PeaceImg[X,Y];
            }
        }
    }
}

//盤面を表すモデル

namespace Pazzle
{
    class Board
    {
　　    //盤面は6*5
        public const int WIDTH = 6;
        public const int HEIGHT = 5;

        //ピースの画像ファイルへのパス
        public const string PEACE_A = @"C:\hoge\hoge";       
        public const string PEACE_B = @"C:\hoge\fuga";
        public const string PEACE_C = @"C:\fuga\hoge";
        public const string PEACE_D = @"C:\fuga\fuga";
        public const string PEACE_E = @"C:\piyo\piyo";

        //ピースは5種類
        public static readonly string[] PeaceType = new string[]
        {
            PEACE_A,PEACE_B,PEACE_C,PEACE_D,PEACE_E
        };

        int seed; //乱数生成用のシード値
        public Peaces peace = new Peaces();//盤上の目に配置するピースを表すインデクサ
        public Board()
        {
            for (int i = 0; i < HEIGHT; i++)
            {
                for (int j = 0; j < WIDTH; j++)
                {
                    seed = System.Environment.TickCount;
                    Random rnd = new System.Random(seed++);
                    peace[i, j] = PeaceType[rnd.Next(4)];
　　　　　　　　　　　　//盤上のすべての目にランダムに4種のピースを配置
                }
            }
        }
    }
}

###現状

######実現できていること

• STARTボタンを押下するとPeace[x][y]のすべての要素に画像のパスは入ります。

######実現できていないこと

• Peace[x][y]に入っているはずの画像がView上に表示できません。

　xamlでimage要素の代わりにTextBlockを使って、画像ではなくパスの文字列を表示することも試しましたが、文字列でも表示できませんでした。

• ループ内でシード値をインクリメントして変えながら乱数を生成しているのですが、すべて同じ種類のピースになってしまいます。

（デバッグモードでゆっくりとステップ実行すると違う種類になるのですが。。。）

Answer 1

public Peaces peace = new Peaces();
は、
public Peaces Peace { get; } = new Peaces();
ですね。
プロパティでないとバインドできないのと、xamlでは大文字になっています。

Source="{Binding Path=Peace[0][0]}"
は、
Source="{Binding Path=Peace[0\,0]}"
です。
コードでは四角い配列（[,]）になっています。
そのためPeace[0,0]となりますが、カンマがエラーになるので\でエスケープします。

NaK310さんの制作物で使えるかどうかはわかりませんが、ItemsControl・UniformGridでのxaml短縮化例も付けました。

めんどくさいので２＊２にしています^^;

<Window
  x:Class="Questions296474.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="500"
  Height="500">
  <StackPanel>
    <Button
      HorizontalAlignment="Center"
      Click="button_Click_START"
      Content="START"
      FontSize="20" />
    <Grid
      Width="120"
      Height="120"
      ShowGridLines="True">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Image Source="{Binding Path=Peace[0\,0]}" />
      <Image Grid.Column="1" Source="{Binding Path=Peace[1\,0]}" />
      <Image Grid.Row="1" Source="{Binding Path=Peace[0\,1]}" />
      <Image
        Grid.Row="1"
        Grid.Column="1"
        Source="{Binding Path=Peace[1\,1]}" />
    </Grid>

    <!--  ItemsControlでやった場合 XY反転しているので注意 -->
    <ItemsControl
      Width="120"
      Height="120"
      ItemsSource="{Binding Peace}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <UniformGrid Columns="2" Rows="2" />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Image Source="{Binding}" />
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </StackPanel>
</Window>

using System;
using System.Collections;
using System.Collections.Generic;
using System.Windows;

namespace Questions296474
{
    internal class Board
    {
        public const int WIDTH = 2;
        public const int HEIGHT = 2;
        public const string PEACE_A = @"https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg";
        public const string PEACE_B = @"https://teratail-v2.storage.googleapis.com/uploads/avatars/u14/143281/4935fb53e9921aff_thumbnail.jpg";

        public static readonly string[] PeaceType = new string[] { PEACE_A, PEACE_B };

        // プロパティでないとバインドできません
        public Peaces Peace { get; } = new Peaces();

        // 1回作ればいいです
        private static readonly Random rnd = new Random();

        public Board()
        {
            for(var i = 0; i < HEIGHT; i++)
            {
                for(var j = 0; j < WIDTH; j++)
                {
                    Peace[i, j] = PeaceType[rnd.Next(PeaceType.Length)];
                }
            }
        }
    }

    internal class Peaces : IEnumerable<string>
    {
        public const int WIDTH = 2;
        public const int HEIGHT = 2;
        private readonly string[,] PeaceImg = new string[HEIGHT, WIDTH];

        public string this[int X, int Y]
        {
            set => PeaceImg[X, Y] = value;
            get => PeaceImg[X, Y];
        }

        // ItemsControlで使えるようIEnumerable実装
        public IEnumerator<string> GetEnumerator()
        {
            foreach(var item in PeaceImg) yield return item;
        }
        IEnumerator IEnumerable.GetEnumerator() => GetEnumerator();
    }

    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();

        private void button_Click_START(object sender, RoutedEventArgs e) 
            => DataContext = new Board();
    }
}

Comments

[退会済みユーザー]

ありがとうございます。ここまで書いていただけるとはおもわず、感動しました。。。
ちょっと理解するのに時間がかかりそうなので、明日中に改めて確認します。
（プロパティでないとバインドできない、配列名にエスケープシーケンスが必要という点が大きなミスのようですね）

[退会済みユーザー]

表示できました、ありがとうございます！
Peaceをプロパティにするのと、xaml上の配列を[x\,y]の形式に書き換えるのが肝だったようですね。
xamlは今のままではさすがに気持ち悪いので、教えていただいたItemsControlとUniformGridについて勉強したうえで改善しようと思います。
本当にありがとうございました。

Answer 2

こんにちは。
いくつか書き方に問題があったので、順に説明していきます。

##DataContextがImage毎に設定されている
DataContextはWindowやGridなど入れ子における上位のコントロールにも設定出来ます。
上位のコントロールにDataContextを設定することで、各Imageコントロールに「〜_0_0」などとNameプロパティを設定していく必要が無くなります。
小規模なアプリではWindowにのみDataContextを設定することが多い気がするので、WindowにDataContextを設定してはいかがでしょうか。

##DataContextがINotifyPropertyChangedを実装していない
DataContextに設定するクラスは、その中のプロパティが変更されたことをWindowなどに通知する為、INotifyPropertyChangedインターフェイスを実装している必要があります。
実装方法はご自身で調べてみて下さい。
あるいは、PrismやMvvmLightなどのINotifyPropertyChanged実装を補助する外部フレームワークを利用するのも手です。

##(追記)参考：MVVMに沿った設計
WPFアプリはMVVMという設計思想に沿って設計するのが一般的となっています。
MVVMはModel-View-ViewModelの略で、

• ウィンドウやユーザーコントロールなど、画面への表示に直接関与するクラスをView
• ViewにBindingするプロパティを持つクラスをViewModel
• ロジックなどを持つクラスをModel

というように、クラスのメンバの役割によってクラスを分離し、コードを読みやすくすることが出来ます。

今回の質問のコードに照らし合わせると、ViewになるのはMainWindowクラスです。
また、ViewModelに相当するクラスを新たに作り、その中にPeaceプロパティとボタンクリック時のメソッドを含ませるのが良いと思います。

私がPrismerなのでPrismを利用して書きますが、ViewModelクラスは以下のような感じになります。
実行環境が手元に無いので、もしかしたら動かないかもしれません。動かなかった場合はごめんなさい。

//using Prism.Mvvm;
//using Prism.Commands;

// BindableBaseがINotifyPropertyChangedを実装してくれています。
// MainWindowなどのDataContextにこのクラスのインスタンスを指定して下さい。
public class MainWindowViewModel : BindableBase
{
    public Peaces Peace
    {
        get => board.peace;
        set => SetProperty(ref board.peace, value);
    }
    
    // MVVMでは、ボタンクリック時のメソッドなどもVMに書きます。
    // Xaml内のButtonの「Clicked="〜"」を「Command="{Binding ButtonClicked}"」に書きかえておいて下さい。
    public DelegateCommand ButtonClicked { get; set; }
    
    Board board = null;
    
    public MainWindowViewModel()
    {
        ButtonClicked = new DelegateCommand(() => board = new Board());
    }
}

##その他気になったこと

• Bindingの書き方がジャグ配列の形式（配列名[x][y]）になっていますが、Peace[x,y]でないと正しく取得出来ません。
• PeaceではなくPieceではないでしょうか？

Comments

[退会済みユーザー]

早速のご回答ありがとうございます。
とりあえずやり方を調べてみてINotifyPropertyChangedインターフェイスを実装して試します。

＞Bindingの書き方がジャグ配列の形式（配列名[x][y]）になっているのは大丈夫ですか？
これは、「配列名[,]」の形式でなくて大丈夫か、ということでしょうか。
どちらの書き方が正しいのかわからなかったので、両方やってみていたのですが、現状ではどちらにせよ動かないので判断を保留している感じです。
追記しておきます。

[Automatic9045]

> これは、「配列名[,]」の形式でなくて大丈夫か、ということでしょうか。
そういうことです。言葉足らずですみません…
これについてはTN8001さんが詳しく回答して下さっています。

折角なので、WPFでよく採用されるMVVMという設計思想について追記しておきました。
よければ参考にして下さい。

[退会済みユーザー]

ありがとうございます。
配列名については、まさかエスケープシーケンスが必要だったとは、盲点でした。

MVVMについての追記もありがとうございます！
Viewはxamlかと思っていたのですが、勘違いしていたようですね。勉強してみます。

[Automatic9045]

> Viewはxamlかと思っていたのですが
確かにxamlはViewの一部ではありますが、正確には

- ViewはMainWindowクラス
- xamlコードはInitializeComponentメソッド内でC#コードにパースされている→xamlコードはMainWindowクラスの一部

ということになります。
この辺りの説明はネット上には本当に少ないんですよね。私も過去相当苦戦した経験があります。

/*
エスケープシーケンスについて教えて下さったのはTN8001さんです。2次元配列をBindingしたことが無かったので、私も勉強させて頂きました。
*/

[退会済みユーザー]

xamlコードはMainWindowクラス（＝View）の一部として扱われることでViewとして機能しているということですね。
自分で調べてもわからなかったことだと思います。
MVVMにしたがってクラス設計を見直してみますね。
本当にありがとうございました。

[Automatic9045]

ひとまず解決したようで良かったです。

ただ、1つとても気になっていることがあります……peaceではなくpieceではありませんか…？

[退会済みユーザー]

誤字ですね。お恥ずかしい。。
ただ、teratailに質問する用に書き直したコードなので、本来の制作物には誤字はありません。
ご指摘ありがとうございます。