Silverlight Tips(5)

       已经第5篇了，仍然希望自己坚持下去，最近园子里关于Silverlight的文章越来越多了，希望有更多的人推动这门技术的发展。

       这篇文章将主要介绍下TreeView和ComboBox的数据绑定的简单应用

TreeView

    关于TreeView的应用，这篇文章给出了一个很好的示例，但是它并不是MVVM方式下的，所以本篇文章关注下通过绑定数据方式显示Tree结构。

     首先定义一个实体类：

        public class Employee
       {
        public string Name { get; set; }
        public int ParentId { get; set; }
        public int Id { get; set; }
        public ObservableCollection<Employee> Children { get; set; }
       //...
       }

    这是典型的使用ParentId，通过递归获取Children属性的

        public void Recrusion(int parentId,Employee begin)
        {
            var temp = (from employee in list
                        where employee.ParentId == parentId
                        select employee).ToList();
            if(temp.Count>0)
            {
                begin.Children=new ObservableCollection<Employee>();
                foreach (var employee in temp)
                {
                    begin.Children.Add(employee);
                    Recrusion(employee.Id,employee);
                }
            }
        }

      层次结构的绑定主要用到HierarchicalDataTemplate，View中绑定到Children属性

        <sdk:HierarchicalDataTemplate x:Key="ChildTemplate" ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsCheck,Mode=TwoWay}"  HorizontalAlignment="Stretch"></CheckBox>
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </sdk:HierarchicalDataTemplate>
  TreeView的绑定如下

        <sdk:TreeView  Name="treeView1" ItemTemplate="{StaticResource ChildTemplate}" 
        ItemsSource="{Binding Employees}" />
     
     这时候运行会发现所有的节点都是折叠的，如果需要显示所有节点，需要设置TreeViewItem的属性IsExpander
         <Style x:Key="treeViewStyle" TargetType="sdk:TreeViewItem">
            <Setter Property="IsExpanded" Value="True" />
        </Style>
    
     TreeView的ItemContainerStyle="{StaticResource treeViewStyle}"
   
     经过这几步简单的操作，就可以通过绑定数据的方式将数据绑定到TreeView上了。

ComboBox

       其实之前的博客里也写到ComboBox的一些使用，这篇只是关注其中一个小的方面。

      ViewModel如此：

         public class ComboBoxViewModel : INotifyPropertyChanged
    {
        public List<string> Departements { get; set; }
        private string _seletcItem;
        public string SeletcItem
        {
            get { return _seletcItem; }
            set { _seletcItem = value;
                NotifyPropertyChanged("SeletcItem");
            }
        }      
        public ComboBoxViewModel()
        {
            Departements = new List<string>()
                               {
                                   "研发部",
                                   "财务部"
                               };
            _seletcItem = "研发部";
        }
      //...
    }

     View中绑定到Department：

        <ComboBox  SelectedValue="{Binding SeletcItem,Mode=TwoWay}" ItemsSource="{Binding Departements}"   />
    
    这时候你会发现效果图如下所示，ComboBox中选中的项并没有显示出来

 

   

   现在我们把上面的Xaml代码修改一下：

        <ComboBox ItemsSource="{Binding Departements}" SelectedValue="{Binding SeletcItem,Mode=TwoWay}"  />
  这时候，你会看到选中项在页面中显示出来：   
 

   其实只是把ItemSource与SelectedValue的顺序换了下，XAML解析的结果就不一样了，这个地方希望给各位小小的提示。

   在最近的工作阶段中，对MVVM模式的理解更深了一层，感觉在ViewModel中操作数据很是方便，这篇文章主要整理下MVVM模式下TreeView和ComboBox的应用，

希望对各位会有小小的帮助。

 

 

下载代码：TreeViewAndCombox.rar