关于实现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