回答編集履歴

2

見直しキャンペーン中

2023/08/12 14:41

投稿

TN8001
TN8001

スコア9862

test CHANGED
@@ -99,8 +99,9 @@
99
99
  ---
100
100
 
101
101
  画像がマス目に配置されて入れ替えたりをされていると思うのですが、
102
-
102
+ * マス目は同じサイズ
103
- マス目は同じサイズ。空いたマスがない。画像は重ならない。
103
+ * 空いたマスがない
104
+ * 画像は重ならない
104
105
  ならば`UniformGrid`が向いています。
105
106
 
106
107
  そうでない場合`Grid`になるかと思いますが、ピース側にXYを持たせてバインドのほうが筋がいいかもしれません。

1

見直しキャンペーン中

2023/07/23 07:49

投稿

TN8001
TN8001

スコア9862

test CHANGED
@@ -1,215 +1,108 @@
1
1
  単純にやるとするとコンバータでしょうかねぇ?
2
-
3
2
  `Image.Source`に文字列をバインドした場合`ImageSource`に自動変換されますが、自前のコンバータを入れるとそこもやることになります。
4
3
 
5
-
6
-
7
4
  めちゃくちゃ雑ですが、こんな雰囲気です。
8
-
9
- ```xaml
5
+ ```xml
10
-
11
6
  <Window
12
-
13
7
  x:Class="Questions296905.MainWindow"
14
-
15
8
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
16
-
17
9
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
18
-
19
10
  xmlns:local="clr-namespace:Questions296905"
20
-
21
11
  Width="800"
22
-
23
12
  Height="450">
24
-
25
13
  <Grid
26
-
27
14
  Width="360"
28
-
29
15
  Height="300"
30
-
31
16
  ShowGridLines="True">
32
-
33
17
  <Grid.ColumnDefinitions>
34
-
35
18
  <ColumnDefinition />
36
-
37
19
  <ColumnDefinition />
38
-
39
20
  </Grid.ColumnDefinitions>
40
-
41
21
  <Grid.RowDefinitions>
42
-
43
22
  <RowDefinition />
44
-
45
23
  <RowDefinition />
46
-
47
24
  </Grid.RowDefinitions>
48
-
49
25
  <Grid.Resources>
50
-
51
26
  <local:IndexerConverter x:Key="IndexerConverter" />
52
-
53
27
  <ControlTemplate x:Key="ThumbTmplate" TargetType="Thumb">
54
-
55
28
  <Image>
56
-
57
29
  <Image.Source>
58
-
59
30
  <MultiBinding Converter="{StaticResource IndexerConverter}">
60
-
61
31
  <Binding Path="Indexer" />
62
-
63
32
  <Binding Path="(Grid.Column)" RelativeSource="{RelativeSource TemplatedParent}" />
64
-
65
33
  <Binding Path="(Grid.Row)" RelativeSource="{RelativeSource TemplatedParent}" />
66
-
67
34
  </MultiBinding>
68
-
69
35
  </Image.Source>
70
-
71
36
  </Image>
72
-
73
37
  </ControlTemplate>
74
-
75
38
  <Style TargetType="{x:Type Thumb}">
76
-
77
39
  <Setter Property="Template" Value="{StaticResource ThumbTmplate}" />
78
-
79
40
  <EventSetter Event="DragCompleted" Handler="mark_DragCompleted" />
80
-
81
41
  <EventSetter Event="DragDelta" Handler="mark_DragDelta" />
82
-
83
42
  <EventSetter Event="DragStarted" Handler="mark_DragStarted" />
84
-
85
43
  </Style>
86
-
87
44
  </Grid.Resources>
88
-
89
45
  <Thumb />
90
-
91
46
  <Thumb Grid.Column="1" />
92
-
93
47
  <Thumb Grid.Row="1" />
94
-
95
48
  <Thumb Grid.Row="1" Grid.Column="1" />
96
-
97
49
  </Grid>
98
-
99
50
  </Window>
100
-
101
51
  ```
102
52
 
103
-
104
-
105
- ```C#
53
+ ```cs
106
-
107
54
  using System;
108
-
109
55
  using System.Globalization;
110
-
111
56
  using System.Windows;
112
-
113
57
  using System.Windows.Controls.Primitives;
114
-
115
58
  using System.Windows.Data;
116
-
117
59
  using System.Windows.Media.Imaging;
118
60
 
119
-
120
-
121
61
  namespace Questions296905
122
-
123
62
  {
124
-
125
63
  public class Indexer
126
-
127
64
  {
128
-
129
65
  private const string A = @"https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg";
130
-
131
66
  private const string B = @"https://teratail-v2.storage.googleapis.com/uploads/avatars/u14/143281/4935fb53e9921aff_thumbnail.jpg";
132
-
133
67
  private readonly string[,] inner = new string[,] { { A, B, }, { B, A, } };
134
68
 
135
-
136
-
137
69
  public string this[int X, int Y] { set => inner[X, Y] = value; get => inner[X, Y]; }
138
-
139
70
  }
140
71
 
72
+ public class IndexerConverter : IMultiValueConverter
73
+ {
74
+ public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
75
+ {
76
+ var indexer = values[0] as Indexer;
77
+ return new BitmapImage(new Uri(indexer[(int)values[1], (int)values[2]]));
78
+ }
79
+ public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
80
+ }
141
81
 
82
+ public partial class MainWindow : Window
83
+ {
84
+ public Indexer Indexer { get; } = new Indexer();
142
85
 
143
- public class IndexerConverter : IMultiValueConverter
86
+ public MainWindow()
144
-
145
- {
146
-
147
- public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
148
-
149
87
  {
150
-
88
+ InitializeComponent();
151
- var indexer = values[0] as Indexer;
89
+ DataContext = this;
152
-
153
- return new BitmapImage(new Uri(indexer[(int)values[1], (int)values[2]]));
154
-
155
90
  }
156
91
 
157
- public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
92
+ private void mark_DragCompleted(object sender, DragCompletedEventArgs e) { }
158
-
93
+ private void mark_DragDelta(object sender, DragDeltaEventArgs e) { }
94
+ private void mark_DragStarted(object sender, DragStartedEventArgs e) { }
159
95
  }
160
-
161
-
162
-
163
- public partial class MainWindow : Window
164
-
165
- {
166
-
167
- public Indexer Indexer { get; } = new Indexer();
168
-
169
-
170
-
171
- public MainWindow()
172
-
173
- {
174
-
175
- InitializeComponent();
176
-
177
- DataContext = this;
178
-
179
- }
180
-
181
-
182
-
183
- private void mark_DragCompleted(object sender, DragCompletedEventArgs e) { }
184
-
185
- private void mark_DragDelta(object sender, DragDeltaEventArgs e) { }
186
-
187
- private void mark_DragStarted(object sender, DragStartedEventArgs e) { }
188
-
189
- }
190
-
191
96
  }
192
-
193
97
  ```
194
-
195
-
196
98
 
197
99
  ---
198
100
 
199
-
200
-
201
101
  画像がマス目に配置されて入れ替えたりをされていると思うのですが、
202
102
 
203
-
204
-
205
103
  マス目は同じサイズ。空いたマスがない。画像は重ならない。
206
-
207
104
  ならば`UniformGrid`が向いています。
208
-
209
-
210
105
 
211
106
  そうでない場合`Grid`になるかと思いますが、ピース側にXYを持たせてバインドのほうが筋がいいかもしれません。
212
107
 
213
-
214
-
215
108
  アニメーション等動きがある場合、`Canvas`ベースのほうが作りやすいかもしれません。