自定義TreeView，多列帶有標頭，支持多選綁定

根據需求需要製作一顆樹，多列顯示，帶有標頭，支持多選綁定，另外帶有一些選中、鼠標移動的效果。實現效果如下：

樣式資源代碼如下，

這裏遇到一個問題，如果修改了TextBlock的Foreground，那麼在Trigger裏面再修改Foreground，是沒有效果的。

文章最後有下載地址

<Window x:Class="TreeGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeGrid"
        xmlns:my="clr-namespace:TreeGrid"
        Title="MainWindow" Height="400" Width="525">
    <Window.Resources>
        <local:TreeViewLineConverter x:Key="LineConverter"/>
        <local:LevelToMarginConverter x:Key="LevelToIndentConverter"/>
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid x:Name="Root" Background="Transparent" >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="OuterBorder"
                                                                     Storyboard.TargetProperty="Opacity"
                                                                     To="1" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Root"
                                                                     Storyboard.TargetProperty="Opacity"
                                                                     To="0.5"
                                                                     Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Unchecked" />
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="UncheckedVisual"
                                                                     Storyboard.TargetProperty="Opacity"
                                                                     To="0" Duration="0" />
                                            <DoubleAnimation Storyboard.TargetName="CheckedVisual"
                                                                     Storyboard.TargetProperty="Opacity"
                                                                     To="1" Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="OuterBorder"
                                                BorderBrush="{StaticResource MyBrushNormalBorder}"
                                                CornerRadius="3"
                                                BorderThickness="1" Opacity="0.5"
                                                    Background="{StaticResource MyBrushNormalBevelBackground}"/>
                            <Grid Margin="3" >
                                <Path x:Name="UncheckedVisual" UseLayoutRounding="False"
                                              HorizontalAlignment="Center"  Stretch="Uniform"
                                              Data="M0,4 L4,4 L4,0 L6,0 L6,4 L10,4 L10,6 L6,6 L6,10 L4,10 L4,6 L0,6 z"
                                              VerticalAlignment="Center"
                                              Opacity="1" Fill="#FFB5BD24">
                                </Path>
                                <Path x:Name="CheckedVisual" UseLayoutRounding="False"
                                              HorizontalAlignment="Center" Stretch="Uniform"
                                              Data="M0,4 L10,4 L10,6 L0,6 z"
                                              VerticalAlignment="Center"
                                              Opacity="0" Fill="#FFB5BD24">
                                </Path>
                            </Grid>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="CellTemplate_Name">
            <DockPanel >
                <ToggleButton x:Name="Expander" 
                      Style="{StaticResource ExpandCollapseToggleStyle}" 
                      Margin="{Binding Level,Converter={StaticResource LevelToIndentConverter}}"
                      IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource AncestorType= {x:Type TreeViewItem}}}"
                      ClickMode="Press"/>
                <TextBlock Text="{Binding Name}"/>
            </DockPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=HasItems,
                               RelativeSource={RelativeSource 
                               AncestorType={x:Type TreeViewItem}}}" 
                     Value="False">
                    <Setter TargetName="Expander"
                  Property="Visibility"
                  Value="Hidden"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

        <GridViewColumnCollection x:Key="gvcc">
            <GridViewColumn Header="Name"  
                      CellTemplate="{StaticResource CellTemplate_Name}" Width="Auto"/>
            <GridViewColumn Header="JobTitle" 
                      DisplayMemberBinding="{Binding JobTitle}" Width="60"/>
            <GridViewColumn Header="Age" 
                      DisplayMemberBinding="{Binding Age}" Width="60" />
            <GridViewColumn Header="Sex" 
                      DisplayMemberBinding="{Binding Sex}" Width="60"/>
        </GridViewColumnCollection>

        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="MinWidth" Value="20"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <StackPanel>
                            <Border Name="Bd" 
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Padding="0,2,0,2">
                                <GridViewRowPresenter x:Name="PART_Header" 
                                      Content="{TemplateBinding Header}" 
                                      Columns="{StaticResource gvcc}" />
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" />
                        </StackPanel>


                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded"
                       Value="false">
                                <Setter TargetName="ItemsHost"
                        Property="Visibility"
                        Value="Collapsed"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasHeader"
                             Value="false"/>
                                    <Condition Property="Width"
                             Value="Auto"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="PART_Header"
                        Property="MinWidth"
                        Value="75"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasHeader"
                             Value="false"/>
                                    <Condition Property="Height"
                             Value="Auto"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="PART_Header"
                        Property="MinHeight"
                        Value="19"/>
                            </MultiTrigger>

                            <Trigger Property="IsEnabled"
                       Value="false">
                                <Setter Property="Foreground"
                        Value="{DynamicResource 
                          {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="Red"></Setter>

                            </Trigger>

                            <Trigger Property="my:TreeViewExtensions.IsSelected" Value="true">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                            <GradientStop Color="#FFC7DFFC" Offset="1"/>
                                            <GradientStop Color="#FF3832B8" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type TreeView}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeView}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                            <DockPanel>
                                <GridViewHeaderRowPresenter Columns="{StaticResource gvcc}"
                                            DockPanel.Dock="Top"/>
                                <ScrollViewer>
                                    <ItemsPresenter/>
                                </ScrollViewer>
                            </DockPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TextBlockStyle" TargetType="TextBlock">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" VerticalAlignment="Center" Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Button Height="30" Width="60" Content="test" Click="Button_Click"></Button>
                <Button x:Name="updata" Height="30" Width="60" Content="updata" Click="updata_Click"></Button>
            </StackPanel>
            <ScrollViewer>
                <TextBox x:Name="txt" Height="50"></TextBox>
            </ScrollViewer>
        </StackPanel>
        <TreeView Height="300" Grid.Row="1" Name="_list"  BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" 
                  my:TreeViewExtensions.EnableMultiSelect="true" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  my:TreeViewExtensions.SelectedItems="{Binding SelectedTreeNodes, Mode=TwoWay, NotifyOnTargetUpdated=True}" Margin="0,0,0,50">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70"
                                Background="Transparent" DataContext="{Binding}" >
                        <StackPanel Orientation="Horizontal" Margin="2">
                            <TextBlock Text="{Binding Text}" Margin="2 0"/>
                        </StackPanel>
                    </Border>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>

</Window>

最後附上源代碼下載地址http://download.csdn.net/download/gao271003105/10038625