DevExpress控件基础应用——TreeListControl（1）

最近研究了在WPF应用程序运用第三方UI套件DevExpress，对能够将Tree型控件和List控件完美结合在一起的TreeListControl很感兴趣。网上关于如何使用TreeListControl控件的资料很少，害得我花费较长时间研究实践，才略知一二。写这篇文章，主要为解决下列问题：

1）如何绑定数据到TreeListControl控件的List部分？

2）如何在TreeListControl控件的Tree部分设置各个节点的父子关系？

下面介绍如何绑定数据到TreeListControl控件的List部分。

首先在XAML添加TreeListControl控件，设置列元素。本例设置了两列，分别命名FieldName为strName和strName。

                                    <my:TreeListControl Name="treeList"  >   
                                        <my:TreeListControl.Columns>
                                            <my:TreeListColumn FieldName="strName" Header="Register Name" />
                                            <my:TreeListColumn FieldName="strNum" Header="Register Num" />                                             
                                        </my:TreeListControl.Columns>
                                    </my:TreeListControl>

接着，声明对应的类，如下：

    public class tempClass
    {
        public string strName { get; set; }
        public string strNum { get; set; }

    }

一个重要的细节：tempClass类的成员变量strName和strNum，与XAML声明的TreeListControl控件的列元素的FieldName属性是相同的。我曾经以为只要列数一样就会自动绑定数据，试用过不同的命名，结果无法显示数据。

最后，绑定数据到TreeListControl控件的ItemsSource。数据可以是list类型，也可以使用ObservableCollection类型。区别是list可以把数据绑定到控件，不能绑定控件属性到数据，而ObservableCollection可以双向绑定。代码如下：

    public partial class EditUiPage : Page
    {
        private readonly ObservableCollection<tempClass> _list = new ObservableCollection<tempClass>();        
        public EditUiPage()
        {
            InitializeComponent();
            InitTreeList();
        }
        private void InitTreeList()
        {            
            List<tempClass> strList = new List<tempClass>();
            string str;
            for (int i = 0; i < 10; i++)
            {
                tempClass tc = new tempClass();
                str = "No." + (i + 1).ToString();
                tc.strName = "NAAAAA";
                tc.strNum = str;
                strList.Add(tc);
                _list.Add(tc);
            }
            this.treeList.ItemsSource = strList;
            //this.treeList.ItemsSource = _list;
        }
    }

上述已能够将数据绑定到TreeListControl控件，这里暂时不讨论双向绑定。

运行效果如下：