質問編集履歴

4

2017/11/09 02:20

投稿

jonrock
jonrock

スコア18

test CHANGED
File without changes
test CHANGED
@@ -1,18 +1,14 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- WPF、xamlで部屋と壁表現し、部屋を結合する様なイメージをビジュアル化した画面を作ってますが、実装方法詰まっています。
3
+ WPF、xamlで部屋をイメージした画面を作りたいです。
4
4
 
5
5
 
6
6
 
7
- 部屋はxaml上でGridで分割して表現し、部屋がクリックされたら色を付け、
7
+ 部屋はxaml上でGridで分割して表現
8
-
9
- クリックされた部屋の上下左右にクリック後の色の部屋があれば、間の壁を表示する。
10
8
 
11
9
 
12
10
 
13
- 角は丸みを帯びている必要があるので、Borderオブジェクトで丸みをつけ、
11
+ 角は丸みを帯び、Borderオブジェクトで丸みをつけ、Gridに追加。
14
-
15
- Gridに追加しているような状態。
16
12
 
17
13
 
18
14
 

3

2017/11/09 02:20

投稿

jonrock
jonrock

スコア18

test CHANGED
@@ -1 +1 @@
1
- WPF、xamlで部屋と壁表現し、部屋を結合する様なイメージをビジュアル化した画面を作りたい
1
+ WPF、xamlで部屋をイメージした画面を作りたい
test CHANGED
File without changes

2

2017/11/09 02:17

投稿

jonrock
jonrock

スコア18

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- WPF、xamlで部屋と壁を表現し、部屋を結合する様なイメージをビジュアル化した画面を作っていますが、
3
+ WPF、xamlで部屋と壁を表現し、部屋を結合する様なイメージをビジュアル化した画面を作っていますが、実装方法で詰まっています。
4
-
5
- 実装方法で詰まっています。
6
-
7
-
8
-
9
- イメージとしては下図のような感じの画面を実現したいです。
10
4
 
11
5
 
12
6
 
@@ -22,512 +16,4 @@
22
16
 
23
17
 
24
18
 
25
-
26
-
27
- ###該当のソースコード
28
-
29
- MainWindow.xaml
30
-
31
- ```ここに言語を入力
32
-
33
- <Window
34
-
35
- ...
36
-
37
- <Grid Background="Lavender">
38
-
39
- <Grid Name="roomLayoutGrid" Grid.Row="0" Grid.Column="0" Width="auto" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="40,40,0,0">
40
-
41
- <Grid.RowDefinitions>
42
-
43
- <RowDefinition Height="30" />
44
-
45
- <RowDefinition Height="10" />
46
-
47
- <RowDefinition Height="30" />
48
-
49
- <RowDefinition Height="10" />
50
-
51
- <RowDefinition Height="30" />
52
-
53
- <RowDefinition Height="10" />
54
-
55
- <RowDefinition Height="30" />
56
-
57
- <RowDefinition Height="10" />
58
-
59
- <RowDefinition Height="30" />
60
-
61
- <RowDefinition Height="10" />
62
-
63
- <RowDefinition Height="30" />
64
-
65
- </Grid.RowDefinitions>
66
-
67
- <Grid.ColumnDefinitions>
68
-
69
- <ColumnDefinition Width="30" />
70
-
71
- <ColumnDefinition Width="10" />
72
-
73
- <ColumnDefinition Width="30" />
74
-
75
- <ColumnDefinition Width="10" />
76
-
77
- <ColumnDefinition Width="30" />
78
-
79
- <ColumnDefinition Width="10" />
80
-
81
- <ColumnDefinition Width="30" />
82
-
83
- <ColumnDefinition Width="10" />
84
-
85
- <ColumnDefinition Width="30" />
86
-
87
- <ColumnDefinition Width="10" />
88
-
89
- <ColumnDefinition Width="30" />
90
-
91
- </Grid.ColumnDefinitions>
92
-
93
- </Grid>
94
-
95
- </Grid>
96
-
97
- </Window>
98
-
99
- ```
100
-
101
-
102
-
103
-
104
-
105
- MainWindow.xaml.cs
106
-
107
- ```ここに言語を入力
108
-
109
-
110
-
111
- namespace RoomCombineApp
112
-
113
- {
114
-
115
- /// <summary>
116
-
117
- /// MainWindow.xaml の相互作用ロジック
118
-
119
- /// </summary>
120
-
121
- public partial class MainWindow : Window
122
-
123
- {
124
-
125
- private int countOfRooms;
126
-
127
- private int countOfMaxIndex;
128
-
129
- private int countOfRoomMargin;
130
-
131
- private int countOfWallMargin;
132
-
133
-
134
-
135
- private const string OBJ_NAME = "label";
136
-
137
- private const string DIRECTION_LEFT = "left";
138
-
139
- private const string DIRECTION_RIGHT = "right";
140
-
141
- private const string DIRECTION_UP = "up";
142
-
143
- private const string DIRECTION_DOWN = "down";
144
-
145
-
146
-
147
- public MainWindow()
148
-
149
- {
150
-
151
- InitializeComponent();
152
-
153
-
154
-
155
- countOfRooms = 6;
156
-
157
- setMarginAndMaxIndex();
158
-
159
- InitRoomLayoutGrid();
160
-
161
- }
162
-
163
-
164
-
165
- private void setMarginAndMaxIndex()
166
-
167
- {
168
-
169
- int margin = 0;
170
-
171
- int max = 0;
172
-
173
-
174
-
175
- margin += countOfRooms;
176
-
177
- margin += countOfRooms - 1;
178
-
179
- margin += countOfRooms + (countOfRooms - 1);
180
-
181
-
182
-
183
- countOfRoomMargin = margin;
184
-
185
-
186
-
187
- countOfWallMargin = margin / 2;
188
-
189
-
190
-
191
- max += countOfRooms + (countOfRooms - 2);
192
-
193
- max += margin * (countOfRooms - 1);
194
-
195
-
196
-
197
- countOfMaxIndex = max;
198
-
199
- }
200
-
201
-
202
-
203
- private void InitRoomLayoutGrid()
204
-
205
- {
206
-
207
- for (int h = 0; h < (countOfRooms * 2) - 1; h++)
208
-
209
- {
210
-
211
- for (int i = 0; i < (countOfRooms * 2) - 1; i++)
212
-
213
- {
214
-
215
- Border border = new Border
216
-
217
- {
218
-
219
- BorderBrush = Brushes.Black,
220
-
221
- Background = Brushes.White,
222
-
223
- BorderThickness = new Thickness(1),
224
-
225
- CornerRadius = new CornerRadius(3),
226
-
227
- Name = OBJ_NAME + (i + h * ((countOfRooms * 2) - 1)),
228
-
229
- };
230
-
231
-
232
-
233
- border.SetValue(Grid.RowProperty, h);
234
-
235
- border.SetValue(Grid.ColumnProperty, i);
236
-
237
-
238
-
239
- if ((h % 2 != 0) || (i % 2 != 0))
240
-
241
- {
242
-
243
- border.SetValue(VisibilityProperty, Visibility.Hidden);
244
-
245
- }
246
-
247
- else
248
-
249
- {
250
-
251
- border.MouseDown -= roomLayoutGrid_MouseDown;
252
-
253
- border.MouseDown += roomLayoutGrid_MouseDown;
254
-
255
- }
256
-
257
-
258
-
259
- roomLayoutGrid.Children.Add(border);
260
-
261
-
262
-
263
- }
264
-
265
- }
266
-
267
- }
268
-
269
-
270
-
271
- private void roomLayoutGrid_MouseDown(object sender, MouseButtonEventArgs e)
272
-
273
- {
274
-
275
- if (e.StylusDevice != null)
276
-
277
- return;
278
-
279
-
280
-
281
- var clickObj = (Border)sender;
282
-
283
-
284
-
285
- if (clickObj.Background == Brushes.White)
286
-
287
- {
288
-
289
- clickObj.Background = Brushes.DarkGray;
290
-
291
- clickObj.BorderBrush = Brushes.Black;
292
-
293
- clickObj.BorderThickness = new Thickness(1);
294
-
295
- setWallVisualization(roomLayoutGrid, clickObj);
296
-
297
- }
298
-
299
- }
300
-
301
-
302
-
303
- private void setWallVisualization(Grid baseGrid, object clickObj)
304
-
305
- {
306
-
307
- int clickindex = getCurrentRoomIndex(clickObj);
308
-
309
-
310
-
311
- //Check Left
312
-
313
- if (clickindex != 0 && clickindex % countOfRoomMargin != 0)
314
-
315
- {
316
-
317
- int leftRoomIndex = clickindex - 2;
318
-
319
- var leftRoom = (Border)baseGrid.Children[leftRoomIndex];
320
-
321
-
322
-
323
- if (leftRoom.Background == Brushes.DarkGray)
324
-
325
- {
326
-
327
- int leftWallIndex = clickindex - 1;
328
-
329
- var leftWall = (Border)baseGrid.Children[leftWallIndex];
330
-
331
- leftWall.Visibility = Visibility.Visible;
332
-
333
- //leftWall.MouseDown -= wallHorizontal_MouseDown;
334
-
335
- leftWall.MouseDown += wallHorizontal_MouseDown;
336
-
337
- }
338
-
339
- }
340
-
341
-
342
-
343
- //Check Right
344
-
345
- if (!IsRightEdgesRoom(clickindex))
346
-
347
- {
348
-
349
- int rightRoomIndex = clickindex + 2;
350
-
351
- var rightRoom = (Border)baseGrid.Children[rightRoomIndex];
352
-
353
-
354
-
355
- if (rightRoom.Background == Brushes.DarkGray)
356
-
357
- {
358
-
359
- int rightWallIndex = clickindex + 1;
360
-
361
- var rightWall = (Border)baseGrid.Children[rightWallIndex];
362
-
363
- rightWall.Visibility = Visibility.Visible;
364
-
365
- rightWall.MouseDown += wallHorizontal_MouseDown;
366
-
367
- }
368
-
369
- }
370
-
371
-
372
-
373
- //Check Up
374
-
375
- if (clickindex > countOfWallMargin - 1)
376
-
377
- {
378
-
379
- int upRoomIndex = clickindex - countOfRoomMargin;
380
-
381
- var upRoom = (Border)baseGrid.Children[upRoomIndex];
382
-
383
-
384
-
385
- if (upRoom.Background == Brushes.DarkGray)
386
-
387
- {
388
-
389
- int upWallIndex = clickindex - countOfWallMargin;
390
-
391
- var upWall = (Border)baseGrid.Children[upWallIndex];
392
-
393
- upWall.Visibility = Visibility.Visible;
394
-
395
- upWall.MouseDown += wallVertical_MouseDown;
396
-
397
- }
398
-
399
- }
400
-
401
-
402
-
403
- //Check Down
404
-
405
- if (clickindex < countOfRoomMargin * (countOfRooms - 1))
406
-
407
- {
408
-
409
- int downRoomIndex = clickindex + countOfRoomMargin;
410
-
411
- var downRoom = (Border)baseGrid.Children[downRoomIndex];
412
-
413
-
414
-
415
- if (downRoom.Background == Brushes.DarkGray)
416
-
417
- {
418
-
419
- int downWallIndex = clickindex + countOfWallMargin;
420
-
421
- var downWall = (Border)baseGrid.Children[downWallIndex];
422
-
423
- downWall.Visibility = Visibility.Visible;
424
-
425
- downWall.MouseDown += wallVertical_MouseDown;
426
-
427
- }
428
-
429
- }
430
-
431
- }
432
-
433
-
434
-
435
- private void wallHorizontal_MouseDown(object sender, MouseButtonEventArgs e)
436
-
437
- {
438
-
439
- if (e.StylusDevice != null)
440
-
441
- return;
442
-
443
-
444
-
445
- var clickObj = (Border)sender;
446
-
447
- clickObj.CornerRadius = new CornerRadius(3);
448
-
449
- clickObj.Background = Brushes.DarkGray;
450
-
451
-
452
-
453
- }
454
-
455
-
456
-
457
- private void wallVertical_MouseDown(object sender, MouseButtonEventArgs e)
458
-
459
- {
460
-
461
- if (e.StylusDevice != null)
462
-
463
- return;
464
-
465
-
466
-
467
- var clickObj = (Border)sender;
468
-
469
- clickObj.CornerRadius = new CornerRadius(3);
470
-
471
- clickObj.Background = Brushes.DarkGray;
472
-
473
-
474
-
475
- }
476
-
477
-
478
-
479
- private bool IsRightEdgesRoom(int clickindex)
480
-
481
- {
482
-
483
- for (int i = 0; i < countOfRooms; i++)
484
-
485
- {
486
-
487
- if (clickindex == (countOfWallMargin - 1) + (countOfRoomMargin * i))
488
-
489
- return true;
490
-
491
- }
492
-
493
-
494
-
495
- return false;
496
-
497
- }
498
-
499
-
500
-
501
- private int getCurrentRoomIndex(object clickObj)
502
-
503
- {
504
-
505
- var obj = (Border)clickObj;
506
-
507
- int clickindex = int.Parse(obj.Name.Replace(OBJ_NAME, ""));
508
-
509
-
510
-
511
- return clickindex;
512
-
513
- }
514
-
515
- }
516
-
517
- }
518
-
519
-
520
-
521
- ```
522
-
523
-
524
-
525
-
526
-
527
-
528
-
529
- 上記の様な画面を作るため、
530
-
531
- 何か良い実装方法があればご教授いただければと思います。
532
-
533
19
  初心者で初めての質問となりますが、よろしくお願いします。

1

2017/11/09 02:14

投稿

jonrock
jonrock

スコア18

test CHANGED
File without changes
test CHANGED
@@ -10,72 +10,6 @@
10
10
 
11
11
 
12
12
 
13
- 部屋を配置する
14
-
15
- (作成中画像)
16
-
17
- ![イメージ説明](6b99e72221259d66fe8d7ddaf3453061.jpeg)
18
-
19
-
20
-
21
- 部屋をクリックすると色が変わる
22
-
23
- (作成中画像)
24
-
25
- (本当はクリックした順に部屋に番号を振っていきたい)
26
-
27
- ![イメージ説明](91f3016d4bb3e59ee3babc3e07ada402.jpeg)
28
-
29
-
30
-
31
- 隣り合った部屋をクリックしたら、間の壁を表示する
32
-
33
- (作成中画像)
34
-
35
- ![イメージ説明](0965db27fcef79c7b2e4c32db9e7cec4.jpeg)
36
-
37
-
38
-
39
- 上や下にもクリックした部屋があれば、間の壁を表示する
40
-
41
- (作成中画像)
42
-
43
- ![イメージ説明](18d262368e28bb857d7a54d6ff8ce2cd.jpeg)
44
-
45
-
46
-
47
- 6つ部屋をクリックするとこんな感じにする予定
48
-
49
- (理想イメージ画像)
50
-
51
- ![イメージ説明](a06a7eb61e0e24d5fc70155cfc0fa2c5.jpeg)
52
-
53
-
54
-
55
- 壁をクリックすると、部屋が結合し、低い番号を振る
56
-
57
- (理想イメージ画像)
58
-
59
- ![イメージ説明](7f23810489d0e9012f55e981b6e48d54.jpeg)
60
-
61
-
62
-
63
- 上への結合も可能
64
-
65
- (理想イメージ画像)
66
-
67
- ![![イメージ説明](c94de0abcd7e29866ef5b7b1381a7326.jpeg)
68
-
69
-
70
-
71
-
72
-
73
- 途中までですが、以下の様な感じで壁を表示するところまでは
74
-
75
- 作ってみました。
76
-
77
-
78
-
79
13
  部屋はxaml上でGridで分割して表現し、部屋がクリックされたら色を付け、
80
14
 
81
15
  クリックされた部屋の上下左右にクリック後の色の部屋があれば、間の壁を表示する。