【C#(MVVM)】StackPanelをViewModel側で保持したい

Question

StackPanelに動的にTextBlockを追加するため
ViewModel側でStackPanelを保持したいです。

コードビハインドでは「spanel.Children.Add(textBlock);」のように書くことができますが、
MVVMのViewModelで記載するにはどのようにすれば良いのでしょうか。
(DataContextにバインディングしようとしましたが、できていない気がします。)

イメージは下記のコードのLabelのように
ViewwModel側はプロパティで状態を保持し、変更がある度、
更新されるようにしたいです。
よろしくお願いします。

■View側

<Window x:Class="Test1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Test1"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <vm:Test1ViewModel />
    </Window.DataContext>
    <Grid>
        <StackPanel
            DataContext="{Binding TestStackPanel}"/>
        <Label
            Content="{Binding TestLabel}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </Grid>
</Window>

■ViewModel側

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;

namespace Test1
{
    class Test1ViewModel : ViewModelBase
    {
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public Test1ViewModel()
        {
            ShowList();
        }

        private string _testLabel = "初期値";
        public string TestLabel 
        {
            get { return _testLabel; }
            set 
            {
                if (value == _testLabel)
                {
                    return;
                }                
            }
        }

        private StackPanel _testStackPanel = new StackPanel();
        public StackPanel TestStackPanel
        {
            get { return _testStackPanel; }
            set
            {
                if (value == _testStackPanel)
                {
                    return;
                }
            }
        }


        private List<string> _itemList = new List<string>();
        private void ShowList() 
        {
            _itemList.Add("テスト1");
            _itemList.Add("テスト2");
            _itemList.Add("テスト3");

            foreach (var item in _itemList)
            {
                // TextBlockのInlinesプロパティにRunを入れ込む
                var txtblock = new TextBlock();
                
                txtblock.Inlines.Add(new Run
                {
                    Text = item,
                    Foreground = new SolidColorBrush(Colors.Red)
                });

                // ここで動的に作成したTextBlockを追加したい
                // コードビハインドでは「spanel.Children.Add(textBlock); 」のように書ける
                TestStackPanel.Children.Add(txtblock);
            }
        }

    }
}

(ViewModelBase)

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace Test1
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Equals(storage, value)) return false;
            storage = value;
            return true;
        }
    }
}

Comments

[Zuishin]

それは MVVM ではありません。

[k_mail]

StackPanelに動的にTextBlockを追加するには
どのように書くのが良いのでしょうか

[Zuishin]

MVVM を使わないのであれば、好きなようにすればいいのでは？
ViewModel を無視してコードビハインドで TextBlock のインスタンスを作って追加するのが簡単だと思います。

[Zuishin]

MVVM を使うのであれば ItemsSource にバインドします。

ググってみつかったサンプルにリンクしましたが、不適切だったので削除しました。

[k_mail]

承知しました。
確認します。
ありがとうございます。

Answer 1

StackPanelに動的にTextBlockを追加するため
ViewModel側でStackPanelを保持したいです。

MVVMではWindows Forms的な考え方は捨ててください。
「Windows Forms的な考え方」とは、

コードビハインドでは「spanel.Children.Add(textBlock);」のように書く

のようなことです。
まったく手法が違うので最初は頭の切り替えが大変なのですが、ここがWPFの肝ですし頑張ってください（WPFでもWindows Forms的にコードビハインドでガリガリ書くのを否定するつもりはありません）

MVVMについては良記事がたくさんありますので、検索してください^^;

---

今回の目標は「StackPanelに動的にTextBlockを追加」ということですね。

「StackPanel」ということは、アイテムが複数あるということです。
そして「動的」ということは、アイテムの増減があるということです。

この時点で、

• ViewではItemsControl（ListBoxやDataGrid等も含む）を使う
• ViewModelではObservableCollectionを使う

ことが確定します（もうそういうもんだと覚えてください^^;

ItemsControl 攻略 ～ 外観のカスタマイズ | grabacr.nét

ObservableCollection<T> クラス (System.Collections.ObjectModel) | Microsoft Docs

コードを見てもらったほうが早いですが、ViewModelでは文字列のコレクションとして保持し、Viewでその文字列をDataTemplateでTextBlock.Runに展開する感じです^^

<Window
  x:Class="Questions376475.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions376475"
  Width="525"
  Height="350">
  <Window.DataContext>
    <local:ViewModel />
  </Window.DataContext>
  <DockPanel>
    <Label Content="{Binding TestLabel}" DockPanel.Dock="Top" />

    <Button
      Command="{Binding AddCommand}"
      Content="Add"
      DockPanel.Dock="Bottom" />

    <ItemsControl ItemsSource="{Binding ItemList}">
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <TextBlock>
            <Run Foreground="Red" Text="{Binding .}" />
          </TextBlock>
          <!--<TextBlock Foreground="Red" Text="{Binding .}" />-->
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </DockPanel>
</Window>

using System.Collections.ObjectModel;
using System.Windows;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace Questions376475
{
    public class ViewModel : ObservableObject // ViewModelBase
    {
        private string _testLabel = "初期値";
        public string TestLabel
        {
            get => _testLabel;
            set => SetProperty(ref _testLabel, value);
        }

        public ObservableCollection<string> ItemList { get; }

        public RelayCommand AddCommand { get; }


        public ViewModel()
        {
            ItemList = new ObservableCollection<string>
            {
                "テスト1",
                "テスト2",
                "テスト3",
            };

            AddCommand = new RelayCommand(Add);
        }

        private void Add()
        {
            ItemList.Add($"テスト{ItemList.Count + 1}");

            TestLabel = $"{ItemList.Count}個です";
        }
    }

    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();
    }
}

ViewModelBaseやICommand実装を書くのがだるいので、下記を使用しました。
NuGet Gallery | CommunityToolkit.Mvvm 7.1.2

Introduction to the MVVM Toolkit - Windows Community Toolkit | Microsoft Docs

Comments

[k_mail]

ご丁寧な
ご回答ありがとうございます。
「DataTemplate」調べてみます。

[k_mail]

私の環境でもできました。
ありがとうございます！！

再質問でもすいません。
xamlに「{Binding .}」という記載があるのですが、
これはどのサイトを見れば理解できるのでしょうか。
{Binding }にはプロパティ名を指定しないといけないと思うのですが、
なぜドットにしても動いているのでしょうか。。
「xaml{Binding .}」や「WPF {Binding .}」などで
検索してもヒットしないため、検索方法(調べ方)や参考サイトを
ご教示頂きたいです。
よろしくお願いします。

[TN8001]

実はちょっと「突っ込まれるかな？」と思っていましたｗ

私の理解では{Binding}・{Binding Path=.}・{Binding .}は同じ意味だと思っています。
しかし{Binding}だとデザイナがエラーになってしまった（実行はできる）ので、仕方なく付けました^^;

> xamlに「{Binding .}」という記載があるのですが、
>これはどのサイトを見れば理解できるのでしょうか。

公式だとこのあたりでしょうか？

[Binding.Path プロパティ (System.Windows.Data) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.data.binding.path?view=net-6.0#--

[バインドのマークアップ拡張機能 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/advanced/binding-markup-extension?view=netframeworkdesktop-4.8

ググるとすると「wpf binding path」あたりがいいと思います。

[wpf binding path - Google 検索](https://www.google.com/search?q=wpf+binding+path

[【WPF】【XAML】Hoge="{Binding Path='.'}"のPath='.'って何？ | 創造的プログラミングと粘土細工](http://pro.art55.jp/?eid=871963

[What does "{Binding Path=.}" mean in WPF binding? - Stack Overflow](https://stackoverflow.com/questions/1066262/what-does-binding-path-mean-in-wpf-binding

[k_mail]

ありがとうございます。
確認してみます。