prism WPF フォームに貼り付けたUserControlインスタンスにプロパティをxamlで設定したい。

前提

VisualStudio 2022 で　C#　WPFプロジェクト
WPFでPrismフレームワークを利用しています。

実現したいこと

MainWindowにUserControlを複数インスタンスで張り付けたときに、
UserControlのそれぞれのインスタンスのプロパティをxamlで設定したい。
ViewModel側にBindingのプロパティを記載したい。

発生している問題・エラーメッセージ

記述の仕方がわかりません。

該当のソースコード

MainWindow.xaml
1<Window ・・・>
2    <Grid>
3        <local:PrismUserControl1 />    <==ここで、プロパティ"XXXXLabel"に値を入れて「いいいい」と表示したい。
4        <local:PrismUserControl1 XXXXLabel={Binging XXXX2Value} />   <==Bindingもしたい。
5    </Grid>
6</Window>

PrismUserControl1.xaml
1<UserControl ・・・>
2    <Grid>
3        <StackPanel Orientation="Horizontal">
4            <Label Content="{Binding XXXXLabel}" />
5        </StackPanel>
6    </Grid>
7</UserControl>

PrismUserControl1ViewModel.cs
1using Prism.Commands;
2using Prism.Mvvm;
3using System;
4using System.Collections.Generic;
5using System.Linq;
6
7namespace BlankApp.WPF.ViewModels
8{
9    public class PrismUserControl1ViewModel : BindableBase
10    {
11        private string _xXXXLabel = "ああああ";
12        public string XXXXLabel
13        {
14            get { return _xXXXLabel; }
15            set { SetProperty(ref _xXXXLabel, value); }
16        }
17    }
18}
19

試したこと

PrismUserControl1.xaml.cs にprismを利用しなければ、Bindingプロパティを記載できます。
ViewModel側にプロパティの受け渡しができないので、使いにくいです。

MainWindow.xaml.cs
1<Grid>
2        <StackPanel Orientation="Horizontal">
3            <Views:PrismUserControl1 x:Name="Uc1" Width="100" XXXXValue="sssss"/>　　　＜＝＝これは通ります
4            <Views:PrismUserControl1 x:Name="Uc2" Width="100" XXXXValue="{Binding XXXXValue}" />　　＜＝＝これは通りません。(名前は便宜上共通)
5        </StackPanel>
6    </Grid>

MainWindowViewModel.cs
1        private string _xXXXValue = "いいいいいい";
2        public string XXXXValue
3        {
4            get { return _xXXXValue; }
5            set { SetProperty(ref _xXXXValue, value); }
6        }

PrismUserControl1.xaml
1<UserControl ・・・>
2    <Grid>
3        <Label Content="{Binding XXXXValue,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type local:PrismUserControl1}}}" Width="100" FontSize="50" />
4    </Grid>
5</UserControl>

PrismUserControl1.xaml.cs
1using System.Windows;
2using System.Windows.Controls;
3
4namespace UC.WPF.Views
5{
6    /// <summary>
7    /// Interaction logic for PrismUserControl1
8    /// </summary>
9    public partial class PrismUserControl1 : UserControl
10    {
11        public PrismUserControl1()
12        {
13            InitializeComponent();
14        }
15
16        public string XXXXValue
17        {
18            get { return (string)GetValue(XXXXValueProperty); }
19            set { SetValue(XXXXValueProperty, value); }
20        }
21        // Using a DependencyProperty as the backing store for XXXXValue.  This enables animation, styling, binding, etc...
22        public static readonly DependencyProperty XXXXValueProperty =
23            DependencyProperty.Register("XXXXValue", typeof(string), typeof(PrismUserControl1), new PropertyMetadata("ああああ"));
24    }
25}
26

補足情報（FW/ツールのバージョンなど）

VisualStudio 2022 C#　.Net Core 6.0
prism の select container はUnity

TN8001

2022/10/03 15:10

Prismユーザーとはどうも話が合わないのでリンク提示に留めます。 [MVVM構造のUserControlに依存関係プロパティを生やして親画面のVMにバインドしたい](https://teratail.com/questions/362091) [MVVMで実装しているUserControlでViewの依存関係プロパティとVMのプロパティを連動させる方法](https://teratail.com/questions/2x9yv8s160mb6u)

行動規範の内容に同意します

回答1件

同様の疑問を持っておりましたので、自分なりの方法を残しておきます。

MainWindow

MainWindow.xaml
1<Window ・・・
2        xmlns:views="clr-namespace:Sample.Views"/>
3    <StackPanel>
4        <TextBox Text="{Binding LabelValueA, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
5        <TextBox Text="{Binding LabelValueB, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
6        <views:PrismUserControl1 LabelValue="{Binding LabelValueA}"/>
7        <views:PrismUserControl1 LabelValue="{Binding LabelValueB}"/>
8    </StackPanel>
9  </Window>

MainWindowViewModel.cs
1using Prism.Mvvm;
2
3namespace Sample.ViewModels
4{
5    public class MainWindowViewModel : BindableBase
6    {
7        private string _labelValueA;
8        public string LabelValueA
9        {
10            get => _labelValueA;
11            set => SetProperty(ref _labelValueA, value);
12        }
13
14        private string _labelValueB;
15        public string LabelValueB
16        {
17            get => _labelValueB;
18            set => SetProperty(ref _labelValueB, value);
19        }
20
21        public MainWindowViewModel()
22        {
23            LabelValueA = "LabelA";
24            LabelValueB = "LabelB";
25        }
26    }
27}

PrismUserControl1

PrismUserControl1.xaml
1<UserControl・・・
2             xmlns:viewmodels="clr-namespace:Sample.ViewModels"
3             prism:ViewModelLocator.AutoWireViewModel="False"
4             x:Name="parent">
5    <StackPanel>
6        <StackPanel.DataContext>
7            <viewmodels:PrismUserControl1ViewModel/>
8        </StackPanel.DataContext>
9        <Label Width="200" FontSize="24" Background="AliceBlue" HorizontalAlignment="Left"
10               Content="{Binding LabelValue, ElementName=parent}"/>
11        <StackPanel Orientation="Horizontal">
12            <TextBox Width="200" Text="{Binding ViewModelLabelValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
13            <Label Width="200" FontSize="24" Background="Beige" Margin="5,0,0,0"
14               Content="{Binding ViewModelLabelValue}"/>
15            <Label Width="100" Background="Aquamarine" Content="{Binding DataContext.LabelValueA, ElementName=parent}"/>
16        </StackPanel>
17    </StackPanel>
18</UserControl>

PrismUserControl1ViewModel.cs
1using Prism.Mvvm;
2
3namespace Sample.ViewModels
4{
5    public class PrismUserControl1ViewModel : BindableBase
6    {
7        public string _viewModelLabelValue;
8        public string ViewModelLabelValue
9        {
10            get => _viewModelLabelValue;
11            set => SetProperty(ref _viewModelLabelValue, value);
12        }
13
14        public PrismUserControl1ViewModel()
15        {
16
17        }
18    }
19}

まず、MainWindowにはTextBoxを２つ配置し、それぞれにMainWindowViewModelの変更通知プロパティ「LabelValueA」と「LabelValueB」をバインドします。続いてPrismUserControl1も２つ配置し、それぞれの依存関係プロパティ「LabelValue」に「LabelValueA」と「LabelValueB」をバインドします。これでMainWindowのTextBoxに入力した値が、ユーザーコントロールの依存関係プロパティに反映されるようになります。

次にPrismUserControl1ですが、XAMLのViewModelLocator.AutoWireViewModelをFalseに変更し、ユーザーコントロールとViewが自動的に結び付かないようにします。その代わりUserControl要素直下のコンテナ（この例ではStackPanel）のDataContextに、PrismUserControl1ViewModelを手動でバインドします。

PrismUserControl1にはLabelを配置し、依存関係プロパティ「LabelValue」をバインドします。その際、ElementNameでUserControl要素を指定する必要があるため、UserControl要素に名前を付けておきます（この例ではparent）。もちろんRelativeSourceでUserControlを指定しても構いません。

続けてStackPanelを配置し、その中にTextBoxとLabelを配置します。TextBoxとLabelにはPrismUserControl1ViewModelの変更通知プロパティ「ViewModelLabelValue」をバインドし、TextBoxの値が変更されればLabelの値も変更されるようにします。
（おまけでもう一つLabelを追加し、MainWindowのDataContextの変更通知プロパティもバインド）

以上でMainWindowに配置したユーザーコントロールの依存関係プロパティに、ViewModelの変更通知プロパティをバインドし、ユーザーコントロールにはユーザーコントロールのViewModelの変更通知プロパティをバインド可能になります。

要点は、ユーザーコントロールのViewModelLocator.AutoWireViewModelをFalseに変更し、ViewModelはUserControl要素直下のコンテナに手動でバインドする点です。これで親要素のDataContextをユーザーコントロールでも参照可能になります。やりたいことと違う場合は、噛み砕いてご参考ください。

投稿2022/11/14 05:10