Silverlight TreeView 的 DataBinding (1)

這一天研究了 Silverlight TreeView 的 DataBinding. 這裡作一下簡單的記錄，以便自己回憶。

首先，使用 Silverlight Application 建立一個  SilverlightApplication1 吧。

資料

由於 TreeView 是樹狀結構的顯示元件，要顯示 TreeView 的 DataBinding，當然需要一個樹狀結構的資料。以下是目錄的結構程式。

using System.Collections.Generic;

namespace SilverlightTreeView1
{
    public class MyFolder
    {
        public MyFolder(string name)
        {
            Name = name;
        }
        public string Name { get; set; }

        public List<MyFolder> SubFolders { get; set; }
    }
    public class FolderHelper
    {
        public static List<MyFolder> GetAllFolder()
        {
            var folders = new List<MyFolder>()
                              {
                                  new MyFolder("A")
                                      {
                                                        SubFolders = new List<MyFolder>(){
                                          new MyFolder("A1")
                                              {
                                                                SubFolders = new List<MyFolder>()
                                                                                 {
                                                                                     new MyFolder("A11"),
                                                                                                new MyFolder("A12"),
                                                                                                new MyFolder("A13"),
                                                                                                new MyFolder("A14"),
                                                                                 }
                                              },
                                                        new MyFolder("A2"),
                                                        new MyFolder("A3")
                                                        }
                                      },
                                                    new MyFolder("B")
                                                        {
                                                            SubFolders = new List<MyFolder>(){
                                          new MyFolder("B1"),
                                                        new MyFolder("B2"),
                                                        new MyFolder("B3"),
                                                        new MyFolder("B4"),
                                                        }
                                                    }
                              };
            return folders;
        }
    }


}

使用 TreeView 元件

在MainPage.xaml 上拖入一個 TreeView 元件。

Xaml

<UserControl x:Class="SilverlightTreeView1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:SilverlightTreeView1="clr-namespace:SilverlightTreeView1">
        <Grid x:Name="LayoutRoot" Background="White">
        <sdk:TreeView Name="treeView1">
        </sdk:TreeView>
    </Grid>
</UserControl>

在 MainPage.xaml 中，建構子程式碼中設定 treeView1.ItemsSource

using System.Windows.Controls;

namespace SilverlightTreeView1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            treeView1.ItemsSource = FolderHelper.GetAllFolder();
        }
    }
}

運行程式後，結果如下圖

運作的結果只出現了最上層的兩個目錄，而且並沒有顯示我想要的目錄名稱。

修改1: 顯示目錄名稱

要顯示目錄名稱，其實很簡單，就是要在 xaml 中作一些變化。

<sdk:TreeView Name="treeView1">
    <sdk:TreeView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </sdk:TreeView.ItemTemplate>
</sdk:TreeView>
TreeView.ItemTemplate的內容是內容的樣版，並且使用DataTemplate 作為資料繫結樣版。這裡使用了一個 TextBlock，並且繫結到 MyFolder 物件的 Name 屬性(Property)。

結果如下圖。

修改2：改成樹狀顯示

DataTemplate 只能顯示繫結物件的資料，並無法顯示樹狀結構。為了顯示樹狀結構，我們必須將資料顯示的樣版，改用HierarchicalDataTemplate

<sdk:TreeView Name="treeView1">
    <sdk:TreeView.ItemTemplate>
        <sdk:HierarchicalDataTemplate ItemsSource="{Binding SubFolders}">
            <TextBlock Text="{Binding Name}" />
            </sdk:HierarchicalDataTemplate>
    </sdk:TreeView.ItemTemplate>
</sdk:TreeView>

結果如下圖

程式碼下載