WPF-实现Windows 7 样式 Aero TreeView 控件

关于实现Windows 7 样式 Aero TreeView 控件的具体过程可以参考如下文章

http://www.cnblogs.com/o2ds/archive/2010/06/22/1763020.html

这里主要附上完整的样式以及如何将样式应用到TreeView.ItemTemplate上。

完整样式如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:src="clr-namespace:Test;assembly=Test">

    <SolidColorBrush x:Key="SelectedOutBorderBrush" Color="#84ACDD"></SolidColorBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="SelectedInnerBorderBrush">
        <GradientStop Color="#F1F7FE" Offset="0"/>
        <GradientStop Color="#DEEDFE" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="SelectedBackgroundBrush">
        <GradientStop Color="#EBF4FE" Offset="0"/>
        <GradientStop Color="#CFE4FE" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="SelectedLostFoucsOutBorderBrush" Color="#D9D9D9"></SolidColorBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="SelectedLostFoucsInnerBorderBrush">
        <GradientStop Color="#FAFAFB" Offset="0"/>
        <GradientStop Color="#F0F0F0" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="SelectedLostFoucsBackgroundBrush">
        <GradientStop Color="#F8F8F8" Offset="0"/>
        <GradientStop Color="#E5E5E5" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="SelectedMouseMoveOutBorderBrush" Color="#7DA2CE"></SolidColorBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="SelectedMouseMoveInnerBorderBrush">
        <GradientStop Color="#EBF4FD" Offset="0"/>
        <GradientStop Color="#DBEAFD" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="SelectedMouseMoveBackgroundBrush">
        <GradientStop Color="#DCEBFC" Offset="0"/>
        <GradientStop Color="#C1DBFC" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="MouseMoveOutBorderBrush" Color="#B8D6FB"></SolidColorBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="MouseMoveInnerBorderBrush">
        <GradientStop Color="#FCFDFE" Offset="0"/>
        <GradientStop Color="#F2F7FE" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="MouseMoveBackgroundBrush">
        <GradientStop Color="#FAFBFD" Offset="0"/>
        <GradientStop Color="#EBF3FD" Offset="1"/>
    </LinearGradientBrush>

    <Style x:Key="TreeViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
    <Style x:Key="TreeViewArrowButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Width" Value="16"/>
        <Setter Property="Height" Value="16"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="Transparent" Height="16" Padding="5,5,5,5" Width="16">
                        <Path x:Name="ExpandPath" Data="{StaticResource TreeArrow}" Fill="Transparent" Stroke="#FF989898">
                            <Path.RenderTransform>
                                <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
                            <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="RenderTransform" TargetName="ExpandPath">
                                <Setter.Value>
                                    <RotateTransform Angle="180" CenterY="3" CenterX="3"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type TreeViewItem}" x:Key="TreeViewItemTest">
        <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
        <Setter Property="IsExpanded" Value="True"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <ControlTemplate.Resources>
                        <src:IndentConverter Indent="19" MarginLeft="0" x:Key="indentConverter" />
                    </ControlTemplate.Resources>
                    <StackPanel Height="Auto">
                        <Border x:Name="outBorder" BorderThickness="1" CornerRadius="2" Margin="1,1,2,0">
                            <Border x:Name="itemBorder" Padding="{TemplateBinding Padding}" Margin="0" CornerRadius="1" Background="{TemplateBinding Background}"
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}" >
                                <Grid Margin="{Binding Converter={StaticResource indentConverter},RelativeSource={RelativeSource TemplatedParent}}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="19" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton Grid.Column="0" x:Name="ArrowButton" Style="{StaticResource TreeViewArrowButtonStyle}"
                                                  IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                                  ClickMode="Press" />
                                    <ContentPresenter Grid.Column="1" x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                                </Grid>
                            </Border>
                        </Border>
                        <ItemsPresenter x:Name="ItemsHost" />
                    </StackPanel>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="False">
                            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="HasItems" Value="False">
                            <Setter TargetName="ArrowButton" Property="Visibility" Value="Hidden" />
                        </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="IsSelected"  Value="true">
                            <Setter TargetName="itemBorder" Property="Background" Value="{StaticResource ResourceKey=SelectedBackgroundBrush}"/>
                            <Setter TargetName="itemBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedInnerBorderBrush}" />
                            <Setter TargetName="outBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedOutBorderBrush}" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="itemBorder" Property="Background" Value="{StaticResource ResourceKey=SelectedLostFoucsBackgroundBrush}" />
                            <Setter TargetName="itemBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedLostFoucsInnerBorderBrush}" />
                            <Setter TargetName="outBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedLostFoucsOutBorderBrush}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="itemBorder" Property="Background" Value="{StaticResource ResourceKey=SelectedMouseMoveBackgroundBrush}" />
                            <Setter TargetName="itemBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedMouseMoveInnerBorderBrush}" />
                            <Setter TargetName="outBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedMouseMoveOutBorderBrush}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition SourceName="itemBorder" Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="itemBorder" Property="Background" Value="{StaticResource ResourceKey=MouseMoveBackgroundBrush}" />
                            <Setter TargetName="itemBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=MouseMoveInnerBorderBrush}" />
                            <Setter TargetName="outBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=MouseMoveOutBorderBrush}" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

然而，如果使用HierarchicalDataTemplate或者DataTemplate对TreeView的ItemTemplate进行了重写，则会发现上述样式无法应用。使用方法是设置TreeView的ItemContainerStyle属性。如：<TreeView ItemContainerStyle="{DynamicResource TreeViewItemTest}"></TreeView>。这样即可将样式应用到DataTemplate上。

文章已迁移到：http://www.izonso.com/forum.php