TreeView是一个树形结构的控件,能够表现出对象的层级关系,比如文件夹目录展示经常使用。
新建WPF应用程序,在界面上添加TreeView
控件,最直接简单的用法是在TreeView
下添加TreeViewItem
节点,然后设置它的header
,如果你的层级关系固定,内容比较少,可以直接采用这种方式。
<TreeView><TreeViewItemHeader="食物"><TreeViewItemHeader="水果"><TreeViewItemHeader="苹果"></TreeViewItem><TreeViewItemHeader="梨子"></TreeViewItem></TreeViewItem><TreeViewItemHeader="蔬菜"><TreeViewItemHeader="大白菜"></TreeViewItem><TreeViewItemHeader="空心菜"></TreeViewItem></TreeViewItem></TreeViewItem></TreeView>
我们还可以使用绑定的方式进行数据展示,在model中创建TreeNode
类,写法如下,通常我们需要做属性变更通知,需要继承INotifyPropertyChanged
,当然你可以写一个基类(比如:NotifyPropertyObject )去继承这个接口,然后所有需要变更通知的类都继承于这个基类,就像下面的代码一样。
usingSystem; usingSystem.Collections.Generic; usingSystem.ComponentModel; usingSystem.Linq; usingSystem.Runtime.CompilerServices; usingSystem.Text; usingSystem.Threading.Tasks; namespaceDemo.Base{ publicclassNotifyPropertyObject : INotifyPropertyChanged { publiceventPropertyChangedEventHandler?PropertyChanged; publicvoidRaisePropertyChanged([CallerMemberName] StringpropertyName="") { PropertyChanged?.Invoke(this, newPropertyChangedEventArgs(propertyName)); } } }
usingDemo.Base; usingSystem.Collections.ObjectModel; namespaceDemo.Model{ publicclassTreeNode : NotifyPropertyObject { privatestringm_Name; publicstringName { get { returnm_Name; } set { m_Name=value; this.RaisePropertyChanged(Name); } } privateboolm_IsChecked=false; publicboolIsChecked { get { returnm_IsChecked; } set { m_IsChecked=value; this.RaisePropertyChanged("IsChecked"); } } privateObservableCollection<TreeNode>m_Children=newObservableCollection<TreeNode>(); publicObservableCollection<TreeNode>Children { get { returnm_Children; } set { m_Children=value; this.RaisePropertyChanged("Children"); } } } }
接下来,我们可以在ViewModel里头进行数据处理逻辑编写,并将界面的DataContext绑定到你的逻辑处理类中,这样我们就能够在界面上显示我们需要的数据了。
usingDemo.Base; usingDemo.Model; usingSystem.Collections.ObjectModel; publicclassTreeViewDemoViewModel: NotifyPropertyObject{ privateObservableCollection<TreeNode>m_TreeNodes=newObservableCollection<TreeNode>(); publicObservableCollection<TreeNode>TreeNodes { get { returnm_TreeNodes; } set { m_TreeNodes=value; this.RaisePropertyChanged("TreeNodes"); } } publicTreeViewDemoViewModel() { TreeNodefruits=newTreeNode(); fruits.Name="水果"; TreeNodeapple=newTreeNode(); apple.Name="苹果"; TreeNodePear=newTreeNode(); Pear.Name="梨子"; fruits.Children.Add(apple); fruits.Children.Add(Pear); TreeNodevegetables=newTreeNode(); vegetables.Name="蔬菜"; TreeNodecabbage=newTreeNode(); cabbage.Name="卷心菜"; TreeNodewaterspinach=newTreeNode(); waterspinach.Name="空心菜"; vegetables.Children.Add(cabbage); vegetables.Children.Add(waterspinach); TreeNodefoods=newTreeNode(); foods.Name="食物"; foods.Children.Add(fruits); foods.Children.Add(vegetables); TreeNodes.Add(foods); } }
<TreeViewItemsSource="{Binding TreeNodes}"><TreeView.ItemTemplate><HierarchicalDataTemplateItemsSource="{Binding Children}"><LabelContent="{Binding Name}"/></HierarchicalDataTemplate></TreeView.ItemTemplate></TreeView>
usingDemo.View; usingSystem.Windows; namespaceTreeViewDemo{ /// <summary>/// Interaction logic for App.xaml/// </summary>publicpartialclassApp : Application { protectedoverridevoidOnStartup(StartupEventArgse) { TreeViewDemoViewtreeViewDemoView=newTreeViewDemoView(); TreeViewDemoViewModeltreeViewDemoViewModel=newTreeViewDemoViewModel(); treeViewDemoView.DataContext=treeViewDemoViewModel; treeViewDemoView.Show(); } } }
效果预览