Categories: WPF 教程

WPF教程之一个简单的TreeView例子

TreeView控件:

一个简单的TreeView例子

就像我们在之前的文章里讨论的一样，WPF TreeView 控件的使用方式可以很简单，通过给 TreeView 添加 TreeViewItem 对象，或者使用后台代码绑定的方式，也可以在 XAML 里直接声明。你可以从下面的例子看出来，真的很容易上手。

<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeViewSample" Height="200" Width="250">
    <Grid Margin="10">
  <TreeView>
   <TreeViewItem Header="Level 1" IsExpanded="True">
    <TreeViewItem Header="Level 2.1" />
    <TreeViewItem Header="Level 2.2" IsExpanded="True">
     <TreeViewItem Header="Level 3.1" />
     <TreeViewItem Header="Level 3.2" />
    </TreeViewItem>
    <TreeViewItem Header="Level 2.3" />
   </TreeViewItem>
  </TreeView>
 </Grid>
</Window>

我们只是直接在XAML中声明TreeViewItem对象，它们与我们想要显示它们的结构相同，其中第一个标记是TreeView控件的子标记，其子对象也是其父对象的子标记。要指定我们想要为每个节点显示的文本，我们使用Header属性。默认情况下，不会展开TreeViewItem，但为了向您展示示例的结构，我使用了IsExpanded属性来展开两个父项。

TreeViewItem包含图像和其他控件

Header是一个有趣的属性。正如你所看到的，我可以仅指定一个文本字符串，然后不用做任何其他事情就直接将它呈现出来，而这一切都归功于WPF的友好 – 在内部，它将文本包装在TextBlock控件内，而不需要你来做这件事。这表示，我们可以将任何漂亮的东西填充到Header属性中，并在TreeView中呈现出来，而不仅仅是一个字符串 – 这是为什么自定义WPF控件的外观如此简单的一个很好的例子。

来自WinForms甚至其他UI库的人员的一个常见请求是能够在TreeView项目的文本标签旁边显示图像。使用WinForms非常容易，因为TreeView完全是针对这种情况构建的。使用WPF TreeView，它有点复杂，但是你获得的灵活性远远超过你从WinForms TreeView获得的灵活性。这是一个例子：

<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewCustomItemsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeViewCustomItemsSample" Height="200" Width="250">
 <Grid Margin="10">
  <TreeView>
   <TreeViewItem IsExpanded="True">
    <TreeViewItem.Header>
     <StackPanel Orientation="Horizontal">
      <Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" />
      <TextBlock Text="Level 1 (Blue)" />
     </StackPanel>
    </TreeViewItem.Header>
    <TreeViewItem>
     <TreeViewItem.Header>
      <StackPanel Orientation="Horizontal">
       <TextBlock Text="Level 2.1" Foreground="Blue" />
      </StackPanel>
     </TreeViewItem.Header>
    </TreeViewItem>
    <TreeViewItem IsExpanded="True">
     <TreeViewItem.Header>
      <StackPanel Orientation="Horizontal">
       <Image Source="/WpfTutorialSamples;component/Images/bullet_green.png" />
       <TextBlock Text="Level 2.2 (Green)" Foreground="Blue" />
      </StackPanel>
     </TreeViewItem.Header>
     <TreeViewItem>
      <TreeViewItem.Header>
       <TextBlock Text="Level 3.1" Foreground="Green" />
      </TreeViewItem.Header>
     </TreeViewItem>
     <TreeViewItem>
      <TreeViewItem.Header>
       <TextBlock Text="Level 3.2" Foreground="Green" />
      </TreeViewItem.Header>
     </TreeViewItem>
    </TreeViewItem>
    <TreeViewItem>
     <TreeViewItem.Header>
      <TextBlock Text="Level 2.3" Foreground="Blue" />
     </TreeViewItem.Header>
    </TreeViewItem>
   </TreeViewItem>
  </TreeView>
 </Grid>
</Window>

我在这里做了很多事情，只是为了向您展示您获得的灵活性：我为child 项目着色，并将图像甚至按钮添加到父项目中。因为我们使用简单的标记来定义整个事物，所以几乎可以做任何事情，但正如您从示例代码中看到的那样，它确实需要付出代价：大量的XAML代码，对于总共只有六个节点的树！