Silverlight Tips(5)

       这篇文章将主要介绍下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