MVVM打造无限级TreeView

    自从了解了MVVM，就迷恋上了它，基本上抛弃了传统的开发方式~

    前些天无意中看到一篇关于用MVVM打造TreeView的文章(http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx)，感觉比较美妙，遂拿来简单改造一下，使它支持无限级。

    首先，定义一个实体类：

    public class TreeItem
    {
        readonly List<TreeItem> _children = new List<TreeItem>();
        public List<TreeItem> Children
        {
            get { return _children; }
        }

        public string Name { get; set; }
        public int ID { get; set; }
        public int ParentID { get; set; }
    }

    接下来，把TreeViewItemViewModel、以及PropertyChangedBase直接搬过来。

    然后定义一个ViewModel：

	public class TreeItemViewModel : TreeViewItemViewModel
	{
		private TreeItem item;

		public TreeItemViewModel(TreeItem item) :
			this(item, null)
		{

		}

		public TreeItemViewModel(TreeItem item, TreeItemViewModel parent) :
			base(parent, true)
		{
			this.item = item;
		}

		public string Name
		{
			get { return item.Name; }
			set
			{
				item.Name = value;
				this.NotifyPropertyChanged(p => p.Name);
			}
		}
		
		protected override void LoadChildren()
		{
			var loadedData = TreeItemDemoData.LoadChildrens(item.ID);
			if (loadedData.Count > 0)
			{
				Children.Clear();
				foreach (var t in loadedData)
				{
					Children.Add(new TreeItemViewModel(t, this));
				}
			}
		}
	}

    以及相关Demo数据：

	public class TreeItemDemoData
	{
		private static readonly List<TreeItem> data;

		static TreeItemDemoData()
		{
			data = new List<TreeItem>();
			for (int i = 0; i < 10; i++)
			{
				data.Add(new TreeItem
		         {
		         	Name = string.Format("Name {0}", i.ToString()),
		         	ID = i,
		         	ParentID = i - 1
		         });
			}
		}

		public static List<TreeItem> LoadChildrens(int parentId)
		{
			return data.Where(t => t.ParentID == parentId).ToList();
		}
	}

    定义界面：

<Window x:Class="TreeViewDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:TreeViewDemo.ViewModel"
        Title="TreeViewDemo" Height="300" Width="300"
>
	<StackPanel>
		<TreeView ItemsSource="{Binding}">
			<TreeView.ItemContainerStyle>
				<Style TargetType="{x:Type TreeViewItem}">
					<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
					<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
					<Setter Property="FontWeight" Value="Normal" />
					<Style.Triggers>
						<Trigger Property="IsSelected" Value="True">
							<Setter Property="FontWeight" Value="Bold" />
						</Trigger>
					</Style.Triggers>
				</Style>
			</TreeView.ItemContainerStyle>
			<TreeView.Resources>
				<HierarchicalDataTemplate
					DataType="{x:Type vm:TreeItemViewModel}"
					ItemsSource="{Binding Children}">
					<StackPanel Orientation="Horizontal">
						<TextBlock Text="{Binding Name}" />
					</StackPanel>
				</HierarchicalDataTemplate>
			</TreeView.Resources>
		</TreeView>
	</StackPanel>
</Window>

    最后，绑定数据：

	public partial class Window1 : Window
	{
		public Window1()
		{
			InitializeComponent();
			DataContext = new ObservableCollection<TreeItemViewModel>(
				TreeItemDemoData.LoadChildrens(0).Select(t => new TreeItemViewModel(t))
			);
		}
	}

    OK，完成，发现HierarchicalDataTemplate挺神奇的~_~。

    相信TreeView应用范围还是相当广的，比如某些应用的数据N级分类。

    当然，如果是数据库应用，可能会有一定延迟，造成界面的假死，在此对本文例子稍加改造，使用多线程提高UI的响应速度。

    对TreeItemViewModel进行改造：

		protected override void LoadChildren()
		{
			PreLoad();
		}
		
		private string originalName;
		private Dispatcher uiThreadDispatcher;
		private void PreLoad()
		{
			originalName = Name;
			Name = Name + " (expanding...)";
			uiThreadDispatcher = Dispatcher.CurrentDispatcher;			
			ThreadPool.QueueUserWorkItem(Loading);
		}
		
		private void Loading(object state)
		{
			Thread.Sleep(500);//模拟延迟
			var loadedData = TreeItemDemoData.LoadChildrens(item.ID);
			if (loadedData.Count > 0)
			{
				uiThreadDispatcher.BeginInvoke(DispatcherPriority.Background,
				                               new Action(() => Children.Clear()));
				foreach (var t in loadedData)
				{
					uiThreadDispatcher.BeginInvoke(DispatcherPriority.Background,
					                               new Action<TreeItem>(vm => Children.Add(new TreeItemViewModel(vm, this))),
					                               t);
				}
			}
			Name = originalName;
		}

    只是简单的小技巧~本文就到这里。

    DEMO地址