稍微搜索了一下,发现网上很多都是代码实现的,所以........
效果图:
(黄色为选中,浅蓝色为MouseOver)
没啥解释的,看代码。ps:Expanded中我屏蔽了一行,大概在75行左右。
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
<!--TreeViewItem--> <Style TargetType="sdk:TreeViewItem"> <Setter Property="Padding" Value="0"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Cursor" Value="Arrow"/> <Setter Property="IsTabStop" Value="True"/> <Setter Property="TabNavigation" Value="Once"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="sdk:TreeViewItem"> <StackPanel Background="{x:Null}"> <StackPanel.Resources> <my:TreeViewItemIndentationConverter x:Key="IndentConverter"/> </StackPanel.Resources> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" To="1" /> </Storyboard> </VisualState> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="#FF999999"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="#FF999999"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"/> <VisualState x:Name="Selected"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </VisualState> <VisualState x:Name="SelectedInactive"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" To=".8"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="HasItemsStates"> <VisualState x:Name="HasItems"/> <VisualState x:Name="NoItems"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ExpansionStates"> <VisualState x:Name="Collapsed"/> <VisualState x:Name="Expanded"> <Storyboard> <!--<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="ExpandedBackground" Storyboard.TargetProperty="Opacity" To="1" />--> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0.21" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0.21" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border Background="{x:Null}" CornerRadius="2"> <Grid> <Rectangle x:Name="ExpandedBackground" Stroke="#FFF1F8FC" HorizontalAlignment="Stretch" RadiusX="4" RadiusY="4" IsHitTestVisible="False" Opacity="0" Grid.ColumnSpan="3" Canvas.ZIndex="0"> <Rectangle.Fill> <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1"> <GradientStop Offset="-4" Color="#FFB4D2EB" /> <GradientStop Offset="1.4" Color="#FFFFFFFF" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle x:Name="Hover" Stroke="#FFd8f0ff" StrokeThickness="1" HorizontalAlignment="Stretch" RadiusX="4" RadiusY="4" IsHitTestVisible="False" Opacity="0" Grid.ColumnSpan="3" Canvas.ZIndex="0"> <Rectangle.Fill> <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1"> <GradientStop Offset="0" Color="#ffe5f4ff" /> <GradientStop Offset="1" Color="#FFd8f0ff" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle x:Name="Selection" Stroke="#FFfee69e" HorizontalAlignment="Stretch" RadiusX="4" RadiusY="4" IsHitTestVisible="False" Opacity="0" Grid.ColumnSpan="3" Canvas.ZIndex="0" > <Rectangle.Fill> <LinearGradientBrush> <GradientStop Offset="0" Color="#FFfff2ca" /> <GradientStop Offset="1" Color="#FFfee69e" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Button x:Name="Header" ClickMode="Hover" Width="Auto" Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" TabNavigation="Once"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="Pressed" /> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" Duration="0" To=".55"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Button.Template> <Button.Content> <Border BorderThickness="0" Margin="10 0 0 0"> <Grid Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource IndentConverter}}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="15"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Center" VerticalAlignment="Stretch" IsTabStop="False" TabNavigation="Once"> <ToggleButton.Template> <ControlTemplate TargetType="ToggleButton"> <Grid x:Name="Root" Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7" 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> <Grid HorizontalAlignment="Right" Margin="2 2 5 2"> <Path x:Name="UncheckedVisual" Width="6" Height="9" Fill="#FFFFFFFF" VerticalAlignment="Center" HorizontalAlignment="Right" Data="M 0,0 L 0,9 L 5,4.5 Z" StrokeThickness="1" StrokeLineJoin="Miter"> <Path.Stroke> <SolidColorBrush Color="#FF989898"/> </Path.Stroke> </Path> <Path x:Name="CheckedVisual" Opacity="0" Width="6" Height="6" Fill="#FF262626" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 6,0 L 6,6 L 0,6 Z" StrokeLineJoin="Miter"/> </Grid> </Grid> </ControlTemplate> </ToggleButton.Template> </ToggleButton> <ContentControl x:Name="Content" Grid.Column="1" Cursor="{TemplateBinding Cursor}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}"> <ContentControl.Content> <ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/> </ContentControl.Content> </ContentControl> </Grid> </Border> </Button.Content> </Button> </Grid> </Border> <Border x:Name="Validation" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FFDB000C" CornerRadius="2" Visibility="Collapsed"> <ToolTipService.ToolTip> <ToolTip x:Name="ValidationToolTip" Placement="Right" PlacementTarget="{Binding ElementName=Content}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True"/> </ToolTipService.ToolTip> <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent"> <Path Margin="-1,3,0,0" Fill="#FFDC000C" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z"/> <Path Margin="-1,3,0,0" Fill="#FFFFFFFF" Data="M 0,0 L2,0 L 8,6 L8,8"/> </Grid> </Border> <ItemsPresenter x:Name="ItemsHost" Visibility="Collapsed"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style>