MVVM構造のUserControlに依存関係プロパティを生やして親画面のVMにバインドしたい

Question

質問

VMを持たないUserControlの場合、コードビハインドに依存関係プロパティを実装してDataContextを設定しなければ、親画面のViewで配置したときに親画面のDataContext(親画面のViewModel)が引き継がれますよね。それにより親画面ViewModelのプロパティをUserControlにバインドできると思います。

ここで、UserControlがViewModel(UserControlViewModel)を持つ場合、依存関係プロパティ自体はコードビハインドに実装する必要があると思いますが、UserControlのDataContextはUserControlViewModelになりますよね。こうなると、親画面のViewに配置してもUserControlのDataContextはUserControlViewModelのため依存関係プロパティを親画面のViewModelのプロパティにバインドすることができない（UserControlViewModelにそのようなプロパティが存在しないというエラーが起きる）と思いますが、これはどのように解決すればよいでしょうか？

目的

• UserConrolにはTextBoxとTextblockがあります。TextBoxに文字列が入力されたとき、VMで加工してTextblockに設定します。Textblockが設定されたときに依存関係プロパティを使ってUserControlを配置する親画面に「入力値」「加工された文字列」の両方を通知するのが目的です。
• 文字列の加工処理はViewのコードビハインドで実装できません。DB問い合わせ等をするのでVMに処理をDIしたいためです。

UserControlのコード

UserControl1.xaml
＊UserControl1.xaml.csに依存関係プロパティを定義
＊UserControl1ViewModel.csにpublic ReactiveProperty<string>を作ってTextBox,TextblockのTextプロパティをバインド

<UserControl x:Class="Project1.Views.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBox Name="CodeText" Grid.Column="0" Text="{Binding MyCode.Value}" />
        <TextBlock Name="NameText" Grid.Column="1"
                   Text="{Binding MyName.Value, NotifyOnTargetUpdated=True}" 
                   TargetUpdated="NameText_TargetUpdated" />
    </Grid>
</UserControl>

UserControl1.xaml.cs

using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System;
using Reactive.Bindings.Interactivity;

namespace Project1.Views
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        private void NameText_TextChanged(object sender, RoutedEventArgs e)
        {
            InputedMyCode = CodeText.Text;
            DbMyName = NameText.Text;
        }
        
        // string型のInputedMyCodeとDbMyNameのDependencyPropertyを実装
        public static readonly DependencyProperty InputedMyCodeProperty =
            DependencyProperty.Register(nameof(InputedMyCode),
                typeof(string), typeof(UserControl1), new PropertyMetadata(""));
        public string InputedMyCode
        {
            get => (string)GetValue(InputedMyCodeProperty);
            set => SetValue(InputedMyCodeProperty, value);
        }
        public static readonly DependencyProperty DbMyNameProperty =
            DependencyProperty.Register(nameof(DbMyName),
                typeof(string), typeof(UserControl1), new PropertyMetadata(""));
        public string DbMyName
        {
            get => (string)GetValue(DbMyNameProperty);
            set => SetValue(DbMyNameProperty, value);
        }
    }
}

環境

• .NET 5
• C# 9.0 WPFアプリケーション
• MVVMフレームワークにPrismを使用→ViewとViewModelはxaml上でViewModelLocator.AutoWireViewModel="True"にして紐付け

Comments

[hihijiji]

ざっと読んだ限りでは、
> VMで加工
ここに問題があるような気がします。
加工にDBに問い合わせが必要なら尚更にModelの仕事かと…
文字列加工用のModelを別途作って、そのインスタンスを複数のVMで共有すれば
それで済む話では？

[hihijiji]

あと細かいようですが、DependencyPropertyはコードビハインドに書く必要はありません。
コードビハインドに書いたほうが収まりがいいからほとんどの人がそうしているだけです。

[ry188472]

質問本文に書いてませんが、DB問い合わせ処理はModelで実施してます。当然の内容なので省略しておりました。わかりにくくてすみません。
DependencyPropertyってVMに書けるんですか？VMにDependencyObjectを継承させるんですかね。でもそうすると親画面でUserControlを配置したときにxaml上で親画面のVMにバインドできないのでは？

[hihijiji]

どこにでも書けるからってVMに書くなんてとんでもない。
ご自身で書かれている通り、public static だからって言うのが唯一の理由。
これで分からなければC#の入門からやり直してください。

Answer 1

なんか堂々巡りですね^^;
どうもprismユーザーと話が合わないのは、私がわかってないだけなんでしょうか？（だったらいいのですが^^;

理屈上はRelativeSourceでWindowとでもすれば引っ張ってこれますが、そんなのイヤすぎますよね？

そもそもガッツリprismしている場合、UserControlの表示は↓のようになりませんか？（Prism Full App(.NET Core)テンプレートより）

<ContentControl prism:RegionManager.RegionName="{x:Static core:RegionNames.ContentRegion}" />

DependencyPropertyを設定するタイミングもないです（まあやりようはあるんでしょうけど）

一度Prism Full App(.NET Core)テンプレートを作っていただいて、ViewA・ViewAViewModel・MessageServiceの関係を見ていただけたらいいと思います。

---

例がないと話の前提が合いませんので雑に作りました（Func<T,R>が気持ち悪いのは気にしないでください^^;
NuGet Gallery | Prism.DryIoc 8.1.97
NuGet Gallery | ReactiveProperty 7.12.0

TextBoxとTextBlockの組が４つあります。どれも動作は同じです（入力値の小文字が大文字になって表示される）

４つのうち１つだけおかしい（異質な）ものがあります。

<Window
  x:Class="Questions362091.Views.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:prism="http://prismlibrary.com/"
  xmlns:views="clr-namespace:Questions362091.Views"
  Width="525"
  SizeToContent="Height">
  <StackPanel>

    <GroupBox Header="ベタ置き">
      <StackPanel>
        <TextBox Text="{Binding Input.Value, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock HorizontalAlignment="Center" Text="↓" />
        <TextBlock Text="{Binding Output.Value}" />
      </StackPanel>
    </GroupBox>

    <GroupBox Header="UserControl1">
      <views:UserControl1 />
    </GroupBox>

    <GroupBox Header="PrismUserControl1">
      <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </GroupBox>

    <GroupBox Header="UserControl2">
      <views:UserControl2 Converter="{Binding Converter}" Input="{Binding Input.Value}" />
    </GroupBox>
  </StackPanel>
</Window>

<UserControl
  x:Class="Questions362091.Views.UserControl1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel>
    <TextBox Text="{Binding Input.Value, UpdateSourceTrigger=PropertyChanged}" />
    <TextBlock HorizontalAlignment="Center" Text="↓" />
    <TextBlock Text="{Binding Output.Value}" />
  </StackPanel>
</UserControl>

<UserControl
  x:Class="Questions362091.Views.PrismUserControl1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel>
    <TextBox Text="{Binding Input.Value, UpdateSourceTrigger=PropertyChanged}" />
    <TextBlock HorizontalAlignment="Center" Text="↓" />
    <TextBlock Text="{Binding Output.Value}" />
  </StackPanel>
</UserControl>

<UserControl
  x:Class="Questions362091.Views.UserControl2"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:views="clr-namespace:Questions362091.Views">
  <StackPanel>
    <TextBox Text="{Binding Input, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type views:UserControl2}}}" />
    <TextBlock HorizontalAlignment="Center" Text="↓" />
    <TextBlock Text="{Binding Output, RelativeSource={RelativeSource AncestorType={x:Type views:UserControl2}}}" />
  </StackPanel>
</UserControl>

using System;
using System.Windows;
using System.Windows.Controls;

namespace Questions362091.Views
{
    public partial class UserControl2 : UserControl
    {
        public string Input { get => (string)GetValue(InputProperty); set => SetValue(InputProperty, value); }
        public static readonly DependencyProperty InputProperty = DependencyProperty.Register(nameof(Input), typeof(string), typeof(UserControl2), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, InputChanged));
        private static void InputChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is UserControl2 userControl2)
                userControl2.Output = userControl2.Converter?.Invoke((string)e.NewValue);
        }

        public string Output { get => (string)GetValue(OutputProperty); protected set => SetValue(OutputPropertyKey, value); }
        private static readonly DependencyPropertyKey OutputPropertyKey = DependencyProperty.RegisterReadOnly(nameof(Output), typeof(string), typeof(UserControl2), new());
        public static readonly DependencyProperty OutputProperty = OutputPropertyKey.DependencyProperty;

        public Func<string, string> Converter { get => (Func<string, string>)GetValue(ConverterProperty); set => SetValue(ConverterProperty, value); }
        public static readonly DependencyProperty ConverterProperty = DependencyProperty.Register(nameof(Converter), typeof(Func<string, string>), typeof(UserControl2), new((Func<string, string>)(s => s)));

        public UserControl2() => InitializeComponent();
    }
}

using Prism.Mvvm;
using Prism.Regions;
using Questions362091.Models;
using Reactive.Bindings;
using Reactive.Bindings.Extensions;
using System;

namespace Questions362091.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        public ReactiveProperty<string> Input { get; }
        public ReadOnlyReactiveProperty<string> Output { get; }
        public Func<string, string> Converter => model.Converter;

        private readonly Model model;

        public MainWindowViewModel(Model model, IRegionManager regionManager)
        {
            this.model = model;
            Input = model.Input.ToReactivePropertyAsSynchronized(x => x.Value);
            Output = model.Output.ToReadOnlyReactiveProperty();
        }
    }
}

using Prism.Mvvm;
using Questions362091.Models;
using Reactive.Bindings;
using Reactive.Bindings.Extensions;

namespace Questions362091.ViewModels
{
    public class PrismUserControl1ViewModel : BindableBase
    {
        public ReactiveProperty<string> Input { get; }
        public ReadOnlyReactiveProperty<string> Output { get; }

        public PrismUserControl1ViewModel(Model model)
        {
            Input = model.Input.ToReactivePropertyAsSynchronized(x => x.Value);
            Output = model.Output.ToReadOnlyReactiveProperty();
        }
    }
}

using Reactive.Bindings;
using System;
using System.Reactive.Linq;

namespace Questions362091.Models
{
    public class Model
    {
        public ReactivePropertySlim<string> Input { get; } = new();
        public ReadOnlyReactivePropertySlim<string> Output { get; }
        public Func<string, string> Converter { get; } = s => s?.ToUpper();

        public Model() => Output = Input.Select(Converter).ToReadOnlyReactivePropertySlim();
    }
}

using Prism.Ioc;
using Prism.Regions;
using Questions362091.Models;
using Questions362091.Views;
using System.Windows;

namespace Questions362091
{
    public partial class App
    {
        protected override Window CreateShell() => Container.Resolve<MainWindow>();
        protected override void OnInitialized()
        {
            base.OnInitialized();
            var regionManager = Container.Resolve<IRegionManager>();
            regionManager.RegisterViewWithRegion("ContentRegion", typeof(PrismUserControl1));
        }
        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterSingleton<Model>();
            containerRegistry.RegisterForNavigation<PrismUserControl1>();
        }
    }
}

Comments

[ry188472]

RelativeSourceを使って、子の依存関係プロパティを親のVMにバインドできました。ありがとうございます。
ただ、なぜ「そんなのイヤすぎますよね？」となるのでしょうか（xamlでの記述が長くなるから？）。
UserControlは「Prism UserControl (WPF)」の項目テンプレートを使うと<UserControl>タグから始まってますね。プロジェクトはFull AppでなくBlank Appで作ったので、それで違うのかもしれません。

[TN8001]

> RelativeSourceを使って、子の依存関係プロパティを親のVMにバインドできました。ありがとうございます。

やりたいことができたのであれば特に言うこともないんですが、聞かれてしまったので私の考えを書きます（が、おそらく賛同いただけないんでしょう）

> ただ、なぜ「そんなのイヤすぎますよね？」となるのでしょうか（xamlでの記述が長くなるから？）。

独立性が高いからUserControlに切り出してるんですよね？（もしかしてこの前提すら違う？？）
であれば子が親を気にする時点で間違っていると思うのですが（相互に依存が発生してしまう）

親にベタ書きしていたがごちゃついてきたので、一部をUserControlにするというのはよくあると思います。
ただAutoWire=trueでDependencyPropertyまで作ってあれこれするんじゃ元より余計ごちゃついていませんか？

すっきり書けないということは、ViewかVMの切り出し範囲を間違っているんだと思います。

FullAppテンプレートは見ていただけました？
[Prism.Templates/Wpf/FullApp at master · PrismLibrary/Prism.Templates](https://github.com/PrismLibrary/Prism.Templates/tree/master/Wpf/FullApp

これなんかは確かにきれいに分かれていて（分かれすぎなぐらいですが^^;、なるほどなーと思う反面「で？」となってしまうのもあります（テンプレートなのでこれで正しいんですが^^;

公式サンプルで、もうちょっと具体的な例が総集編的にでもあればいいんですが。。。
[PrismLibrary/Prism-Samples-Wpf: Samples that demonstrate how to use various Prism features with WPF](https://github.com/PrismLibrary/Prism-Samples-Wpf

[TN8001]

RelativeSourceのくだりは私が勘違いしていたかもしれません。

例を作っている最中に気が付きましたが、RelativeSourceを書くのはMainWindow.xamlなんですね？
<views:PrismUserControl Input="{Binding DataContext.Input.Value, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />

のような。
私はPrismUserControl.xamlの中に書くのかと思っていました。

で、「AutoWire=trueでDependencyPropertyまで作ってあれこれする」のを再現しようとしたんですが訳が分からな過ぎて諦めました^^;

例は「DependencyPropertyなんていらない」ってことを言いたいのですが（「dependencyproperty usercontrol」と検索して出てくるほとんどは無駄なことをしています）、「実はUserControlを複数置きたいのです」って言われちゃうのかな？^^;

その場合はViewModelを複数持つだけなのですが、それも例が必要ですかねぇ。。。

[ry188472]

とりあえず当初のやりかったことはできたのでBAに選ばせていただきました。

TN8001さんが考えているのって、「UserControlのDataContext用に独自のクラスを定義して、親画面VMでそのクラスをnewしてUserControlにバインドする。そのクラスのpublicプロパティやメソッドでデータの受け渡し/加工をする。こうすればDependencyPropertyはいらない」ということであってます？

>ViewかVMの切り出し範囲を間違っている
これは自分でもありえると思います。利用者となる親画面の実装を減らすのを第一目的に切り出ししてるので、範囲は不適切になっててわかりにくくなっている部分はあるかもしれません。

[TN8001]

> とりあえず当初のやりかったことはできたのでBAに選ばせていただきました。

BAには特にこだわりはないので、できた方法を簡単な例で回答していただけるとありがたいのですが。
もし私が盛大に勘違いをしているなら、どういうことだったのかを知りたいです（いまだにわかっていません）

> ということであってます？

意味は同じ気がしますが、単にhihijijiさんの言っている
> 文字列加工用のModelを別途作って、そのインスタンスを複数のVMで共有すれば

っていうのをそのままやっているだけです。
Modelのステートを変化させれば、わざわざDependencyPropertyで教える必要もなくなるってことです。