teratail
回答率
85.30%
質問するログイン新規登録
トップC#に関する質問WPF MVVMスタイルでのUserControlに対するデータの入出力について

編集履歴

回答編集履歴

3

見直しキャンペーン中

2023/08/12 09:53

投稿

TN8001
TN8001

スコア10180

answer CHANGED
@@ -1,5 +1,5 @@
1
1
  動くコードがないと話をすり合わせるのが大変なので^^;
2
- 今の私の理解を`MVVM`を意識せずざっくり実装しました。
2
+ 今の私の理解をMVVMを意識せずざっくり実装しました。
3
3
 
4
4
  ```xml:MainWindow.xaml
5
5
  <Window

2

見直しキャンペーン中

2023/07/23 06:15

投稿

TN8001
TN8001

スコア10180

answer CHANGED
@@ -1,207 +1,203 @@
1
- 動くコードがないと話をすり合わせるのが大変なので^^;
2
- 今の私の理解を`MVVM`を意識せずざっくり実装しました。
3
-
4
- MainWindow.xaml
5
- ```xaml
6
- <Window
7
- x:Class="Test.MainWindow"
8
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
9
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
10
- xmlns:local="clr-namespace:Test"
11
- Height="450"
12
- SizeToContent="Width">
13
- <Window.DataContext>
14
- <local:MainWindowViewModel />
15
- </Window.DataContext>
16
- <Window.Resources>
17
- <DataTemplate x:Key="CheckedInfo" DataType="{x:Type local:Info}">
18
- <TextBlock Text="{Binding Path=Name, StringFormat=CheckedInfo: {0}}" />
19
- </DataTemplate>
20
- </Window.Resources>
21
- <Grid>
22
- <Grid.RowDefinitions>
23
- <RowDefinition />
24
- <RowDefinition Height="2*" />
25
- </Grid.RowDefinitions>
26
- <ListBox ItemTemplate="{StaticResource CheckedInfo}" ItemsSource="{Binding Path=CheckedInfoList, ElementName=testControl}" />
27
- <local:TestControl
28
- x:Name="testControl"
29
- Grid.Row="1"
30
- InfoList="{Binding Path=InfoList}" />
31
- </Grid>
32
- </Window>
33
- ```
34
-
35
- MainWindowViewModel.cs
36
- ```C#
37
- using System.Collections.Generic;
38
-
39
- namespace Test
40
- {
41
- public class MainWindowViewModel //: Observable
42
- {
43
- public InfoList InfoList { get; }
44
-
45
- //private InfoList _CheckedInfoList;
46
- //public InfoList CheckedInfoList { get => _CheckedInfoList; set => Set(ref _CheckedInfoList, value); }
47
-
48
- public MainWindowViewModel()
49
- {
50
- InfoList = new InfoList
51
- {
52
- new Info {
53
- Name = "1",
54
- Child = new InfoList {
55
- new Info {
56
- Name = "1-1",
57
- Child = new InfoList {
58
- new Info { Name = "1-1-1", Check = true, },
59
- new Info { Name = "1-1-2", },
60
- },
61
- },
62
- },
63
- },
64
- new Info {
65
- Name = "2",
66
- Child = new InfoList {
67
- new Info { Name = "2-1", Check = true, },
68
- },
69
- },
70
- new Info { Name = "3", Check = true, },
71
- new Info {
72
- Name = "4",
73
- Child = new InfoList {
74
- new Info { Name = "4-1", },
75
- },
76
- },
77
- };
78
- }
79
- }
80
-
81
- public class InfoList : List<Info> { }
82
-
83
- public class Info
84
- {
85
- public string Name { get; set; }
86
- //public string Icon { get; set; }
87
- public bool Expand { get; set; } = true;
88
- public bool Check { get; set; }
89
-
90
- public InfoList Child { get; set; } // Info Child？
91
- }
92
- }
93
- ```
94
-
95
- TestControl.xaml
96
- ```xaml
97
- <UserControl
98
- x:Class="Test.TestControl"
99
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
100
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
101
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
102
- xmlns:local="clr-namespace:Test"
103
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
104
- x:Name="userControl"
105
- Width="300"
106
- d:DesignHeight="400"
107
- mc:Ignorable="d">
108
- <Grid Name="baseContainer">
109
- <TreeView
110
- CheckBox.Checked="TreeView_CheckChanged"
111
- CheckBox.Unchecked="TreeView_CheckChanged"
112
- ItemsSource="{Binding InfoList, ElementName=userControl, Mode=OneWay}">
113
- <TreeView.Resources>
114
- <Style TargetType="TreeViewItem">
115
- <Setter Property="IsExpanded" Value="{Binding Path=Expand, Mode=TwoWay}" />
116
- </Style>
117
- </TreeView.Resources>
118
-
119
- <TreeView.ItemTemplate>
120
- <HierarchicalDataTemplate DataType="local:InfoList" ItemsSource="{Binding Path=Child}">
121
- <StackPanel Orientation="Horizontal">
122
- <CheckBox IsChecked="{Binding Path=Check, Mode=TwoWay}" />
123
- <!--<Image Source="{Binding Path=Icon}" />-->
124
- <TextBlock Text="{Binding Path=Name}" />
125
- </StackPanel>
126
- </HierarchicalDataTemplate>
127
- </TreeView.ItemTemplate>
128
- </TreeView>
129
- </Grid>
130
- </UserControl>
131
- ```
132
-
133
- TestControl.xaml.cs
134
- ```C#
135
- using System.Windows;
136
- using System.Windows.Controls;
137
-
138
- namespace Test
139
- {
140
- public partial class TestControl : UserControl
141
- {
142
- public static readonly DependencyProperty InfoListProperty
143
- = DependencyProperty.Register(nameof(InfoList), typeof(InfoList),
144
- typeof(TestControl), new PropertyMetadata(null));
145
- public InfoList InfoList
146
- {
147
- get => (InfoList)GetValue(InfoListProperty);
148
- set => SetValue(InfoListProperty, value);
149
- }
150
-
151
- public static readonly DependencyProperty CheckedInfoListProperty
152
- = DependencyProperty.Register(nameof(CheckedInfoList), typeof(InfoList),
153
- typeof(TestControl), new PropertyMetadata(null));
154
- public InfoList CheckedInfoList
155
- {
156
- get => (InfoList)GetValue(CheckedInfoListProperty);
157
- set => SetValue(CheckedInfoListProperty, value);
158
- }
159
-
160
-
161
- public TestControl()
162
- {
163
- InitializeComponent();
164
- }
165
-
166
- private void TreeView_CheckChanged(object sender, RoutedEventArgs e)
167
- {
168
- var l = new InfoList();
169
- foreach(var c in InfoList)
170
- {
171
- if(Dfs(c)) l.Add(c);
172
- }
173
- CheckedInfoList = l;
174
-
175
- bool Dfs(Info info)
176
- {
177
- if(info.Check) return true;
178
- if(info.Child == null) return false;
179
- foreach(var c in info.Child)
180
- {
181
- if(Dfs(c)) return true;
182
- }
183
-
184
- return false;
185
- }
186
- }
187
- }
188
- }
189
- ```
190
- ![アプリ画像](380998da49d4578b09dbb91546c96fd7.png)
191
-
192
- 動作はこれでいいのでしょうか？
193
- これですと`TestControl`にVMがありませんが、実際は`MainWindowViewModel`から渡された`InfoList`を`TestControl`で`InfoListVM`等に加工（詰め替え）しているということでしょうか？（何のために??）
194
- それとも`Info`が`Check`・`Child`だけで（`Name`もか？）、`InfoVM`に`Icon`や`Expand`を生やしてるってことなのかな？
195
-
196
-
197
- > データの実体はモデル部より供給
198
-
199
- > check状態(開始時) App --> UserControl v --> vm --> model
200
- > check状態(終了時) App <-- UserControl v <-- vm <-- model
201
- > ツリー構造の実体 UserControl v <-- vm <-- model
202
-
203
- このへんのニュアンスもいまいちわかりません。
204
- モデルとは`CheckedInfoList`のことを指しているんでしょうか？
205
- それとも`InfoVM`のために画像をとってくるような処理の部分？
206
-
1
+ 動くコードがないと話をすり合わせるのが大変なので^^;
2
+ 今の私の理解を`MVVM`を意識せずざっくり実装しました。
3
+
4
+ ```xml:MainWindow.xaml
5
+ <Window
6
+ x:Class="Test.MainWindow"
7
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
8
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
9
+ xmlns:local="clr-namespace:Test"
10
+ Height="450"
11
+ SizeToContent="Width">
12
+ <Window.DataContext>
13
+ <local:MainWindowViewModel />
14
+ </Window.DataContext>
15
+ <Window.Resources>
16
+ <DataTemplate x:Key="CheckedInfo" DataType="{x:Type local:Info}">
17
+ <TextBlock Text="{Binding Path=Name, StringFormat=CheckedInfo: {0}}" />
18
+ </DataTemplate>
19
+ </Window.Resources>
20
+ <Grid>
21
+ <Grid.RowDefinitions>
22
+ <RowDefinition />
23
+ <RowDefinition Height="2*" />
24
+ </Grid.RowDefinitions>
25
+ <ListBox ItemTemplate="{StaticResource CheckedInfo}" ItemsSource="{Binding Path=CheckedInfoList, ElementName=testControl}" />
26
+ <local:TestControl
27
+ x:Name="testControl"
28
+ Grid.Row="1"
29
+ InfoList="{Binding Path=InfoList}" />
30
+ </Grid>
31
+ </Window>
32
+ ```
33
+
34
+ ```cs:MainWindowViewModel.cs
35
+ using System.Collections.Generic;
36
+
37
+ namespace Test
38
+ {
39
+ public class MainWindowViewModel //: Observable
40
+ {
41
+ public InfoList InfoList { get; }
42
+
43
+ //private InfoList _CheckedInfoList;
44
+ //public InfoList CheckedInfoList { get => _CheckedInfoList; set => Set(ref _CheckedInfoList, value); }
45
+
46
+ public MainWindowViewModel()
47
+ {
48
+ InfoList = new InfoList
49
+ {
50
+ new Info {
51
+ Name = "1",
52
+ Child = new InfoList {
53
+ new Info {
54
+ Name = "1-1",
55
+ Child = new InfoList {
56
+ new Info { Name = "1-1-1", Check = true, },
57
+ new Info { Name = "1-1-2", },
58
+ },
59
+ },
60
+ },
61
+ },
62
+ new Info {
63
+ Name = "2",
64
+ Child = new InfoList {
65
+ new Info { Name = "2-1", Check = true, },
66
+ },
67
+ },
68
+ new Info { Name = "3", Check = true, },
69
+ new Info {
70
+ Name = "4",
71
+ Child = new InfoList {
72
+ new Info { Name = "4-1", },
73
+ },
74
+ },
75
+ };
76
+ }
77
+ }
78
+
79
+ public class InfoList : List<Info> { }
80
+
81
+ public class Info
82
+ {
83
+ public string Name { get; set; }
84
+ //public string Icon { get; set; }
85
+ public bool Expand { get; set; } = true;
86
+ public bool Check { get; set; }
87
+
88
+ public InfoList Child { get; set; } // Info Child？
89
+ }
90
+ }
91
+ ```
92
+
93
+ ```xml:TestControl.xaml
94
+ <UserControl
95
+ x:Class="Test.TestControl"
96
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
97
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
98
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
99
+ xmlns:local="clr-namespace:Test"
100
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
101
+ x:Name="userControl"
102
+ Width="300"
103
+ d:DesignHeight="400"
104
+ mc:Ignorable="d">
105
+ <Grid Name="baseContainer">
106
+ <TreeView
107
+ CheckBox.Checked="TreeView_CheckChanged"
108
+ CheckBox.Unchecked="TreeView_CheckChanged"
109
+ ItemsSource="{Binding InfoList, ElementName=userControl, Mode=OneWay}">
110
+ <TreeView.Resources>
111
+ <Style TargetType="TreeViewItem">
112
+ <Setter Property="IsExpanded" Value="{Binding Path=Expand, Mode=TwoWay}" />
113
+ </Style>
114
+ </TreeView.Resources>
115
+
116
+ <TreeView.ItemTemplate>
117
+ <HierarchicalDataTemplate DataType="local:InfoList" ItemsSource="{Binding Path=Child}">
118
+ <StackPanel Orientation="Horizontal">
119
+ <CheckBox IsChecked="{Binding Path=Check, Mode=TwoWay}" />
120
+ <!--<Image Source="{Binding Path=Icon}" />-->
121
+ <TextBlock Text="{Binding Path=Name}" />
122
+ </StackPanel>
123
+ </HierarchicalDataTemplate>
124
+ </TreeView.ItemTemplate>
125
+ </TreeView>
126
+ </Grid>
127
+ </UserControl>
128
+ ```
129
+
130
+ ```cs:TestControl.xaml.cs
131
+ using System.Windows;
132
+ using System.Windows.Controls;
133
+
134
+ namespace Test
135
+ {
136
+ public partial class TestControl : UserControl
137
+ {
138
+ public static readonly DependencyProperty InfoListProperty
139
+ = DependencyProperty.Register(nameof(InfoList), typeof(InfoList),
140
+ typeof(TestControl), new PropertyMetadata(null));
141
+ public InfoList InfoList
142
+ {
143
+ get => (InfoList)GetValue(InfoListProperty);
144
+ set => SetValue(InfoListProperty, value);
145
+ }
146
+
147
+ public static readonly DependencyProperty CheckedInfoListProperty
148
+ = DependencyProperty.Register(nameof(CheckedInfoList), typeof(InfoList),
149
+ typeof(TestControl), new PropertyMetadata(null));
150
+ public InfoList CheckedInfoList
151
+ {
152
+ get => (InfoList)GetValue(CheckedInfoListProperty);
153
+ set => SetValue(CheckedInfoListProperty, value);
154
+ }
155
+
156
+
157
+ public TestControl()
158
+ {
159
+ InitializeComponent();
160
+ }
161
+
162
+ private void TreeView_CheckChanged(object sender, RoutedEventArgs e)
163
+ {
164
+ var l = new InfoList();
165
+ foreach(var c in InfoList)
166
+ {
167
+ if(Dfs(c)) l.Add(c);
168
+ }
169
+ CheckedInfoList = l;
170
+
171
+ bool Dfs(Info info)
172
+ {
173
+ if(info.Check) return true;
174
+ if(info.Child == null) return false;
175
+ foreach(var c in info.Child)
176
+ {
177
+ if(Dfs(c)) return true;
178
+ }
179
+
180
+ return false;
181
+ }
182
+ }
183
+ }
184
+ }
185
+ ```
186
+ ![アプリ画像](380998da49d4578b09dbb91546c96fd7.png)
187
+
188
+ 動作はこれでいいのでしょうか？
189
+ これですと`TestControl`にVMがありませんが、実際は`MainWindowViewModel`から渡された`InfoList`を`TestControl`で`InfoListVM`等に加工（詰め替え）しているということでしょうか？（何のために??）
190
+ それとも`Info`が`Check`・`Child`だけで（`Name`もか？）、`InfoVM`に`Icon`や`Expand`を生やしてるってことなのかな？
191
+
192
+
193
+ > データの実体はモデル部より供給
194
+
195
+ > check状態(開始時) App --> UserControl v --> vm --> model
196
+ > check状態(終了時) App <-- UserControl v <-- vm <-- model
197
+ > ツリー構造の実体 UserControl v <-- vm <-- model
198
+
199
+ このへんのニュアンスもいまいちわかりません。
200
+ モデルとは`CheckedInfoList`のことを指しているんでしょうか？
201
+ それとも`InfoVM`のために画像をとってくるような処理の部分？
202
+
207
203
  もしもあまりに乖離しているようですと、VM・Mも出せる範囲で出していただかないと理解できそうにありません^^;

1

画像

2020/09/22 22:52

投稿

TN8001
TN8001

スコア10180

answer CHANGED
@@ -187,6 +187,7 @@
187
187
  }
188
188
  }
189
189
  ```
190
+ ![アプリ画像](380998da49d4578b09dbb91546c96fd7.png)
190
191
 
191
192
  動作はこれでいいのでしょうか？
192
193
  これですと`TestControl`にVMがありませんが、実際は`MainWindowViewModel`から渡された`InfoList`を`TestControl`で`InfoListVM`等に加工（詰め替え）しているということでしょうか？（何のために??）