wpf实现metrol风格的Treeview样式

win8出来已经有一段时间了，其中主要以metrol风格的界面样式感觉很不错，最新的office2013完全使用metrol风格，感觉简洁大方。在此用wpf做一个office2013中左侧的文件夹树的属性结构样式。效果如下：

样式文件如下：

  
   <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="ExpandCollapseToggleStyle" 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="#838688">                            <Path.RenderTransform>                                <RotateTransform Angle="135" CenterY="3" CenterX="3"/>                            </Path.RenderTransform>                        </Path>                    </Border>                    <ControlTemplate.Triggers>                        <MultiTrigger>                            <MultiTrigger.Conditions>                                <Condition Property="IsMouseOver" Value="True" />                                <Condition Property="IsChecked" Value="False" />                            </MultiTrigger.Conditions>                            <Setter Property="Stroke" TargetName="ExpandPath"                                                     Value="transparent"/>                            <Setter Property="Fill" TargetName="ExpandPath" Value="#2a8dd4"/>                        </MultiTrigger>                        <MultiTrigger>                            <MultiTrigger.Conditions>                                <Condition Property="IsMouseOver" Value="False" />                                <Condition Property="IsChecked" Value="True" />                            </MultiTrigger.Conditions>                            <Setter Property="RenderTransform" TargetName="ExpandPath">                                <Setter.Value>                                    <RotateTransform Angle="180" CenterY="3" CenterX="3"/>                                </Setter.Value>                            </Setter>                            <Setter Property="Stroke" TargetName="ExpandPath" Value="transparent"/>                            <Setter Property="Fill" TargetName="ExpandPath" Value="#444444"/>                        </MultiTrigger>                        <MultiTrigger>                            <MultiTrigger.Conditions>                                <Condition Property="IsMouseOver" Value="True" />                                <Condition Property="IsChecked" Value="True" />                            </MultiTrigger.Conditions>                            <Setter Property="RenderTransform" TargetName="ExpandPath">                                <Setter.Value>                                    <RotateTransform Angle="180" CenterY="3" CenterX="3"/>                                </Setter.Value>                            </Setter>                            <Setter Property="Fill" TargetName="ExpandPath"                                                     Value="#2a8dd4"/>                            <Setter Property="Stroke" TargetName="ExpandPath"                                                     Value="transparent"/>                        </MultiTrigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>    <Style  TargetType="{x:Type TreeViewItem}">        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>        <Setter Property="VerticalContentAlignment"                                 Value="{Binding VerticalContentAlignment,                            RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>        <Setter Property="Padding" Value="1,0,0,0"/>        <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type TreeViewItem}">                    <ControlTemplate.Resources>                        <Controls:IndentConverter Indent="19" x:Key="indentConverter" />                    </ControlTemplate.Resources>                    <StackPanel Height="Auto">                        <Border x:Name="outBorder" BorderThickness="1" CornerRadius="2" Margin="1,1,0,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     ExpandCollapseToggleStyle}"                                                  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  Property="FontWeight" Value="Bold"/>                            <Setter TargetName="outBorder" Property="BorderBrush" Value="{StaticResource ResourceKey=SelectedOutBorderBrush}" />                        </Trigger>                                          <MultiTrigger>                            <MultiTrigger.Conditions>                                <Condition SourceName="itemBorder" Property="IsMouseOver" Value="True" />                                                   </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.Triggers>        </Style.Triggers>    </Style>
  <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedInnerBorderBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedOutBorderBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedLostFoucsBackgroundBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedLostFoucsInnerBorderBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedLostFoucsOutBorderBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedMouseMoveBackgroundBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedMouseMoveInnerBorderBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="SelectedMouseMoveOutBorderBrush" Color="#E1E1E1"/>    <SolidColorBrush x:Key="MouseMoveBackgroundBrush" Color="#E6F2FA"/>    <SolidColorBrush x:Key="MouseMoveInnerBorderBrush" Color="#E6F2FA"/>    <SolidColorBrush x:Key="MouseMoveOutBorderBrush" Color="#E6F2FA"/>
在项目中引用该样式之后便可。