如何实现具有层次结构的 TreeView <四> (WPF/TreeView/Style/Template)

打造用户界面 (UI)

在上一节中，我们已经完成了数据的绑定工作，并通过 DataTemplate 实现了 Name 的纵向显示。本节将主要介绍下面几个内容:

1、对 TreeView 进行布局，实现层次结构的视图

2、设置 TreeViewItem 的样式，令其在不同操作下呈现出相应的状态

值得一提的是，在 dotNET 4.0 中提供的标准控件引入了 VisualStateGroup 类，有兴趣的朋友可以在自定义控件中试试。由于此处部分状态存在互斥的情况，所以仍使用了3.0的动画定义方式。

1、对 TreeView 进行布局，实现层次结构的视图

默认情况下 TreeView 中的节点是自上而下排列，从左向右展开。在 WPF 中要改变这样的布局并不困难，只需要改变承载节点的容器即可。

<TreeView.Style>
    <Style TargetType="{x:Type TreeView}">
        <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush"
                Value="#FFB0C4DE"/>
        <Setter Property="BorderThickness"
                Value="1"/>
        <Setter Property="Foreground"
                Value="#FF042271"/>
        <Setter Property="Padding"
                Value="15,20"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="true"/>
        <Setter Property="VerticalContentAlignment"
                Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeView}">
                    <Grid>
                        <Rectangle x:Name="Rt"
                                   Opacity="0"
                                   Fill="#40000000">
                            <Rectangle.Effect>
                                <BlurEffect/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <Border x:Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="true">
                            <ScrollViewer x:Name="Scroll"
                                          Padding="-20,0,0,0">
                                <!-- 默认样式中的标记是 <ItemsPresenter/> 使用的应该是 StackPanel -->
                                <!-- 此处我将其改为 WrapPanel 并设置 IsItemsHost="true" -->
                                <WrapPanel x:Name="ItemsHost"
                                           IsItemsHost="True"
                                           Margin="{TemplateBinding Padding}"
                                           Orientation="Horizontal"/>
                            </ScrollViewer>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsGrouping"
                                 Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll"
                                    Value="false"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Rt"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0:0:0.5"
                                                         To="1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Rt"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0:0:0.5"
                                                         To="0"/>
                                    </Storyboard>