採用MVVM方式實現WPF的TreeView
阿新 • • 發佈:2019-02-05
至於什麼是MVVM,其優勢是什麼,不在此介紹,直接說明實現:
1)後臺程式碼
分為三個類:
(1)MainWindow,裡面只有兩行程式碼,關鍵實現是對DataContext賦值,那麼所賦的值是什麼呢?這便是第二個類:
(2)PropertyNodeItemViewModel,該類繼承於NotificationObject;而NotificationObject為通知類,當屬性更改時自動提交更改通知;該類主要模擬樹節點;當屬性PropertyNodeItems變化時會實現自動提交;該類屬於ViewModel
(3)PropertyNodeItem,樹節點組成元素,屬於Model;
namespace EquipmentManagement { /// <summary> /// MainWindow.xaml 的互動邏輯 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new PropertyNodeItemViewModel(); } } internal class PropertyNodeItemViewModel : TaianSUCCEED.Practices.ViewModels.NotificationObject { private readonly string FOLDER_ICON = @"C:\Users\Pictures\png\TrayMenuPlay.png"; private readonly string TAG_ICON = @"C:\Users\Pictures\png\TrayMenuPaused.png"; private readonly string EDITABLE_ICON = @"C:\Users\Pictures\png\TrayMenuLogin.png"; private List<PropertyNodeItem> _propertyNodeItems; public List<PropertyNodeItem> PropertyNodeItems { get { return _propertyNodeItems; } set { _propertyNodeItems = value; this.RaisePropertyChanged("PropertyNodeItems"); } } public PropertyNodeItemViewModel() { PropertyNodeItems = ShowTreeView(); } private List<PropertyNodeItem> ShowTreeView() { List<PropertyNodeItem> itemList = new List<PropertyNodeItem>(); PropertyNodeItem node1 = new PropertyNodeItem() { DisplayName = "Node No.1", Name = "This is the discription of Node1. This is a folder.", Icon = FOLDER_ICON, }; PropertyNodeItem node1tag1 = new PropertyNodeItem() { DisplayName = "Tag No.1", Name = "This is the discription of Tag 1. This is a tag.", Icon = TAG_ICON, EditIcon = EDITABLE_ICON }; node1.Children.Add(node1tag1); PropertyNodeItem node1tag2 = new PropertyNodeItem() { DisplayName = "Tag No.2", Name = "This is the discription of Tag 2. This is a tag.", Icon = TAG_ICON, EditIcon = EDITABLE_ICON }; node1.Children.Add(node1tag2); itemList.Add(node1); PropertyNodeItem node2 = new PropertyNodeItem() { DisplayName = "Node No.2", Name = "This is the discription of Node 2. This is a folder.", Icon = FOLDER_ICON, }; PropertyNodeItem node2tag3 = new PropertyNodeItem() { DisplayName = "Tag No.3", Name = "This is the discription of Tag 3. This is a tag.", Icon = TAG_ICON, EditIcon = EDITABLE_ICON }; node2.Children.Add(node2tag3); PropertyNodeItem node2tag4 = new PropertyNodeItem() { DisplayName = "Tag No.4", Name = "This is the discription of Tag 4. This is a tag.", Icon = TAG_ICON, EditIcon = EDITABLE_ICON }; node2.Children.Add(node2tag4); itemList.Add(node2); return itemList; //this._tvProerties.ItemsSource = itemList; } } internal class PropertyNodeItem { public string Icon{get;set;} public string EditIcon { get; set; } public string DisplayName { get; set; } public string Name { get; set; } public List<PropertyNodeItem> Children { get; set; } public PropertyNodeItem() { Children = new List<PropertyNodeItem>(); } } }
類NotificationObject:
public abstract class NotificationObject: INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void RaisePropertyChanged(string propertyName) { if (PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } 。。。。 }
2)前臺View實現
這裡特別注意的是採用模板方式,其中TreeView的ItemsSource繫結的屬性PropertyNodeItems,而HierarchicalDataTemplate的ItemsSource繫結的Children
<Window x:Class="EquipmentManagement.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:EquipmentManagement" Title="MainWindow" Height="350" Width="260"> <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="6" Background="LightYellow"> <TreeView Name="_tvProerties" Width="250" Padding="0" Margin="3" BorderThickness="1" ItemsSource="{Binding PropertyNodeItems}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate DataType="{x:Type local:PropertyNodeItem}" ItemsSource="{Binding Path=Children}"> <StackPanel Orientation="Horizontal"> <Image VerticalAlignment="Center" Source="{Binding Icon}" Width="16" Height="16" Margin="0,0,2,2"></Image> <TextBlock VerticalAlignment="Center" Text="{Binding DisplayName}"/> <Image VerticalAlignment="Center" Source="{Binding EditIcon}" Margin="2, 0, 0, 0"/> <StackPanel.ToolTip> <TextBlock VerticalAlignment="Center" Text="{Binding Name}" TextWrapping="Wrap" MaxWidth="200"/> </StackPanel.ToolTip> </StackPanel> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> </Border> </Window>
3)附圖實現樣式