MVVM において TreeView をバインドするための段階的チュートリアル

2年 ago
蓮, 翼
1 minute

MVVMでTreeViewをバインドするためのネイティブな日本語でのステップバイステップガイドを以下に示します。

ステップ1：新しいWPFプロジェクトを作成します。プロジェクトにViewModelクラスとModelクラスを追加します。ViewModelクラスには、TreeViewにバインドするためのデータとコマンドが含まれ、Modelクラスには実際データが含まれます。

ステップ2：ViewModelクラスでTreeViewのノードを格納するためのObservableCollectionプロパティを宣言する。

private ObservableCollection<TreeNode> _nodes;
public ObservableCollection<TreeNode> Nodes
{
get { return _nodes; }
set
{
_nodes = value;
OnPropertyChanged("Nodes");
}
}

ステップ3：Modelクラスで、TreeViewのノードを表すTreeNodeクラスを定義します。TreeNodeクラスには、名前プロパティと子ノードのコレクションが含まれます。

public class TreeNode
{
public string Name { get; set; }
public ObservableCollection<TreeNode> Children { get; set; }
}

ステップ4：ViewModelクラスのコンストラクタ内でTreeViewのサンプルデータを作成する。

public MainViewModel()
{
Nodes = new ObservableCollection<TreeNode>()
{
new TreeNode()
{
Name = "Node 1",
Children = new ObservableCollection<TreeNode>()
{
new TreeNode() { Name = "Subnode 1.1" },
new TreeNode() { Name = "Subnode 1.2" }
}
},
new TreeNode()
{
Name = "Node 2",
Children = new ObservableCollection<TreeNode>()
{
new TreeNode() { Name = "Subnode 2.1" },
new TreeNode() { Name = "Subnode 2.2" }
}
}
};
}

ステップ5：MainWindow.xamlにTreeViewコントロールを追加し、そのItemsSourceプロパティをViewModelのNodesプロパティにバインドする。

<TreeView ItemsSource="{Binding Nodes}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>

ステップ6：MainWindow.xaml.cs において MainWindow の DataContext を ViewModel のインスタンスに設定します。

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
}

TreeView にバインドされたノードと、子ノードが表示されるようになりました。ViewModel の Nodes プロパティでノードを追加、削除、または変更することで、TreeView の内容を動的に変更できます。

bannerAds