欧美日韩12,精品欧美亚洲,成人日韩视频

如何用MVVM來實現綁定和顯示TreeView控件

轉帖|其它|編輯：郝浩|2011-08-10 14:26:04.000|閱讀 5631 次

概述：最近有部分朋友經常問我，WPF的TreeView控件，如何用MVVM來實現綁定和顯示？所以寫下了這篇WPF應用基礎篇---TreeView.

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

　　最近有部分朋友經常問我，WPF的TreeView控件，如何用MVVM來實現綁定和顯示？所以寫下了這篇WPF應用基礎篇---TreeView.

　1.介紹

案例瀏覽：

　　　　　　　　　　　　　　　　　　圖 1-1（案例結構圖）

目的：本文中做了三個簡單的Demo給剛剛入門或者入門不久而且不熟悉TreeView控件在MVVM中具體實現的朋友們。希望以下3個例子能夠給他們帶來幫助。
背景：Demo是采用現實生活中一個大網絡的某一部分網絡來作為案例。這里為了演示方便，整個網絡由路由器、交換機、集線器等服務器組成。他們的之間的關系是多對多的關系，一個網絡中有可能一個路由器包含了多個路由器、交換機、集線器；而且交換機、集線器也是相同的原理。
數據：本文中用到的數據隨機產生的測試數據。根據界面中樹的深度（下拉框）來選擇樹最多有多少層，然后創建樹結構的數據。這里需要注意的是我們TreeView提供的數據源必須是樹結構的；為什么需要樹結構的數據呢？大家可能會覺得很奇怪，其實，我們ViewModel要將數據Binding到TreeView控件上就必須指定一個ItemsSource，所以必須把節點的子節點集合綁定到模板中的ItemsSource中。
案例解析：

　　整個Demo分為兩部分：左邊是功能菜單，右邊是顯示具體內容，可以參考圖1-1。

　　基礎數據：為了實現一下案例功能，我建立了一個SmlAnt.DataLibrary的數據類庫，專門提供原始基本類型和基本數據。下面是具體代碼：

　　實體類：

  1 namespace DataLibrary
   2 {
   3     /// <summary>
   4     /// 設備狀態
   5     /// </summary>
   6     public enum DeviceStatus
   7     {
   8         Connected,Off
   9     }
10
11     /// <summary>
12     /// 設備基類
13     /// </summary>
14     public class Device:INotifyPropertyChanged
15     {
16         //是否被選中
17         private bool? isSelected;
18         public bool? IsSelected
19         {
20             get { return isSelected; }
21             set
22             {
23                 if (isSelected != value)
24                 {
25                     isSelected = value;
26                     ChangeChildNodes(this);
27                     ChangedParentNodes(this);
28                     NotifyPropertyChanged("IsSelected");
29                 }
30             }
31         }
32
33         private DeviceStatus status;
34         public DeviceStatus Status
35         {
36             get { return status; }
37             set
38             {
39                 if (status != value)
40                 {
41                     status = value;
42                     NotifyPropertyChanged("Status");
43                 }
44             }
45         }
46
47         public string Name { get; set; }
48         public string ImageUrl{get;set;}
49
50         private List<Device> childNodes;
51         public List<Device> ChildNodes
52         {
53             get { return childNodes; }
54             set
55             {
56                 if (childNodes != value)
57                 {
58                     childNodes = value;
59                     NotifyPropertyChanged("ChildNodes");
60                 }
61             }
62         }
63
64         private Device parentNode;
65         public Device ParentNode
66         {
67             get { return parentNode; }
68             set
69             {
70                 if (parentNode != value)
71                 {
72                     parentNode = value;
73                     NotifyPropertyChanged("ParentNode");
74                 }
75             }
76         }
77
78         /// <summary>
79         /// 向下遍歷,更改孩子節點狀態
80         /// 注意：這里的父節點不是屬性而是字段
81         /// 采用字段的原因是因為不想讓父節點觸發訪問器而觸發Setter
82         /// </summary>
83         /// <param name="CurrentNode"></param>
84         public void ChangeChildNodes(Device CurrentNode)
85         {
86             if (ChildNodes != null)
87             {
88                 foreach (var data in childNodes)
89                 {
90                     data.isSelected = CurrentNode.IsSelected;
91                     CurrentNode.NotifyPropertyChanged("IsSelected");
92                     if (data.ChildNodes != null)
93                     {
94                         data.ChangeChildNodes(data);
95                     }
96                 }
97             }
98         }
99
100         /// <summary>
101         /// 向上遍歷,更改父節點狀態
102         /// 注意：這里的父節點不是屬性而是字段
103         /// 采用字段的原因是因為不想讓父節點觸發訪問器而觸發Setter
104         /// </summary>
105         /// <param name="CurrentNode"></param>
106         public void ChangedParentNodes(Device CurrentNode)
107         {
108             if (CurrentNode.ParentNode != null)
109             {
110                 bool? parentNodeState = true;
111                 int selectedCount = 0;  //被選中的個數
112                 int noSelectedCount = 0;    //不被選中的個數
113
114                 foreach (var data in CurrentNode.ParentNode.ChildNodes)
115                 {
116                     if (data.IsSelected == true)
117                     {
118                         selectedCount++;
119                     }
120                     else if (data.IsSelected == false)
121                     {
122                         noSelectedCount++;
123                     }
124                 }
125
126                 //如果全部被選中,則修改父節點為選中
127                 if (selectedCount ==
128                     CurrentNode.ParentNode.ChildNodes.Count)
129                 {
130                     parentNodeState = true;
131                 }
132                 //如果全部不被選中,則修改父節點為不被選中
133                 else if (noSelectedCount ==
134                     CurrentNode.ParentNode.ChildNodes.Count)
135                 {
136                     parentNodeState = false;
137                 }
138                 //否則標記父節點（例如用實體矩形填滿）
139                 else
140                 {
141                     parentNodeState = null;
142                 }
143
144                 CurrentNode.parentNode.isSelected = parentNodeState;
145                 CurrentNode.parentNode.NotifyPropertyChanged("IsSelected");
146
147                 if (CurrentNode.ParentNode.ParentNode != null)
148                 {
149                     ChangedParentNodes(CurrentNode.parentNode);
150                 }
151             }
152         }
153
154         public void NotifyPropertyChanged(string name)
155         {
156             if(PropertyChanged!=null)
157             PropertyChanged(this,new PropertyChangedEventArgs(name));
158         }
159         public event PropertyChangedEventHandler PropertyChanged;
160     }
161
162     /// <summary>
163     /// 路由器
164     /// </summary>
165     public class Router : Device
166     {
167
168     }
169
170     /// <summary>
171     /// 交換機
172     /// </summary>
173     public class Switcher : Device
174     {
175
176     }
177
178     /// <summary>
179     /// 集線器
180     /// </summary>
181     public class Concentrator : Device
182     {
183
184     }
185 }

　　數據工廠:

  1 public class DataFactory
   2     {
   3         /// <summary>
   4         /// 隨機數據產生器
   5         /// </summary>
   6         static Random random = new Random();
   7
   8         /// <summary>
   9         /// 根據參數獲取設備狀態
10         /// </summary>
11         /// <param name="intValue"></param>
12         /// <returns></returns>
13         private static DeviceStatus GetStatus(int intValue)
14         {
15             return intValue % 2 == 0 ? DeviceStatus.Off : DeviceStatus.Connected;
16         }
17
18         /// <summary>
19         ///
20         /// </summary>
21         /// <param name="intValue"></param>
22         /// <returns></returns>
23         private static String GetName(int intValue)
24         {
25             string refValue = "路由器";
26             if (intValue % 3 == 0)
27             {
28                 refValue = "路由器";
29             }
30             else if (intValue % 3 == 1)
31             {
32                 refValue = "交換機";
33             }
34             else
35             {
36                 refValue = "集線器";
37             }
38             return refValue;
39         }
40
41         /// <summary>
42         /// 根據參數創建設備（簡單工廠-參數工廠）
43         /// </summary>
44         /// <param name="typeValue"></param>
45         /// <returns></returns>
46         public static Device DeviceFactory(int typeValue)
47         {
48             Device refEntity = null;
49             if (typeValue % 3 == 0)
50             {
51                 refEntity = new Router();
52             }
53             else if (typeValue % 3 == 1)
54             {
55                 refEntity = new Switcher();
56             }
57             else
58             {
59                 refEntity = new Concentrator();
60             }
61             return refEntity;
62         }
63
64         /// <summary>
65         /// 隨即獲取基類設備數據
66         /// </summary>
67         /// <param name="level">當前節點所在層</param>
68         /// <param name="MaxLevel">樹最大深度</param>
69         /// <returns>設備樹</returns>
70         public static List<Device> GetBaseTypeDevices(int level, int MaxLevel)
71         {
72             level++;
73             var count = random.Next(6, 10);
74             List<Device> listTo = new List<Device>();
75             for (int i = 1; i < count; i++)
76             {
77                 Device entity = new Device();
78                 var typeValue = random.Next(1, 6);
79                 entity.Name = GetName(typeValue);
80                 entity.ImageUrl = "..\\..\\Resource\\" + entity.Name + ".png";
81                 entity.Status = GetStatus(typeValue);
82                 if (level <= MaxLevel)
83                     entity.ChildNodes = GetBaseTypeDevices(level, MaxLevel);
84                 listTo.Add(entity);
85             }
86             return listTo;
87         }
88
89         /// <summary>
90         /// 隨即獲取所有子類型設備數據
91         /// </summary>
92         /// <param name="level">當前節點所在層</param>
93         /// <param name="MaxLevel">樹最大深度</param>
94         /// <returns>設備樹</returns>
95         public static List<Device> GetAllTypeDevice(int level,int MaxLevel)
96         {
97             level++;
98             var count = random.Next(6, 10);
99             List<Device> listTo = new List<Device>();
100             for (int i = 1; i < count; i++)
101             {
102                 var typeValue = random.Next(1, 6);
103                 Device entity = DeviceFactory(typeValue);
104                 entity.Name = GetName(typeValue);
105                 entity.ImageUrl = "..\\..\\Resource\\" + entity.Name + ".png";
106                 entity.Status = GetStatus(typeValue);
107                 if (level <= MaxLevel)
108                     entity.ChildNodes = GetAllTypeDevice(level,MaxLevel);
109                 listTo.Add(entity);
110             }
111             return listTo;
112         }
113
114         /// <summary>
115         /// 隨即獲取所有子類型設備數據
116         /// </summary>
117         /// <param name="level">當前節點所在層</param>
118         /// <param name="MaxLevel">樹最大深度</param>
119         /// <param name="parentNode">父節點</param>
120         /// <returns>設備樹</returns>
121         public static List<Device> GetAllTypeDevice
(int level, int MaxLevel, Device parentNode)
122         {
123             level++;
124             var count = random.Next(6, 10);
125             List<Device> listTo = new List<Device>();
126             for (int i = 1; i < count; i++)
127             {
128                 var typeValue = random.Next(1, 6);
129                 Device entity = DeviceFactory(typeValue);
130                 entity.IsSelected = false;
131                 entity.Name = GetName(typeValue);
132                 entity.ParentNode = parentNode;
133                 entity.ImageUrl = "..\\..\\Resource\\" + entity.Name + ".png";
134                 entity.Status = GetStatus(typeValue);
135                 if (level <= MaxLevel)
136                     entity.ChildNodes = GetAllTypeDevice(level, MaxLevel, entity);
137                 listTo.Add(entity);
138             }
139             return listTo;
140         }
141     }

　　案例一，主要為大家介紹如何創建一個無限級的樹，其實說簡單點就是采用HierarchicalDataTemplate 作為樹模板，然后通過Binding把數據綁定到樹上。因為模板是HierarchicalDataTemplate這個模板,這里就不詳細講解，如果了解多點可以到MSDN，所以會無限級別的增加，只要數據結構上能支持，數據有多少級別，View中顯示的樹也會對應有多少級別。而如果采用的是DataTemplate的話，則只能有一層的數據。

　　效果圖如下：

　　　　　　　　圖 1-2（無限級別樹）

　　View(XAML)代碼代碼1-3：

1 <HierarchicalDataTemplate x:Key=
"TreeViewTemplate" ItemsSource="{Binding ChildNodes}">
2             <StackPanel Orientation="Horizontal">
3                 <Image Source="{Binding ImageUrl}" Margin="2"/>
4                 <TextBlock Text="{Binding Name}" Margin="2"/>
5             </StackPanel>
6         </HierarchicalDataTemplate>
7
8 <TreeView Grid.Row="1" ItemTemplate=
"{StaticResource TreeViewTemplate}" ItemsSource=

"{Binding DataSource}" Margin="5"/>　　

　　ViewModel代碼：

1 private List<Device> dataSource;
2         public List<Device> DataSource
3         {
4             get { return dataSource; }
5             set
6             {
7                 if (dataSource != value)
8                 {
9                     dataSource = value;
10                     RaisePropertyChanged("DataSource");
11                 }
12             }
13         }
14
15 DataSource = DataFactory.GetBaseTypeDevices(1, SelectedLevel);　

　　案例二，主要給大家講解的是，如何采用DataTmeplateSelector通過重寫SelectTemplate方法來實現的。來控制顯示樣式、右鍵菜單等功能。這里主要講的是，不同服務器之間顯示不一樣，而且連快捷菜單也對應不一樣。這里有個特別說明的是：因為功能顯示的需求，這里把集線器定義為沒有子設備的模板。還有另外一個功能就是當我按下重啟的時候，斷開按鈕就不能使用。這里用到的是Command。園里前輩們寫了很多這方面的文章，我這里就不對 ICommand進行詳細討論。

　　效果圖：圖1-1

　　快捷菜單（如下圖）：

圖 1-3（路由器快捷菜單）　圖 1-4（交換機快捷菜單） ; 圖1-5（集線器快捷菜單）

　　快捷菜單代碼：

1 <ContextMenu x:Key="RouterMenu">
2             <MenuItem Header="啟動路由器">
3                 <MenuItem.Icon>
4                     <Image Source="..\..\Resource\Connect.png"/>
5                 </MenuItem.Icon>
6             </MenuItem>
7             <MenuItem Header="斷開路由器">
8                 <MenuItem.Icon>
9                     <Image Source="..\..\Resource\Break.png"/>
10                 </MenuItem.Icon>
11             </MenuItem>
12         </ContextMenu>
13         <ContextMenu x:Key="SwitchMenu">
14             <MenuItem Header="啟動交換機">
15                 <MenuItem.Icon>
16                     <Image Source="..\..\Resource\Connect.png"/>
17                 </MenuItem.Icon>
18             </MenuItem>
19             <MenuItem Header="斷開交換機">
20                 <MenuItem.Icon>
21                     <Image Source="..\..\Resource\Break.png"/>
22                 </MenuItem.Icon>
23             </MenuItem>
24         </ContextMenu>
25         <ContextMenu x:Key="ConcentratorMenu">
26             <MenuItem Header="啟動集線器">
27                 <MenuItem.Icon>
28                     <Image Source="..\..\Resource\Connect.png"/>
29                 </MenuItem.Icon>
30             </MenuItem>
31             <MenuItem Header="斷開集線器">
32                 <MenuItem.Icon>
33                     <Image Source="..\..\Resource\Break.png"/>
34                 </MenuItem.Icon>
35             </MenuItem>
36         </ContextMenu>

　　TreeView模板代碼：

1 xmlns:LocalTmeplate="clr-namespace:Smlant.DataTemplates"
2
3 <LocalTmeplate:ContextMenuDataTemplateSelector x:Key=
"ContextMenuDataTemplateSelector"/>
4
5 
6         <HierarchicalDataTemplate x:Key="SwitchTemplate" ItemsSource="{Binding ChildNodes}" DataType="{x:Type DataLib:Switcher}">
7             <StackPanel Orientation="Horizontal" ContextMenu=
"{StaticResource SwitchMenu}">
8         <Image Source="{Binding ImageUrl}" Margin="2"/>
9      <TextBlock Text="{Binding Name}" Margin="2" VerticalAlignment="Center"/>
10                 <Button Margin="2" Command=
"{Binding DataContext.OffCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
11                         CommandParameter="{Binding}">
12                     <StackPanel>
13                         <Image Source="..\..\Resource\Connect.png" ToolTip="重新連接"/>
14                     </StackPanel>
15                 </Button>
16                 <Button Margin="2" Command="{Binding DataContext.ConnectionCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
17                         CommandParameter="{Binding}">
18                     <StackPanel>
19                         <Image Source="..\..\Resource\Break.png" ToolTip="斷開連接"/>
20                     </StackPanel>
21                 </Button>
22             </StackPanel>
23         </HierarchicalDataTemplate>
24         
25         <HierarchicalDataTemplate x:Key="RouterTemplate" ItemsSource="{Binding ChildNodes}" DataType="{x:Type DataLib:Router}">
26        <StackPanel Orientation="Horizontal" ContextMenu=
"{StaticResource RouterMenu}">
27    <Image Source="{Binding ImageUrl}" Margin="2"/>
28         <TextBlock Text="{Binding Name}" Margin="2" VerticalAlignment="Center"/>
29                 <Button Margin="2" Content="重啟路由" Command="{Binding DataContext.OffCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
30                         CommandParameter="{Binding}">
31                 </Button>
32                 <Button Margin="2" Content="斷開連接"  Command="{Binding DataContext.ConnectionCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
33                         CommandParameter="{Binding}">
34                 </Button>
35             </StackPanel>
36         </HierarchicalDataTemplate>
37         
38         <DataTemplate x:Key="ConcentratorTemplate" DataType=
"{x:Type DataLib:Concentrator}">
39             <StackPanel Orientation="Horizontal" ContextMenu=

"{StaticResource ConcentratorMenu}">
40                 <Image Source="{Binding ImageUrl}" Margin="2"/>
41        <TextBlock Text="{Binding Name}" Margin="2" VerticalAlignment="Center"/>
42                 <Button Margin="2" Content="重新連接" Command="{Binding DataContext.OffCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
43                         CommandParameter="{Binding}"/>
44                 <Button Margin="2" Content="斷開連接"  Command="{Binding DataContext.ConnectionCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
45                         CommandParameter="{Binding}"/>
46             </StackPanel>
47         </DataTemplate>

　　DataTemplateSelector代碼：

1 public class ContextMenuDataTemplateSelector:DataTemplateSelector
2     {
3         public override System.Windows.DataTemplate SelectTemplate
(object item, System.Windows.DependencyObject container)
4         {
5             FrameworkElement element = container as FrameworkElement;
6             DataTemplate template = null;
7             if (item is Router)
8             {
9         template = element.FindResource("RouterTemplate")
as HierarchicalDataTemplate;
10             }
11             else if (item is Switcher)
12             {
13     template = element.FindResource("SwitchTemplate")

as HierarchicalDataTemplate;
14             }
15             else if (item is Concentrator)
16             {
17        template = element.FindResource
("ConcentratorTemplate") as DataTemplate;
18             }
19             return template;
20         }
21     }

　　ViewModel代碼：　　

1 private List<Device> dataSource;
2         public List<Device> DataSource
3         {
4             get { return dataSource; }
5             set
6             {
7                 if (dataSource != value)
8                 {
9                     dataSource = value;
10                     RaisePropertyChanged("DataSource");
11                 }
12             }
13         }
14
15  DataSource = DataFactory.GetAllTypeDevice(1, SelectedLevel);

　　案例三，主要跟大家分享的是，如何在TreeView上實現三態樹的功能。具體什么是三態樹的話我在這里就不多說了。以下是案例三的具體結構圖和代碼：

　　結構圖：

　　　　圖 1-6（三態樹）

　　代碼：具體代碼實現在上面的實體類代碼的 IDevice中實現。請參考上面代碼。

　　2.個人觀點

　　很多朋友都抱怨說WPF的TreeView是一個很麻煩的東西，而且不好用。這點我持反對的意見，每一種新東西，在我們還不熟悉的時候，是挺麻煩的。但是 WPF--TreeView較WinForm--Tree來說，WPF提供一個強大的模板功能，能讓我們根據自己的需要，靈活地更換模板。如果在做 WinForm開發的時候，我想實現一棵樹上保存N種數據類型的數據，而且根據不同的類型，在節點上顯示不一樣的狀態和樣式，也許你會花很多的時間來重寫 Tree的控件，而WPF提供了一個模板功能，而且具體的模板是我們自己來實現的。

標簽：MVVM

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：博客園

上一篇：初步體驗數據驅動之美---TreeView 下一篇：圖解User Interface Edition for WPF 2011 v3新特性