[WPF][Xaml]Window側からボタン押下でユーザコントロールを動的に配置したり、プロパティ値を更新したりしたい

Question

前提・実現したいこと

Window(Prism)側からボタン押下で動的にUsercontrolを配置したり、配置したユーザコントロールのプロパティ値を更新したりしたいと考えています。

いろいろなネット上より上述ができそうなことはわかっておりますが、冗長なプログラミングになる気がして手間取っております。

参考にさせていただいたURLは以下になります。
https://qiita.com/tera1707/items/8d24b21a05ad84a1c92f

該当のソースコード

[WindowのXaml]

<Window x:Class="TEST.Views.TESTFlowRegist"
             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:TEST.Views"
             Height="360" Width="500"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="7*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0"  Content="承認フロー名：" Margin="0,0,300,295"/>
        <TextBox Grid.Column="0" Margin="0,0,130,295" HorizontalAlignment="Right" Width="164" />
        <ItemsControl Grid.Column="0" ItemsSource="{Binding Items}" Margin="0,42,0,0.5">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:ActionPanel No="{Binding DataContext.No, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Top" Value="{Binding Y}" />
                    <Setter Property="Canvas.Left" Value="{Binding X}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
        <Button Content="追加" Command="{Binding AddCommand}" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="90" Height="35"/>
        <Button Content="削除" Command="{Binding DelCommand}" Grid.Column="1" HorizontalAlignment="Left" Margin="10,68,0,0" VerticalAlignment="Top" Width="90" Height="35"/>
        <Button Content="Or" Command="{Binding DelCommand}" Grid.Column="1" HorizontalAlignment="Left" Margin="10,115,0,0" VerticalAlignment="Top" Width="90" Height="35"/>
        <Button Content="And" Command="{Binding DelCommand}" Grid.Column="1" HorizontalAlignment="Left" Margin="10,165,0,0" VerticalAlignment="Top" Width="90" Height="35"/>
    </Grid>
</Window>

[UserControlのXaml]

<UserControl x:Class="TEST.Views.ActionPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"
             Width="340" Height="60"
             x:Name="panel"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid  >
        <TextBlock Text="{Binding No, ElementName=panel}" Margin="2,2,313,35" FontSize="14"/>
　　　　 <!--以下は本ユーザコントロールのViewModelにてバインドし表示-->
        <ComboBox ItemsSource="{Binding People}" SelectedValue="Value" DisplayMemberPath="DisplayValue" 
                  SelectedItem="{Binding SelectedAuthority,Mode=TwoWay}" HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="173" Margin="27,0,0,0"/>
        <ComboBox ItemsSource="{Binding Authority}" SelectedValue="Value" DisplayMemberPath="DisplayValue" 
                  SelectedItem="{Binding SelectedAuthority,Mode=TwoWay}" HorizontalAlignment="Left" Margin="210,0,0,0" VerticalAlignment="Top" Width="130" Height="25"/>
        <Label Content="{Binding Indicator}" HorizontalAlignment="Left" Margin="0,30,0,0" VerticalAlignment="Top" Width="80" Height="30" FontSize="14" FontWeight="Bold" FontFamily="Yu Gothic UI Semibold"/>
    </Grid>
</UserControl>

[UserControlのクラスコード]

    public partial class ActionPanel : UserControl
    {
        public string No
        {
            get { return (string)this.GetValue(ActionPanel.NoProperty); }
            set { this.SetValue(ActionPanel.NoProperty, value); }
        }

        public ActionPanel()
        {
            InitializeComponent();
        }


        public static readonly DependencyProperty NoProperty = DependencyProperty.Register(
            "No",typeof(string),typeof(ActionPanel),
            new FrameworkPropertyMetadata("No", new PropertyChangedCallback(OnNoChanged)));

        private static void OnNoChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ActionPanel ctl = d as ActionPanel; //null checks omitted
            string s = e.NewValue as string; //null checks omitted
            if(ctl== null || s == string.Empty)
            {
                ctl.No = "";
            }
            else
            {
                ctl.No = s;
            }
        }
    }

具体的に実現したいこと

Window側に配置した追加・削除ボタンでユーザコントロールを動的に配置したいです。
このとき、縦に並べられればよく、現在Canvasを使って配置しておりますがこれより簡潔な手法があればご教授いただけますと幸いです。

加えて、デフォルトでユーザコントロールを配置した際に表示されるLabelコントロールの「↓」の表示をAnd・Orボタンにより「Or」や「And」に更新したいと思っております。

こうするためには参考にしたURLの通りICommandをユーザコントロール側に実装する必要がありますでしょうか？
もっと良い方法がございましたらご教授いただけますと幸いです。

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

・C#
・VisualStudio 2019
・.Net Framework 4.7.2
・使用しているフレームワーク：Prism

Answer 1

はっきり言って丸投げ感が半端ないですが、どんどんおかしな方向に行っているので回答します（前回回答分ぐらいは反映して頂きたかったのですが。。）

前回の質問では何をしようとしているのかが見えなかったのでスルーしましたが、DependencyPropertyなどは全く必要ありません。
これに関してはPrismが悪いと思っているので、K.KATSU2さんのせいではありません。

ちょっと日本語でうまく説明できないのでコードを見てください。

MainWindow

<Window
  x:Class="Questions334328.Views.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:prism="http://prismlibrary.com/"
  xmlns:viewmodels="clr-namespace:Questions334328.ViewModels"
  xmlns:views="clr-namespace:Questions334328.Views"
  Width="500"
  Height="360"
  d:DataContext="{d:DesignInstance Type=viewmodels:MainWindowViewModel}"
  prism:ViewModelLocator.AutoWireViewModel="True"
  mc:Ignorable="d">

  <Window.Resources>
    <Style TargetType="Button">
      <Setter Property="Margin" Value="10" />
      <Style.Triggers>
        <Trigger Property="Command" Value="{x:Null}">
          <Setter Property="IsEnabled" Value="False" />
        </Trigger>
      </Style.Triggers>
    </Style>
    <DataTemplate DataType="{x:Type viewmodels:ActionPanelViewModel}">
      <views:ActionPanel />
    </DataTemplate>
  </Window.Resources>

  <DockPanel>
    <StackPanel MinWidth="100" DockPanel.Dock="Right">
      <Button Command="{Binding AddCommand}" Content="追加" />
      <Button
        Command="{Binding DelCommand}"
        CommandParameter="{Binding Items/}"
        Content="削除" />
      <Button Command="{Binding Items/OrCommand}" Content="Or" />
      <Button Command="{Binding Items/AndCommand}" Content="And" />
    </StackPanel>

    <DockPanel>
      <DockPanel DockPanel.Dock="Top">
        <Label Content="承認フロー名：" />
        <TextBox />
      </DockPanel>
      <!--  IsSynchronizedWithCurrentItem="True"がないと / が利かないので注意  -->
      <ListBox
        HorizontalContentAlignment="Stretch"
        IsSynchronizedWithCurrentItem="True"
        ItemsSource="{Binding Items}" />
    </DockPanel>
  </DockPanel>
</Window>

using System.Windows;

namespace Questions334328.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

using Prism.Commands;
using Prism.Mvvm;
using System.Collections.ObjectModel;

namespace Questions334328.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        public ObservableCollection<ActionPanelViewModel> Items { get; } = new ObservableCollection<ActionPanelViewModel>();

        public DelegateCommand AddCommand { get; }
        public DelegateCommand<ActionPanelViewModel> DelCommand { get; }

        public MainWindowViewModel()
        {
            AddCommand = new DelegateCommand(ExecuteAddCommand);
            DelCommand = new DelegateCommand<ActionPanelViewModel>(ExecuteDelCommand, CanExecuteDelCommand)
                .ObservesProperty(() => Items.Count); // アイテムがなければ押せない どのプロパティを監視してCanExecuteDelCommandを走らせるかをラムダ式（式木）で指定
        }

        private void ExecuteAddCommand()
        {
            Items.Add(new ActionPanelViewModel { No = Items.Count + 1, });
        }

        private bool CanExecuteDelCommand(ActionPanelViewModel arg)
        {
            return 0 < Items.Count;
        }
        private void ExecuteDelCommand(ActionPanelViewModel item)
        {
            Items.Remove(item);
            for (var i = 0; i < Items.Count; i++) Items[i].No = i + 1; // No振り直し
        }
    }
}

ActionPanel

<UserControl
  x:Class="Questions334328.Views.ActionPanel"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:viewmodels="clr-namespace:Questions334328.ViewModels"
  d:DataContext="{d:DesignInstance Type=viewmodels:ActionPanelViewModel}"
  d:DesignHeight="60"
  d:DesignWidth="340"
  mc:Ignorable="d">
  <StackPanel>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="20" />
        <ColumnDefinition Width="173*" />
        <ColumnDefinition Width="130*" />
      </Grid.ColumnDefinitions>
      <TextBlock FontSize="14" Text="{Binding No}" />
      <ComboBox
        Grid.Column="1"
        Margin="10,0"
        DisplayMemberPath="DisplayValue"
        ItemsSource="{Binding People}"
        SelectedItem="{Binding SelectedAuthority, Mode=TwoWay}"
        SelectedValue="Value" />
      <ComboBox
        Grid.Column="2"
        Margin="10,0"
        DisplayMemberPath="DisplayValue"
        ItemsSource="{Binding Authority}"
        SelectedItem="{Binding SelectedAuthority, Mode=TwoWay}"
        SelectedValue="Value" />
    </Grid>

    <Label
      Content="{Binding Indicator}"
      FontFamily="Yu Gothic UI Semibold"
      FontSize="14"
      FontWeight="Bold" />
  </StackPanel>
</UserControl>

using System.Windows.Controls;

namespace Questions334328.Views
{
    public partial class ActionPanel : UserControl
    {
        public ActionPanel()
        {
            InitializeComponent();
        }
    }
}

using Prism.Commands;
using Prism.Mvvm;
using System;

namespace Questions334328.ViewModels
{
    public class ActionPanelViewModel : BindableBase
    {
        private int _No;
        public int No { get => _No; set => SetProperty(ref _No, value); }

        private string _Indicator = "↓";
        public string Indicator { get => _Indicator; set => SetProperty(ref _Indicator, value); }

        public DelegateCommand OrCommand { get; }
        public DelegateCommand AndCommand { get; }

        public ActionPanelViewModel()
        {
            OrCommand = new DelegateCommand(ExecuteOrCommand/*() => Indicator = "Or"*/);
            AndCommand = new DelegateCommand(ExecuteAndCommand/*() => Indicator = "And"*/);
        }

        private void ExecuteOrCommand()
        {
            Indicator = "Or";
        }
        private void ExecuteAndCommand()
        {
            Indicator = "And";
        }
    }
}

質問コードではItemがDataTemplateでActionPanelになり、DataContextにActionPanelViewModelがインジェクションされるという流れです。
ロジック上は不要なItemがあったり、ViewModelがインジェクションされるため「どういじればいいんだ？」となります。

回答コードはActionPanelViewModelがDataTemplateでActionPanelになり、DataContextはActionPanelViewModelをそのまま引き継ぎます。
ActionPanelViewModelの増減やプロパティの変更が、そのままViewに反映されます。

言葉以上にシンプルで非常にすっきりしていると感じられると思います^^

OrCommand・AndCommandはActionPanelViewModel側で実装しましたが、メイン側に移したければDelCommandと同じようにするだけです。

{Binding Items/}等の/については↓を参照してください。
データ バインディングの概要 - WPF .NET Framework | Microsoft Docs

方法: 階層データでマスター詳細パターンを使用する - WPF .NET Framework | Microsoft Docs

---

過去にも何度かPrism関連で回答しているのですが、おかしなことになっていることが非常に多いです。
PrismはUserControl・ViewModelをセットで生成するため、こういった勘違いを誘発している気がします。

WPFに精通した方が大規模開発する場合は有用なんだろうとは思いますが、私はどうも好きになれません^^;

Comments

[K.KATSU2]

引き続きご回答くださり誠にありがとうございます。
xamlによるデザイン（コントロール配置）など大変勉強になりました。

現在、コードビハインド側を勉強しているところですが、
（いったんそのままコードを使用させているつもりですが）
追加ボタンを押下しても「No」がインクリメントされないところや
Andボタンや Orボタンを押下しても「↓」が「And」や「Or」の表示に変わらない
状態となっている状況です。
自力で解決できるのが私としても理想ですが、この点について何かご共有いただけることが
ございましたらご教授いただけますと幸いです。

加えて、ラムダ式のような「_ => 」の表現は初めて見ました。
これはどういう動きになりますでしょうか？

[TN8001]

> 追加ボタンを押下しても「No」がインクリメントされないところ

ExecuteAddCommand() 自体は通ってるわけですね？（アイテムは増える）

> Andボタンや Orボタンを押下しても「↓」が「And」や「Or」の表示に変わらない

押せるようにはなるんですね？（選択してボタンの活性が変わる）

どちらも一番ありそうなのはActionPanelの
ViewModelLocator.AutoWireViewModel="True"
が残ってるパターンですね。"False"にしてください。
Prism 8.0から既定でオンになっているので注意です。

> 加えて、ラムダ式のような「_ => 」の表現は初めて見ました。
> これはどういう動きになりますでしょうか？

_ => 0 < Items.Count
ここのことでしょうか？これはラムダ式です。
回答をできるだけメソッドに書き換えました。どうでしょうか？

[K.KATSU2]

ご回答くださり誠にありがとうございます。

「ViewModelLocator.AutoWireViewModel="True"」が原因でした。

「_ => 0 < Items.Count」は返り値に”0 < Items.Count”の評価がTrueかFalseで返ると認識しておりますが、引数に_を指定すると何を意味することになりますでしょうか？

[TN8001]

あぁ _ が引っかかってたのですね。
まあ xでもaでもitemでも何でもいいのですが、使うつもりのない変数に慣例的に _ を使ったりしていました。

しかし最近のC#では本当に使えなくなっています。
[破棄 - C# ガイド | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/csharp/discards

DelCommandは何を削除をするかのために引数で選択中のアイテムをCommandParameterで渡す必要がありますが、CanExecuteDelCommandには選択中のアイテムは必要ありません。
総数が０以上かが分かればいい（アイテムがないときは削除ボタンは不活性）ので「引数を使いません」という表明です。

とはいえxと書いても誰も文句は言いませんｗ

[TN8001]

本当は未選択時もDelボタンを押せないというほうがいいですね。

しかしViewModelに選択中のアイテムのようなプロパティが必要になるし、本題ではないのでそこまでやりませんでした^^;

[K.KATSU2]

ご回答ありがとうございます。本当に勉強になります。