回答編集履歴
4
見直しキャンペーン中
test
CHANGED
@@ -1,433 +1,217 @@
|
|
1
1
|
> ボタンクリックで動的に作成したタブの中に、別に作成した子画面の内容を表示させたい。
|
2
2
|
|
3
|
-
|
4
|
-
|
5
3
|
方法はいろいろあります。私ならこうするかな?という案です。
|
6
|
-
|
7
4
|
それぞれ独立性の高い子画面なら、`DataTemplate`でビューを切り替えるのがいいと思います。
|
8
5
|
|
9
6
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
7
|
> TabControlの表示/非表示を切り替えたい
|
14
8
|
|
15
|
-
|
16
|
-
|
17
9
|
まあどちらでもいいんですが、`Image`の`Visibility`を`bool`で切り替えてみました。
|
18
10
|
|
19
11
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
```x
|
12
|
+
```xml
|
24
|
-
|
25
13
|
<Window
|
26
|
-
|
27
14
|
x:Class="Questions309980.MainWindow"
|
28
|
-
|
29
15
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
30
|
-
|
31
16
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
32
|
-
|
33
17
|
xmlns:local="clr-namespace:Questions309980"
|
34
|
-
|
35
18
|
Title="MainWindow"
|
36
|
-
|
37
19
|
Width="800"
|
38
|
-
|
39
20
|
Height="450">
|
40
|
-
|
41
21
|
<Window.DataContext>
|
42
|
-
|
43
22
|
<local:MainViewModel />
|
44
|
-
|
45
23
|
</Window.DataContext>
|
46
|
-
|
47
24
|
<Window.Resources>
|
48
|
-
|
49
25
|
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
|
50
|
-
|
51
26
|
<Style TargetType="{x:Type Button}">
|
52
|
-
|
53
27
|
<Setter Property="Margin" Value="5" />
|
54
|
-
|
55
28
|
<Setter Property="MinWidth" Value="80" />
|
56
|
-
|
57
29
|
</Style>
|
58
30
|
|
59
|
-
|
60
|
-
|
61
31
|
<!-- DataTemplateでタブのコンテントを切り替える -->
|
62
|
-
|
63
32
|
<!-- UserControlを作ってもいいし -->
|
64
|
-
|
65
33
|
<DataTemplate DataType="{x:Type local:ToDoViewModel}">
|
66
|
-
|
67
34
|
<local:ToDoView />
|
68
|
-
|
69
35
|
</DataTemplate>
|
70
36
|
|
71
|
-
|
72
|
-
|
73
37
|
<!-- 簡単な内容ならこの場で作ってもいい -->
|
74
|
-
|
75
38
|
<DataTemplate DataType="{x:Type local:CalendarViewModel}">
|
76
|
-
|
77
39
|
<DockPanel>
|
78
|
-
|
79
40
|
<TextBlock
|
80
|
-
|
81
41
|
DockPanel.Dock="Top"
|
82
|
-
|
83
42
|
FontSize="24"
|
84
|
-
|
85
43
|
FontWeight="Bold"
|
86
|
-
|
87
44
|
Text="Calendar" />
|
88
|
-
|
89
45
|
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
|
90
|
-
|
91
46
|
<Button Command="{Binding HogeCommand}" Content="Hoge" />
|
92
|
-
|
93
47
|
</StackPanel>
|
94
|
-
|
95
48
|
<Calendar HorizontalAlignment="Left" VerticalAlignment="Top" SelectedDate="{Binding SelectedDate}" />
|
96
|
-
|
97
49
|
</DockPanel>
|
98
|
-
|
99
50
|
</DataTemplate>
|
100
|
-
|
101
51
|
</Window.Resources>
|
102
52
|
|
103
|
-
|
104
|
-
|
105
53
|
<DockPanel>
|
106
|
-
|
107
54
|
<TextBlock Text="{Binding StatusMessage}" HorizontalAlignment="Right" DockPanel.Dock="Bottom" />
|
108
55
|
|
109
|
-
|
110
|
-
|
111
56
|
<GroupBox Background="Papayawhip">
|
112
|
-
|
113
57
|
<StackPanel>
|
114
|
-
|
115
58
|
<Button Command="{Binding Command}" CommandParameter="{x:Type local:ToDoViewModel}" Content="ToDo" />
|
116
|
-
|
117
59
|
<Button Command="{Binding Command}" CommandParameter="{x:Type local:CalendarViewModel}" Content="Calendar" />
|
118
|
-
|
119
60
|
</StackPanel>
|
120
|
-
|
121
61
|
</GroupBox>
|
122
62
|
|
123
|
-
|
124
|
-
|
125
63
|
<Grid>
|
126
|
-
|
127
64
|
<TabControl ItemsSource="{Binding TabItems}" SelectedItem="{Binding SelectedItem}">
|
128
|
-
|
129
65
|
<TabControl.ItemTemplate>
|
130
|
-
|
131
66
|
<DataTemplate>
|
132
|
-
|
133
67
|
<TextBlock Text="{Binding TabHeader}" />
|
134
|
-
|
135
68
|
</DataTemplate>
|
136
|
-
|
137
69
|
</TabControl.ItemTemplate>
|
138
|
-
|
139
70
|
</TabControl>
|
140
71
|
|
141
|
-
|
142
|
-
|
143
72
|
<!-- はじめは上に重なってTabControlを隠している -->
|
144
|
-
|
145
73
|
<Image
|
146
|
-
|
147
74
|
HorizontalAlignment="Left"
|
148
|
-
|
149
75
|
VerticalAlignment="Top"
|
150
|
-
|
151
76
|
Source="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg"
|
152
|
-
|
153
77
|
Visibility="{Binding IsImageVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
|
154
|
-
|
155
78
|
</Grid>
|
156
|
-
|
157
79
|
</DockPanel>
|
158
|
-
|
159
80
|
</Window>
|
160
|
-
|
161
81
|
```
|
162
82
|
|
163
|
-
|
164
|
-
|
165
|
-
```x
|
83
|
+
```xml
|
166
|
-
|
167
84
|
<UserControl
|
168
|
-
|
169
85
|
x:Class="Questions309980.ToDoView"
|
170
|
-
|
171
86
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
172
|
-
|
173
87
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
174
|
-
|
175
88
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
176
|
-
|
177
89
|
xmlns:local="clr-namespace:Questions309980"
|
178
|
-
|
179
90
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
180
|
-
|
181
91
|
d:DesignHeight="450"
|
182
|
-
|
183
92
|
d:DesignWidth="800"
|
184
|
-
|
185
93
|
mc:Ignorable="d">
|
186
|
-
|
187
94
|
<DockPanel>
|
188
|
-
|
189
95
|
<TextBlock
|
190
|
-
|
191
96
|
DockPanel.Dock="Top"
|
192
|
-
|
193
97
|
FontSize="24"
|
194
|
-
|
195
98
|
FontWeight="Bold"
|
196
|
-
|
197
99
|
Text="ToDo" />
|
198
|
-
|
199
100
|
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
|
200
|
-
|
201
101
|
<Button Command="{Binding AddCommand}" Content="Add" />
|
202
|
-
|
203
102
|
<Button Command="{Binding DelCommand}" Content="Del" />
|
204
|
-
|
205
103
|
<Button Command="{Binding DoneCommand}" Content="Done" />
|
206
|
-
|
207
104
|
</StackPanel>
|
208
|
-
|
209
105
|
<ListBox>
|
210
|
-
|
211
106
|
<ListBoxItem Content="aaa" />
|
212
|
-
|
213
107
|
<ListBoxItem Content="bbb" />
|
214
|
-
|
215
108
|
<ListBoxItem Content="ccc" />
|
216
|
-
|
217
109
|
</ListBox>
|
218
|
-
|
219
110
|
</DockPanel>
|
220
|
-
|
221
111
|
</UserControl>
|
222
|
-
|
223
112
|
```
|
224
113
|
|
225
|
-
|
226
|
-
|
227
|
-
```
|
114
|
+
```cs
|
228
|
-
|
229
115
|
using Prism.Commands;
|
230
|
-
|
231
116
|
using Prism.Mvvm;
|
232
|
-
|
233
117
|
using System;
|
234
|
-
|
235
118
|
using System.Collections.ObjectModel;
|
236
|
-
|
237
119
|
using System.Diagnostics;
|
238
|
-
|
239
120
|
using System.Linq;
|
240
121
|
|
241
|
-
|
242
|
-
|
243
122
|
namespace Questions309980
|
244
|
-
|
245
123
|
{
|
246
|
-
|
247
124
|
public class MainViewModel : BindableBase
|
248
|
-
|
249
|
-
{
|
125
|
+
{
|
250
|
-
|
251
126
|
private bool _IsImageVisible = true;
|
252
|
-
|
253
127
|
public bool IsImageVisible { get => _IsImageVisible; set => SetProperty(ref _IsImageVisible, value); }
|
254
128
|
|
255
|
-
|
256
|
-
|
257
129
|
private TabItemBase _SelectedItem;
|
258
|
-
|
259
130
|
public TabItemBase SelectedItem { get => _SelectedItem; set => SetProperty(ref _SelectedItem, value); }
|
260
131
|
|
261
|
-
|
262
|
-
|
263
132
|
private string _StatusMessage;
|
264
|
-
|
265
133
|
public string StatusMessage { get => _StatusMessage; set => SetProperty(ref _StatusMessage, value); }
|
266
134
|
|
267
|
-
|
268
|
-
|
269
135
|
public ObservableCollection<TabItemBase> TabItems { get; } = new();
|
270
136
|
|
271
|
-
|
272
|
-
|
273
137
|
public DelegateCommand<Type> Command { get; }
|
274
138
|
|
275
139
|
|
276
|
-
|
277
|
-
|
278
|
-
|
279
140
|
public MainViewModel()
|
280
|
-
|
281
141
|
{
|
282
|
-
|
283
142
|
Command = new(type =>
|
284
|
-
|
285
143
|
{
|
286
|
-
|
287
144
|
// ImageのVisibilityを切り替える
|
288
|
-
|
289
145
|
IsImageVisible = false;
|
290
146
|
|
291
|
-
|
292
|
-
|
293
147
|
// switch文等で作り分けてもいいが、面倒なので型(Type)から直で生成
|
294
|
-
|
295
148
|
var item = (TabItemBase)Activator.CreateInstance(type);
|
296
149
|
|
297
|
-
|
298
|
-
|
299
150
|
// item追加
|
300
|
-
|
301
151
|
TabItems.Add(item);
|
302
152
|
|
303
|
-
|
304
|
-
|
305
153
|
// item選択
|
306
|
-
|
307
154
|
SelectedItem = item;
|
308
155
|
|
309
|
-
|
310
|
-
|
311
156
|
// CanExecuteを再確認させる
|
312
|
-
|
313
157
|
Command.RaiseCanExecuteChanged();
|
314
158
|
|
315
|
-
|
316
|
-
|
317
159
|
StatusMessage = $"{type.Name} 読み込み";
|
318
|
-
|
319
160
|
},
|
320
|
-
|
321
161
|
// 同じボタンは2回押せないようにする(TabItemsにすでに同じ型があるかどうか)
|
322
|
-
|
323
162
|
type => !TabItems.Any(x => x.GetType().Equals(type)));
|
324
|
-
|
325
163
|
}
|
326
|
-
|
327
|
-
}
|
164
|
+
}
|
328
|
-
|
329
|
-
|
330
165
|
|
331
166
|
public abstract class TabItemBase : BindableBase
|
332
|
-
|
333
|
-
{
|
167
|
+
{
|
334
|
-
|
335
168
|
public string TabHeader { get; }
|
336
|
-
|
337
169
|
public TabItemBase(string header) => TabHeader = header;
|
338
|
-
|
339
|
-
}
|
170
|
+
}
|
340
|
-
|
341
|
-
|
342
171
|
|
343
172
|
public class ToDoViewModel : TabItemBase
|
344
|
-
|
345
|
-
{
|
173
|
+
{
|
346
|
-
|
347
174
|
public DelegateCommand AddCommand { get; }
|
348
|
-
|
349
175
|
public DelegateCommand DelCommand { get; }
|
350
|
-
|
351
176
|
public DelegateCommand DoneCommand { get; }
|
352
177
|
|
353
178
|
|
354
|
-
|
355
|
-
|
356
|
-
|
357
179
|
public ToDoViewModel() : base("ToDo")
|
358
|
-
|
359
180
|
{
|
360
|
-
|
361
181
|
AddCommand = new(() => Debug.WriteLine("AddCommand"));
|
362
|
-
|
363
182
|
DelCommand = new(() => Debug.WriteLine("DelCommand"));
|
364
|
-
|
365
183
|
DoneCommand = new(() => Debug.WriteLine("DoneCommand"));
|
366
|
-
|
367
184
|
}
|
368
|
-
|
369
|
-
}
|
185
|
+
}
|
370
|
-
|
371
|
-
|
372
186
|
|
373
187
|
public class CalendarViewModel : TabItemBase
|
374
|
-
|
375
|
-
{
|
188
|
+
{
|
376
|
-
|
377
189
|
private DateTime _SelectedDate;
|
378
|
-
|
379
190
|
public DateTime SelectedDate { get => _SelectedDate; set => SetProperty(ref _SelectedDate, value); }
|
380
|
-
|
381
191
|
|
382
|
-
|
383
192
|
public DelegateCommand HogeCommand { get; }
|
384
193
|
|
385
194
|
|
386
|
-
|
387
|
-
|
388
|
-
|
389
195
|
public CalendarViewModel() : base("Calendar") => HogeCommand = new(() => Debug.WriteLine(SelectedDate));
|
390
|
-
|
391
|
-
}
|
196
|
+
}
|
392
|
-
|
393
197
|
}
|
394
|
-
|
395
198
|
```
|
396
199
|
|
397
|
-
|
398
|
-
|
399
200
|
`BindableBase`・`DelegateCommand`は、`Prism.Core`を使用しました。
|
400
|
-
|
401
201
|
[NuGet Gallery | Prism.Core 8.0.0.1909](https://www.nuget.org/packages/Prism.Core/)
|
402
202
|
|
403
|
-
|
404
|
-
|
405
|
-
特に指定がないので
|
203
|
+
特に指定がないので.NET 5.0で書きました^^
|
406
|
-
|
407
|
-
|
204
|
+
.NET Framework 4.8等では、`new()`でエラーが出るので型を書いてください。
|
408
|
-
|
409
|
-
|
410
205
|
|
411
206
|
[Target-typed new expressions - C# 9.0 specification proposals | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/proposals/csharp-9.0/target-typed-new)
|
412
|
-
|
413
207
|
[ターゲットからの new 型推論 | ++C++; // 未確認飛行 C](https://ufcpp.net/study/csharp/oo_construct.html#target-typed-new)
|
414
|
-
|
415
208
|

|
416
209
|
|
417
|
-
|
418
|
-
|
419
210
|
---
|
420
211
|
|
421
|
-
|
422
|
-
|
423
212
|
[[Q&A] WPF MVVMの学習 - Qiita](https://qiita.com/choni-k/questions/8973d506bcca4722ce2c)
|
424
213
|
|
425
|
-
|
426
|
-
|
427
214
|
> teratailでは、マルチポスト※の推奨はしていません。
|
428
215
|
|
429
|
-
|
430
|
-
|
431
216
|
[ヘルプ|teratail(テラテイル)](https://teratail.com/help#posted-otherservice)
|
432
|
-
|
433
217
|
上記確認の上、適切に対応してください。
|
3
もー
test
CHANGED
@@ -280,7 +280,7 @@
|
|
280
280
|
|
281
281
|
{
|
282
282
|
|
283
|
-
Command = new
|
283
|
+
Command = new(type =>
|
284
284
|
|
285
285
|
{
|
286
286
|
|
2
HogeCommand
test
CHANGED
@@ -380,13 +380,13 @@
|
|
380
380
|
|
381
381
|
|
382
382
|
|
383
|
-
public DelegateCommand Hoge { get; }
|
383
|
+
public DelegateCommand HogeCommand { get; }
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
384
|
+
|
385
|
+
|
386
|
+
|
387
|
+
|
388
|
+
|
389
|
-
public CalendarViewModel() : base("Calendar") => Hoge = new(() => Debug.WriteLine(SelectedDate));
|
389
|
+
public CalendarViewModel() : base("Calendar") => HogeCommand = new(() => Debug.WriteLine(SelectedDate));
|
390
390
|
|
391
391
|
}
|
392
392
|
|
1
C#
test
CHANGED
@@ -224,7 +224,7 @@
|
|
224
224
|
|
225
225
|
|
226
226
|
|
227
|
-
```
|
227
|
+
```C#
|
228
228
|
|
229
229
|
using Prism.Commands;
|
230
230
|
|