效果图
代码
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="DeshuTreeView.App"
xmlns:controls="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
>
<Application.Resources>
<LinearGradientBrush x:Key="MyBrushNormalBorder" EndPoint="1,1" StartPoint="0.2,0">
<GradientStop Color="#FFB1B1B1" Offset="0.391"/>
<GradientStop Color="#46FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MyBrushNormalBevelBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF414349" Offset="0.136"/>
<GradientStop Color="#FF202124" Offset="0.668"/>
<GradientStop Color="#FF0B153F" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MyTreeBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF202124" Offset="0.136"/>
<GradientStop Color="#FF202124" Offset="0.668"/>
<GradientStop Color="#FF181B28" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="controls:TreeViewItem">
<Setter Property="Padding" Value="0" />
<Setter Property="Foreground" Value="#FFD2DCA6"/>
<Setter Property="FontFamily" Value="Georgia"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD2DCA6" Offset="0"/>
<GradientStop Color="#FFD2DCA6" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush">
<Setter.Value >
<LinearGradientBrush EndPoint="1,1" StartPoint="0.2,0">
<GradientStop Color="#FFB1B1B1" Offset="0.391"/>
<GradientStop Color="#46FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TreeViewItem">
<Grid Background="Transparent" Margin="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.3" To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2" To="0.5" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectBorder"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:0.1"/>
<ColorAnimation Storyboard.TargetName="Header"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="#FFB5BD24" Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedInactive">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectBorder"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:0.1"/>
<ColorAnimation Storyboard.TargetName="Header"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="#FF202124" Duration="0:0:0.1"/>
</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>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton"
Storyboard.TargetProperty="IsHitTestVisible"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualState x:Name="Collapsed" >
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="Visibility"
BeginTime="0:0:0.2">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="line"
Storyboard.TargetProperty="Visibility"
Duration="0:0:0.2">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="line"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2" To="0"/>
<DoubleAnimation Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="Opacity"
BeginTime="0:0:0"
Duration="0:0:0.2" To="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="Visibility"
BeginTime="0:0:0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="line"
Storyboard.TargetProperty="Visibility"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="line"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2" To="1"/>
<DoubleAnimation Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="Opacity"
BeginTime="0:0:0.01"
Duration="0:0:0.3" To="1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
</VisualState>
<VisualState x:Name="InvalidFocused">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="HoverBorder" Opacity="0"
IsHitTestVisible="False" Margin="5 0 0 0">
<Border BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="3"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"/>
</Grid>
<Grid x:Name="SelectBorder" Opacity="0"
IsHitTestVisible="False" Margin="5 0 0 0">
<Border BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="3"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"/>
</Grid>
<Grid >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left"
MinHeight="20">
<Line x:Name="lineH" Stroke="{TemplateBinding Foreground}"
StrokeThickness="1" X1="0" X2="10"
Y1="0" Y2="0" StrokeDashArray="1 2" Stretch="UniformToFill"
VerticalAlignment="Center" HorizontalAlignment="Left"
UseLayoutRounding="True" IsHitTestVisible="False"/>
<ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Left" Width="14"
Height="14" Margin="3 0 0 0"
VerticalAlignment="Center" 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>
<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>
</ToggleButton.Template>
</ToggleButton>
<Button x:Name="Header" ClickMode="Hover"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Cursor="{TemplateBinding Cursor}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="3 0"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
IsTabStop="False" TabNavigation="Once">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
Duration="0" To="0.5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent" >
<ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"/>
</Grid>
</Grid>
</ControlTemplate>
</Button.Template>
<Button.Content>
<Grid Background="Transparent" >
<ContentPresenter Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
</Grid>
<ContentControl x:Name="ExpandSite" Grid.Row="1"
Margin="20 0 0 0"
Visibility="Collapsed"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<ItemsPresenter />
</ContentControl>
<Border Grid.Row="1" Margin="20 0 0 0" IsHitTestVisible="False">
<Line x:Name="line" Stroke="{TemplateBinding Foreground}"
StrokeThickness="1" X1="0" X2="0"
Y1="0" Y2="2" StrokeDashArray="1 1"
Stretch="UniformToFill"
Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Left"
UseLayoutRounding="False" Opacity="0" Visibility="Collapsed"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="controls:TreeView" x:Key="TreeType">
<Setter Property="Background" Value="{StaticResource MyTreeBackground}"/>
<Setter Property="Foreground" Value="#FFD2DCA6" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1" StartPoint="0.2,0">
<GradientStop Color="#FFB1B1B1" Offset="0.391"/>
<GradientStop Color="#46FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="True" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TreeView">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused" />
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
</VisualState>
<VisualState x:Name="InvalidFocused">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="InnerBorder" BorderThickness="1" CornerRadius="4"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
Padding="0">
<ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}"
Background="{x:Null}"
BorderBrush="Transparent" BorderThickness="0" Margin="0"
TabNavigation="{TemplateBinding TabNavigation}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
使用
<Grid x:Name="LayoutRoot" Background="White">
<sdk:TreeView Style="{StaticResource TreeType}">
<sdk:TreeViewItem Header="AAAAAAA">
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
</sdk:TreeViewItem>
<sdk:TreeViewItem Header="BBBBBBB" />
<sdk:TreeViewItem Header="CCCCCCC" />
<sdk:TreeViewItem Header="DDDDDDD" />
<sdk:TreeViewItem Header="EEEEEEE" >
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
<sdk:TreeViewItem Header="FFFFFFFFFFFF" />
</sdk:TreeViewItem>
</sdk:TreeView>
</Grid>