WPF的TreeView数据绑定基础
在WPF中的TreeView数据绑定和以往的ASP.NET、WinForm有着非常大的区别,虽然也可以支持DataTable或者ArrayList、字典类型等数据绑定,但是在WPF中的TreeView中的多级树目录数据绑定就和ASP.NET、WinForm上有根本上的区别。WPF中的TreeView已经不能用TreeNode来循环节点了,这在之前的ASP.NET和WinFrom中是由TreeNode将数据表循环到子级节点上。在WPF的TreeView需要通过泛型List<成员类>来完成子级程序添加。在本文中将完成对TreeView数据绑定介绍,也是为 WPF的TreeView从数据库绑定数据 文章的一个基础铺垫。
WPF的TreeView简单绑定
先将TreeView分别绑定简单的Hashtable数据类型和ArrayList类型数据,这里很简单可以看到都能支持其数据的绑定显示。在Hashtable GetTable()中返回了Hashtable City,而Hashtable City中添加了 City.Add("北京", "1");City.Add("上海", "2");City.Add("广州", "3");,在 GetTable()中return City;。在ArrayList GetList()中返回了ArrayList myList,ArrayList myList加入了myList.Add("北京");myList.Add("上海");myList.Add("广州");。这里没有什么难度简单加入值然后绑定即可(数据直接赋值给TreeView的ItemsSource即可)。下图动画显示为两个数据类型分别绑定到TreeView显示效果。
WPF的TreeView泛型List绑定和子级节点绑定
将TreeView进行多极子级节点绑定,这里需要建立泛型方法。先建立City类,City类中的成员为int cityId(为Id)、string cityName(为城市名)、List<City> ChildItem(City的子级成员,比如城市下面分区;例如北京--东城区)。
建立泛型List<City>数据列表,将City类成员属性加入数值,建立List<City> GetCity()返回 List<City> myItem,在myItem中加入cityId、cityName实际值。在xaml前台代码中TreeView的<TreeView.ItemTemplate>设置 <HierarchicalDataTemplate>用以绑定节点和子级节点绑定,在这里主要看<HierarchicalDataTemplate>中的<TextBlock Text="{Binding Path=cityName}" />绑定了城市名, 如下图可看到通过泛型List绑定的效果(这里绑定一级目录)。
TreeView泛型List子级节点绑定
深入TreeView的子级节点绑定,在List<City> GetCity()的List<City> myItem中的ChildItem加入子节点,加入所属城市的子级成员。上面一步已经建了北京/Beijing和上海/Shanghai两个城市目录,在这里完成它两者的子级分区,下面是绑定效果和详细List数据代码。
private List<City> GetCity() { List<City> myItem = new List<City>(); myItem.Add(new City() { cityId = 1, cityName = "北京/Beijing", //子级 ChildItem = new List<City>() { new City{ cityName="朝阳" //子级 }, new City { cityName="海淀"}, new City{ cityName="丰台"}, new City {cityName="宣武" //子级 }, new City {cityName="崇文"}} }); myItem.Add(new City() { cityId = 3, cityName = "上海/Shanghai", //子级 ChildItem = new List<City>() { new City{ cityName="浦东"}, new City { cityName="黄埔"}, new City{ cityName="徐汇"}, new City {cityName="普陀"}, new City {cityName="长宁"}} }); return myItem; }
最后进一步完善,加入分区的子级,以及加入其它城市的单元,并且让TreeView响应SelectedItemChanged事件,让选取节点时将值赋给Label显示。下面是完整代码。
public MainWindow() { InitializeComponent(); label1.Content = "^…"; treeView.ItemsSource = GetCity(); treeView1.ItemsSource = GetList(); treeView2.ItemsSource = GetTable().Keys; } /// <summary> /// GetTable() ->构建Hashtable数据 /// </summary> /// <returns></returns> private Hashtable GetTable() { Hashtable City = new Hashtable(); City.Add("北京", "1"); City.Add("上海", "2"); City.Add("广州", "3"); City.Add("Hashtable", "4"); return City; } /// <summary> /// GetList() -> 构建ArrayList数据 /// </summary> /// <returns></returns> private ArrayList GetList() { ArrayList myList = new ArrayList(); myList.Add("北京"); myList.Add("上海"); myList.Add("广州"); myList.Add("ArrayList"); return myList; } /// <summary> /// GetCity() -> 构建泛型List数据 /// </summary> /// <returns></returns> private List<City> GetCity() { List<City> myItem = new List<City>(); myItem.Add(new City() { cityId = 1, cityName = "北京/Beijing", ChildItem = new List<City>() { new City{ cityName="朝阳", ChildItem=new List<City>(){ new City { cityName="建国门"} } }, new City { cityName="海淀"}, new City{ cityName="丰台"}, new City {cityName="宣武", ChildItem=new List<City>(){ new City { cityName="右安门"} }}, new City {cityName="崇文"}} }); myItem.Add(new City() { cityId = 2, cityName = "台北/Taipei", ChildItem = new List<City>() { new City{ cityName="中正区", ChildItem=new List<City>(){ new City { cityName="东门"} }}, new City { cityName="三重区"}, new City{ cityName="中山区"}, new City {cityName="大安区"}, new City {cityName="内湖区"}} }); myItem.Add(new City() { cityId = 3, cityName = "上海/Shanghai", ChildItem = new List<City>() { new City{ cityName="浦东"}, new City { cityName="黄埔"}, new City{ cityName="徐汇"}, new City {cityName="普陀"}, new City {cityName="长宁"}} }); myItem.Add(new City() { cityId = 4, cityName = "香港/Hongkong", ChildItem = new List<City>() { new City{ cityName="湾仔区"}, new City { cityName="九龙城区"}, new City{ cityName="黄大仙区"}, new City {cityName="中西区", ChildItem=new List<City>(){ new City { cityName="半山区"} }}, new City {cityName="东区"}} }); return myItem; } private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e) { label1.Content = ((City)treeView.SelectedItem).cityName; }
如果是从数据读取数据绑定,将数据表对应的字段建立类成员,然后将成员在泛型List中循环传入数值,按照本文的示例方式便可从数据库中读取出来建立动态的节点绑定。关于TreeView更加深入数据库绑定可以参见 WPF的TreeView从数据库绑定数据。