TreeVIew自定义样式

效果图

 

 

代码

 

<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>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值