回答編集履歴

見直しキャンペーン中

2023/08/15 10:12

投稿

TN8001

スコア9862

test CHANGED Viewed

@@ -2,24 +2,23 @@
 > ViewModel側でStackPanelを保持したいです。
 MVVMではWindows Forms的な考え方は捨ててください。
-「Windows Forms的な考え方」とは、
+「Windows Forms的な考え方」とは、↓のようなことです。
 > コードビハインドでは「spanel.Children.Add(textBlock);」のように書く
-のようなことです。
 まったく手法が違うので最初は頭の切り替えが大変なのですが、ここがWPFの肝ですし頑張ってください（WPFでもWindows Forms的にコードビハインドでガリガリ書くのを否定するつもりはありません）
 MVVMについては良記事がたくさんありますので、検索してください^^;
 ---
-今回の目標は「StackPanelに動的にTextBlockを追加」ということですね。
+今回の目標は「`StackPanel`に動的に`TextBlock`を追加」ということですね。
 「`StackPanel`」ということは、アイテムが複数あるということです。
 そして「動的」ということは、アイテムの増減があるということです。
 この時点で、
-* `View`では`ItemsControl`（`ListBox`や`DataGrid`等も含む）を使う
+* Viewでは`ItemsControl`（`ListBox`や`DataGrid`等も含む）を使う
-* `ViewModel`では`ObservableCollection`を使う
+* ViewModelでは`ObservableCollection`を使う
 ことが確定します（もうそういうもんだと覚えてください^^;
@@ -27,7 +26,7 @@
 [ObservableCollection<T> クラス (System.Collections.ObjectModel) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0)
-コードを見てもらったほうが早いですが、`ViewModel`では文字列のコレクションとして保持し、`View`でその文字列を`DataTemplate`で`TextBlock.Run`に展開する感じです^^
+コードを見てもらったほうが早いですが、ViewModelでは文字列のコレクションとして保持し、Viewでその文字列を`DataTemplate`で`TextBlock.Run`に展開する感じです^^
 ```xml

見直しキャンペーン中

2023/07/29 13:59

投稿

TN8001

スコア9862

test CHANGED Viewed

@@ -1,235 +1,118 @@
 > 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](http://grabacr.net/archives/1240)
 [ObservableCollection<T> クラス (System.Collections.ObjectModel) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0)
 コードを見てもらったほうが早いですが、`ViewModel`では文字列のコレクションとして保持し、`View`でその文字列を`DataTemplate`で`TextBlock.Run`に展開する感じです^^
-```xaml
+```xml
 <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>
 ```
-```C#
+```cs
 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](https://www.nuget.org/packages/CommunityToolkit.Mvvm/7.1.2)
 [Introduction to the MVVM Toolkit - Windows Community Toolkit | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/communitytoolkit/mvvm/introduction)