TOC

This article has been localized into Chinese by the community.

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代码,对于总共只有六个节点的树!

小结

虽然完全有可能只使用标记来定义整个TreeView,就像我们在上面的例子中所做的那样,但在大多数情况下它并不是最好的方法,而你可以从Code-behind中做到这一点,这会导致更多代码行。解决方案再一次是data binding,我们将在接下来的章节中讨论。

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!