teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップC#に関する質問別のxamlファイルにBindingしたい

編集履歴

回答編集履歴

2

見直しキャンペーン中

2023/07/28 13:31

投稿

TN8001
TN8001

スコア9862

test CHANGED
@@ -1,203 +1,102 @@
1
1
  horaihoraiさんのほうではすでに解決されていますが、第三者視点ではわかりにくいところもあるのでまとめさせていただきます。
2
2
 
3
+ ```xml:Left.xaml
4
+ <UserControl
5
+ x:Class="Questions348249.Left"
6
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
7
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
8
+ <StackPanel Name="Width">
9
+ <Button Command="{Binding Command}" Content="Button" />
10
+ <StackPanel Width="{Binding LeftWidth}">
11
+ <Rectangle Height="30" Fill="Red" />
12
+ </StackPanel>
13
+ </StackPanel>
14
+ </UserControl>
15
+ ```
3
16
 
17
+ ```xml:Right.xaml
18
+ <UserControl
19
+ x:Class="Questions348249.Right"
20
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
21
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
22
+ <StackPanel Name="Width">
23
+ <Button Command="{Binding LeftRight.Command}" Content="Button" />
24
+ <StackPanel Width="{Binding LeftRight.RightWidth}">
25
+ <Rectangle Height="30" Fill="Blue" />
26
+ </StackPanel>
27
+ </StackPanel>
28
+ </UserControl>
29
+ ```
4
30
 
5
- ```xaml
31
+ ```xml:MainWindow.xaml
32
+ <Window
33
+ x:Class="Questions348249.MainWindow"
34
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
35
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
36
+ xmlns:userControls="clr-namespace:Questions348249"
37
+ Width="800"
38
+ Height="450">
39
+ <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
6
40
 
7
- <UserControl
41
+ <!-- こうしてもいいし -->
42
+ <userControls:Left DataContext="{Binding LeftRight}" />
8
43
 
44
+ <!-- こうするならRightで Width="{Binding LeftRight.RightWidth}" となる -->
9
- x:Class="Questions348249.Left"
45
+ <userControls:Right />
46
+ </StackPanel>
47
+ </Window>
48
+ ```
10
49
 
50
+ ```cs
11
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
51
+ using CommunityToolkit.Mvvm.ComponentModel;
52
+ using CommunityToolkit.Mvvm.Input;
53
+ using System.Windows;
54
+ using System.Windows.Input;
12
55
 
56
+ namespace Questions348249
57
+ {
58
+ class LeftRightViewModel : ObservableObject
59
+ {
13
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
60
+ public double LeftWidth { get => leftWidth; set => SetProperty(ref leftWidth, value); }
61
+ private double leftWidth;
62
+ public double RightWidth { get => rightWidth; set => SetProperty(ref rightWidth, value); }
63
+ private double rightWidth;
64
+ public ICommand Command { get; }
14
65
 
66
+ public LeftRightViewModel()
67
+ {
15
- <StackPanel Name="Width">
68
+ Command = new RelayCommand(() =>
69
+ {
70
+ LeftWidth += 10;
71
+ RightWidth += 5;
72
+ });
73
+ }
74
+ }
16
75
 
76
+ class MainViewModel
77
+ {
78
+ public LeftRightViewModel LeftRight { get; }
17
- <Button Command="{Binding Command}" Content="Button" />
79
+ = new LeftRightViewModel { LeftWidth = 100, RightWidth = 100, };
80
+ }
18
81
 
19
- <StackPanel Width="{Binding LeftWidth}">
82
+ public partial class MainWindow : Window
83
+ {
84
+ public MainWindow()
85
+ {
86
+ InitializeComponent();
20
87
 
88
+ // 「AllのDataContext（ViewModel）自体」 に設定した場合
21
- <Rectangle Height="30" Fill="Red" />
89
+ //DataContext = new LeftRightViewModel();
22
90
 
23
- </StackPanel>
24
-
25
- </StackPanel>
26
-
27
- </UserControl>
91
+ // 「そのプロパティのひとつに設定」 した場合
28
-
92
+ DataContext = new MainViewModel();
93
+ }
94
+ }
95
+ }
29
96
  ```
30
97
 
31
98
 
32
-
33
- ```xaml
34
-
35
- <UserControl
36
-
37
- x:Class="Questions348249.Right"
38
-
39
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
40
-
41
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
42
-
43
- <StackPanel Name="Width">
44
-
45
- <Button Command="{Binding LeftRight.Command}" Content="Button" />
46
-
47
- <StackPanel Width="{Binding LeftRight.RightWidth}">
48
-
49
- <Rectangle Height="30" Fill="Blue" />
50
-
51
- </StackPanel>
52
-
53
- </StackPanel>
54
-
55
- </UserControl>
56
-
57
- ```
58
-
59
-
60
-
61
- ```xaml
62
-
63
- <Window
64
-
65
- x:Class="Questions348249.MainWindow"
66
-
67
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
68
-
69
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
70
-
71
- xmlns:userControls="clr-namespace:Questions348249"
72
-
73
- Width="800"
74
-
75
- Height="450">
76
-
77
- <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
78
-
79
-
80
-
81
- <!-- こうしてもいいし -->
82
-
83
- <userControls:Left DataContext="{Binding LeftRight}" />
84
-
85
-
86
-
87
- <!-- こうするならRightで Width="{Binding LeftRight.RightWidth}" となる -->
88
-
89
- <userControls:Right />
90
-
91
- </StackPanel>
92
-
93
- </Window>
94
-
95
- ```
96
-
97
-
98
-
99
- ```C#
100
-
101
- using CommunityToolkit.Mvvm.ComponentModel;
102
-
103
- using CommunityToolkit.Mvvm.Input;
104
-
105
- using System.Windows;
106
-
107
- using System.Windows.Input;
108
-
109
-
110
-
111
- namespace Questions348249
112
-
113
- {
114
-
115
- class LeftRightViewModel : ObservableObject
116
-
117
- {
118
-
119
- public double LeftWidth { get => leftWidth; set => SetProperty(ref leftWidth, value); }
120
-
121
- private double leftWidth;
122
-
123
- public double RightWidth { get => rightWidth; set => SetProperty(ref rightWidth, value); }
124
-
125
- private double rightWidth;
126
-
127
- public ICommand Command { get; }
128
-
129
-
130
-
131
- public LeftRightViewModel()
132
-
133
- {
134
-
135
- Command = new RelayCommand(() =>
136
-
137
- {
138
-
139
- LeftWidth += 10;
140
-
141
- RightWidth += 5;
142
-
143
- });
144
-
145
- }
146
-
147
- }
148
-
149
-
150
-
151
- class MainViewModel
152
-
153
- {
154
-
155
- public LeftRightViewModel LeftRight { get; }
156
-
157
- = new LeftRightViewModel { LeftWidth = 100, RightWidth = 100, };
158
-
159
- }
160
-
161
-
162
-
163
- public partial class MainWindow : Window
164
-
165
- {
166
-
167
- public MainWindow()
168
-
169
- {
170
-
171
- InitializeComponent();
172
-
173
-
174
-
175
- // 「AllのDataContext（ViewModel）自体」 に設定した場合
176
-
177
- //DataContext = new LeftRightViewModel();
178
-
179
-
180
-
181
- // 「そのプロパティのひとつに設定」 した場合
182
-
183
- DataContext = new MainViewModel();
184
-
185
- }
186
-
187
- }
188
-
189
- }
190
-
191
- ```
192
-
193
-
194
-
195
-
196
-
197
99
  `INotifyPropertyChanged`・`ICommand`実装は↓を使用。
198
-
199
100
  [NuGet Gallery | CommunityToolkit.Mvvm 7.0.3](https://www.nuget.org/packages/CommunityToolkit.Mvvm/)
200
101
 
201
-
202
-
203
102
  [Introduction to the MVVM Toolkit - Windows Community Toolkit | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/communitytoolkit/mvvm/introduction)

1

余計なStackPanel

2021/07/08 03:41

投稿

TN8001
TN8001

スコア9862

test CHANGED
@@ -74,25 +74,19 @@
74
74
 
75
75
  Height="450">
76
76
 
77
- <StackPanel>
78
-
79
-
80
-
81
- <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
77
+ <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
82
-
83
-
84
-
78
+
79
+
80
+
85
- <!-- こうしてもいいし -->
81
+ <!-- こうしてもいいし -->
86
-
82
+
87
- <userControls:Left DataContext="{Binding LeftRight}" />
83
+ <userControls:Left DataContext="{Binding LeftRight}" />
88
-
89
-
90
-
84
+
85
+
86
+
91
- <!-- こうするならRightで Width="{Binding LeftRight.RightWidth}" となる -->
87
+ <!-- こうするならRightで Width="{Binding LeftRight.RightWidth}" となる -->
92
-
88
+
93
- <userControls:Right />
89
+ <userControls:Right />
94
-
95
- </StackPanel>
96
90
 
97
91
  </StackPanel>
98
92