[WPF]BindingのPath内に変化する値を入れる方法

Question

###実現したいこと
WPFで2*2のGrid内に画像を表示します。
画像のURLをコードビハインドで２次元配列(っぽい)インデクサのIndexer[x,y]で定義しており、それを下のxamlコードでBindingして表示しようとしています。

各セルに配置しているThumb要素はControlTemplateとStyleを使ってImageとして表示しています。
このTemplateの中のImage要素にIndexer[x,y]からとってきたURLをBindingしようとしているのですが、このx,yにThumbコントロールそれぞれに設定しているRow・Columnの値を設定したいです。

Indexer[x,y]には2*2＝4種類の画像のURLを保持していると考えてください。
上記のように設定できれば、Gridのセルそれぞれに1種類ずつ、計4種類の画像が表示されることになります。

BindingのPath内に、Row・Columnのような適用先によって変化する値を設定することは可能でしょうか？

<Window x:Class="ThumbTest.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:ThumbTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="BoardGrid" HorizontalAlignment="Center" Margin="0,0,0.0,0" VerticalAlignment="Bottom" ShowGridLines="True" Height="300" Width="360" Grid.ColumnSpan="4" Opacity="0.985">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <ControlTemplate x:Key="ThumbTmplate" TargetType="Thumb">
                <Image Source= "{Binding Path=Indexer[x\,y]}" />
                <!--↑このx,yに下のThumbコントロールそれぞれに設定しているRow・Columnの値を設定したい-->
            </ControlTemplate>
            <Style TargetType="{x:Type Thumb}">
                <Setter Property="Template" Value="{StaticResource ThumbTmplate}"/>
            </Style>
        </Grid.Resources>
        <Thumb Name="GridCell0_0" Grid.Row="0" Grid.Column="0"
               DragCompleted="mark_DragCompleted"
               DragStarted="mark_DragStarted"
               DragDelta="mark_DragDelta"
               >
        </Thumb>
        <Thumb Name="GridCell0_1" Grid.Row="0" Grid.Column="1"
               DragCompleted="mark_DragCompleted"
               DragStarted="mark_DragStarted"
               DragDelta="mark_DragDelta"
               >
        </Thumb>
        <Thumb Name="GridCell1_0" Grid.Row="1" Grid.Column="0"
               DragCompleted="mark_DragCompleted"
               DragStarted="mark_DragStarted"
               DragDelta="mark_DragDelta"
               >
        </Thumb>
        <Thumb Name="GridCell1_1" Grid.Row="1" Grid.Column="1"
               DragCompleted="mark_DragCompleted"
               DragStarted="mark_DragStarted"
               DragDelta="mark_DragDelta"
               >
        </Thumb>
    </Grid>
</Window>

Answer 1

単純にやるとするとコンバータでしょうかねぇ？
Image.Sourceに文字列をバインドした場合ImageSourceに自動変換されますが、自前のコンバータを入れるとそこもやることになります。

めちゃくちゃ雑ですが、こんな雰囲気です。

<Window
  x:Class="Questions296905.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions296905"
  Width="800"
  Height="450">
  <Grid
    Width="360"
    Height="300"
    ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.Resources>
      <local:IndexerConverter x:Key="IndexerConverter" />
      <ControlTemplate x:Key="ThumbTmplate" TargetType="Thumb">
        <Image>
          <Image.Source>
            <MultiBinding Converter="{StaticResource IndexerConverter}">
              <Binding Path="Indexer" />
              <Binding Path="(Grid.Column)" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="(Grid.Row)" RelativeSource="{RelativeSource TemplatedParent}" />
            </MultiBinding>
          </Image.Source>
        </Image>
      </ControlTemplate>
      <Style TargetType="{x:Type Thumb}">
        <Setter Property="Template" Value="{StaticResource ThumbTmplate}" />
        <EventSetter Event="DragCompleted" Handler="mark_DragCompleted" />
        <EventSetter Event="DragDelta" Handler="mark_DragDelta" />
        <EventSetter Event="DragStarted" Handler="mark_DragStarted" />
      </Style>
    </Grid.Resources>
    <Thumb />
    <Thumb Grid.Column="1" />
    <Thumb Grid.Row="1" />
    <Thumb Grid.Row="1" Grid.Column="1" />
  </Grid>
</Window>

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace Questions296905
{
    public class Indexer
    {
        private const string A = @"https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg";
        private const string B = @"https://teratail-v2.storage.googleapis.com/uploads/avatars/u14/143281/4935fb53e9921aff_thumbnail.jpg";
        private readonly string[,] inner = new string[,] { { A, B, }, { B, A, } };

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

    public class IndexerConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            var indexer = values[0] as Indexer;
            return new BitmapImage(new Uri(indexer[(int)values[1], (int)values[2]]));
        }
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
    }

    public partial class MainWindow : Window
    {
        public Indexer Indexer { get; } = new Indexer();

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        private void mark_DragCompleted(object sender, DragCompletedEventArgs e) { }
        private void mark_DragDelta(object sender, DragDeltaEventArgs e) { }
        private void mark_DragStarted(object sender, DragStartedEventArgs e) { }
    }
}

---

画像がマス目に配置されて入れ替えたりをされていると思うのですが、

• マス目は同じサイズ
• 空いたマスがない
• 画像は重ならない

ならばUniformGridが向いています。

そうでない場合Gridになるかと思いますが、ピース側にXYを持たせてバインドのほうが筋がいいかもしれません。

アニメーション等動きがある場合、Canvasベースのほうが作りやすいかもしれません。

Comments

[退会済みユーザー]

ありがとうございます。
月曜まで環境が手元にないので確認は出来ないですが、コンバーターを使えばいけそうですね。わかりやすいコードを付けていただいて助かります。

>ピース側にXYを持たせてバインドのほうが筋がいいかもしれません。
これはGridのRowとColumnを取ってきてインデクサに渡すのではなく、インデクサ（Indexer[x][y]）側で設定しているx,yをそれぞれGridのRowとColumnに渡す方がいいということですよね。
確かにそう思い始めました。
あと、ちょうど動かすときにアニメーションをつけたいと思っていたので、GridではなくCanvasを使う方法もあるかもしれませんね。時間との兼ね合いもありますが、ちょっと検討してみます。
（恥ずかしながらまだ勉強し始めで、Canvasというものを知ったのも今日が初めてだったもので、Grid以外の方法を考えてもいませんでした。。）

質問文に書いていない要件まで満たせそうで、本当に感謝です。
ありがとうございます。

Answer 2

質問の意図とは異なるかもしれませんが
こうして

            <ControlTemplate x:Key="ThumbTmplate" TargetType="Thumb">
                <Image Source= "{Binding}" />
            </ControlTemplate>

こう

        <Thumb DataContext="{Binding Path=Indexer[0\,0]}"
               Name="GridCell0_0" Grid.Row="0" Grid.Column="0"
               DragCompleted="mark_DragCompleted"
               DragStarted="mark_DragStarted"
               DragDelta="mark_DragDelta"
               >
        </Thumb>

ではだめですか？