自定义TreeView样式

已于 2022-07-07 15:36:52 修改
阅读量924 收藏 5
点赞数 1
分类专栏： 控件样式模板 文章标签： wpf
于 2022-07-07 15:34:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34581845/article/details/125659799
版权

自定义TreeView样式结果，实现类似VS的资源管理器折叠菜单效果

效果

在这里插入图片描述
注意：文件夹图标根据折叠情况变换，上图展示的图标使用了Icon也可以使用Image控制

关于Icon资源可以翻看前面的文章有介绍使用

思路

1：重定义TreeView的数据模板（HierarchicalDataTemplate） —— 能够帮助层级控件显示层级数据的模板是HierarchicalDataTemplate
2：重定义TreeViewItem的样式模板，绑定对应的数据内容（可根据自身数据需求处理）
3：模板中定义事件监控折叠开关，通过事件调整不同展示状态下的效果功能

xaml

<UserControl x:Class="Wpf.AvalonDock.UserControls.TestTreeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:BbFrame="clr-namespace:Wpf.AvalonDock.UserControls"
             xmlns:local="clr-namespace:Wpf.AvalonDock.UserControls"
             mc:Ignorable="d" x:Name="My_TV">
    <UserControl.Resources>
        <Style x:Key="TreeViewItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Fill" Color="#FF595959"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Stroke" Color="#FF262626"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Stroke" Color="#FF27C7F7"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Fill" Color="#FFCCEEFB"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Stroke" Color="#FF1CC4F7"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Fill" Color="#FF82DFFB"/>
        <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Fill" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Stroke" Color="#FF818181"/>
        <SolidColorBrush x:Key="TreeViewItemCheck_True" Color="#FF27C7F7" Opacity="0.3"/>
        <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="{StaticResource TreeViewItem.TreeArrow.Static.Fill}" Stroke="{StaticResource TreeViewItem.TreeArrow.Static.Stroke}">
                                <Path.RenderTransform>
                                    <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                                </Path.RenderTransform>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <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="{StaticResource TreeViewItem.TreeArrow.Static.Checked.Fill}"/>
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.Static.Checked.Stroke}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Stroke}"/>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Fill}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsChecked" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Stroke}"/>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Fill}"/>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="1,0,0,0"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="19" Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <ToggleButton x:Name="Expander" ClickMode="Press" PreviewMouseDown="ProductListItem_DoubleClick" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
                            <Border x:Name="Bd" Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                <!--<ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>-->
                                <StackPanel x:Name="CBbPropertyNodeName" Tag="{Binding CBbFrameType}" Width="{Binding ElementName=My_TV, Path=Width}"
                                            HorizontalAlignment="Left" VerticalAlignment="Center" 
                                            Orientation="Horizontal" ContextMenu="{Binding m_contextMenu}">
                                    <!--<Image VerticalAlignment="Center" Source="{Binding Image, Mode=TwoWay}" Width="16" Height="16"/>-->
                                    <TextBlock x:Name="My_Icon" FontSize="18" Foreground="#558CDD" 
                                               Text="{Binding Icon, Mode=TwoWay}" Margin="2"
                                               FontFamily="pack://application:,,,/Wpf.AvalonDock;component/Font/#icomoon"/>
                                    <TextBlock x:Name="CBbPropertyNodeTName" VerticalAlignment="Center" HorizontalAlignment="Center"
                                               Height="25" Padding="5"
                                               Text="{Binding m_strName, Mode=TwoWay, UpdateSourceTrigger=LostFocus}"/>
                                </StackPanel>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource TreeViewItemCheck_True}"/>
                                <Setter Property="Foreground" Value="Black"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="Transparent"/>
                                <Setter Property="Foreground" Value="Black"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="Gray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <EventSetter Event="MouseDoubleClick" Handler="ProductListItem_DoubleClick"/>
            <!--<Style.Triggers>
                <Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>-->
        </Style>
    </UserControl.Resources>
    <TreeView Name="TView" BorderThickness="0">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type BbFrame:CBbPropertyNodeItem}" ItemsSource="{Binding Path=Children}">
                <!--<StackPanel x:Name="CBbPropertyNodeName" Tag="{Binding CBbFrameType}" Width="{Binding ElementName=My_TV, Path=Width}"
                            HorizontalAlignment="Center" VerticalAlignment="Center" Background="Red"
                            PreviewMouseLeftButtonDown="CBbPropertyNodeName_PreviewMouseLeftButtonDown"
                            Orientation="Horizontal" ContextMenu="{Binding m_contextMenu}">
                    <Image VerticalAlignment="Center" Source="{Binding Icon}" Width="16" Height="16"/>
                    <TextBlock x:Name="CBbPropertyNodeTName" VerticalAlignment="Center" HorizontalAlignment="Center"
                               Height="25" Padding="5"
                               Text="{Binding m_strName, Mode=TwoWay, UpdateSourceTrigger=LostFocus}"/>
                </StackPanel>-->
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</UserControl>

cs

    public partial class TestTreeView : UserControl
    {
        public ObservableCollection<CBbPropertyNodeItem> itemList { get; set; } 
            = new ObservableCollection<CBbPropertyNodeItem>();
        public TestTreeView()
        {
            InitializeComponent();

            List<string> list = new List<string>();
            for (int i = 1; i < 100; i++)
            {
                list.Add(String.Format("Test {0}", i));
            }
            //My_TreeView.ItemsSource = list;

            CBbPropertyNodeItem cBbPropertyNodeItem1 = new CBbPropertyNodeItem()
            {
                Icon = "\ued96",
                Image = "/Images/folder-close.png",
                m_strName ="Test 1",
                Children = new ObservableCollection<CBbPropertyNodeItem>()
                { 
                     new CBbPropertyNodeItem()
                     {
                          Icon = "\ued96",
                          Image = "/Images/folder-close.png",
                          m_strName ="Test 1_1",
                     },
                     new CBbPropertyNodeItem()
                     {
                          Icon = "\ued96",
                          Image = "/Images/folder-close.png",
                          m_strName ="Test 1_2",
                     },
                     new CBbPropertyNodeItem()
                     {
                          Icon = "\ued96",
                          Image = "/Images/folder-close.png",
                          m_strName ="Test 1_3",
                     }
                }
            };
            CBbPropertyNodeItem cBbPropertyNodeItem2 = new CBbPropertyNodeItem()
            {
                Icon = "\ued96",
                Image = "/Images/folder-close.png",
                m_strName = "Test 2",
                Children = new ObservableCollection<CBbPropertyNodeItem>()
                {
                     new CBbPropertyNodeItem()
                     {
                          Icon = "\ued96",
                          Image = "/Images/folder-close.png",
                          m_strName ="Test 2_1",
                     },
                     new CBbPropertyNodeItem()
                     {
                          Icon = "\ued96",
                          Image = "/Images/folder-close.png",
                          m_strName ="Test 2_2",
                     },
                     new CBbPropertyNodeItem()
                     {
                          Icon = "\ued96",
                          Image = "/Images/folder-close.png",
                          m_strName ="Test 2_3",
                     }
                }
            };
            itemList.Add(cBbPropertyNodeItem1);
            itemList.Add(cBbPropertyNodeItem2);
            this.TView.SetBinding(TreeView.ItemsSourceProperty, new Binding("itemList")
            {
                Source = this
            });
        }

        private void ProductListItem_DoubleClick(object sender, MouseButtonEventArgs e)
        {
            TreeViewItem treeViewItem = sender as TreeViewItem;
            ToggleButton toggleButton = sender as ToggleButton;
            CBbPropertyNodeItem cBbPropertyNodeItem;
            if (toggleButton != null)
            {
                cBbPropertyNodeItem = toggleButton.DataContext as CBbPropertyNodeItem;
                cBbPropertyNodeItem.IsExpanded = toggleButton.IsChecked == false ? true : false;               
            }
            else
            {
                cBbPropertyNodeItem = treeViewItem.Header as CBbPropertyNodeItem;
                cBbPropertyNodeItem.IsExpanded = treeViewItem.IsExpanded == false ? true : false;
            }
            if (cBbPropertyNodeItem.IsExpanded)
            {
                cBbPropertyNodeItem.Image = "/Images/file-open.png";
                cBbPropertyNodeItem.Icon = "\ued95";
            }
            else
            {
                cBbPropertyNodeItem.Image = "/Images/folder-close.png";
                cBbPropertyNodeItem.Icon = "\ued96";
            }
        }
        private void CBbPropertyNodeName_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            CBbPropertyNodeItem cBbPropertyNodeItem =((StackPanel)sender).DataContext as CBbPropertyNodeItem;
            if (cBbPropertyNodeItem != null)
            {
                foreach (var item in itemList)
                {
                    if ((CBbPropertyNodeItem)item== cBbPropertyNodeItem)
                    {
                        item.IsExpanded = item.IsExpanded == false ? true:false;
                        if (!item.IsExpanded)
                        {
                            foreach (var items in item.Children)
                            {
                                ((CBbPropertyNodeItem)items).IsExpanded = false;
                            }
                        }
                    }
                }
            }
        }
    }

源码

https://download.csdn.net/download/qq_34581845/85945990

~忘记了时间~
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
最漂亮的treeview（wpf）
01-22
截面很漂亮的treeview（wpf） 直接运行 代码简单易懂 我是个初学者 对我的帮助很大
WPF 自定义TreeView控件样式，仿QQ联系人列表
weixin_53370274的博客
12-15 1606
根据思路，我们需要设置三个样式，TreeView样式，TreeViewItem样式，HierarchicalDataTemplate分层模板样式。像这种联系人列表一般涉及到多层级数据，而且有很多数据是需要动态更新的，如果通过手动一条条增加数据反而更复杂，而且不方便。默认的TreeView控件四周会有边距，因此需要设置下TreeView的样式。另外鼠标经过和鼠标选中的背景色需要变化，因此还需要设置TreeViewItem的样式。分层模板中存在两种样式，一种是分组样式，一种是人员样式。
WPF 基础控件之 TreeView 样式
dotNET跨平台
06-15 1861
其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButton16.Slider TreeView 实现...
WPF TreeView 控件样式
腻害
03-08 1579
TreeView 树视图（TreeView）控件以树的方式显示集合，可以显示层次关系。 Nodes属性 该属性用于设计TreeView控件的节点。 具体方法 在TreeView的属性栏找到Nodes，点击 …，弹出“TreeNode编辑器”窗口。 “添加根”按钮可以为TreeView控件添加根结点，添加根结点后，“添加子级”按钮变为可用。 ImageList属性 用于设置从中获取图像的ImageList控件，该属性的设置必须与ImageList控件相配合。 Scrollable属性 用于指示当TreeVie
自定义treeview_Demo
03-12
在Windows Forms（Winform）开发中，`TreeView`控件是一种常见的用户界面元素，...在项目"自定义treeview_Demo"中，你将找到具体实现这些功能的代码示例，通过学习和实践，你可以进一步提升自己在Winform开发中的能力。
Winform自定义绘制TreeView及实现多选功能
12-12
本文将深入探讨如何自定义绘制`TreeView`并实现多选功能，同时介绍如何修改`TreeNode`的样式，添加背景板，改变字体，并在节点后添加按钮。 首先，`TreeView`控件的默认行为不支持多选。为了实现多选功能，我们需要...
WPF自定义TreeView控件样式实现QQ联系人列表效果
08-27
本文将详细介绍如何在WPF中自定义TreeView控件样式以实现类似QQ联系人列表的效果。 首先，我们要理解QQ联系人列表的特点，它通常包含多级数据，并且有明显的分组与个人标识。在WPF中，我们可以使用...
WPF中的自定义TreeView布局
04-02
然而，WPF内置的TreeView布局可能无法满足所有设计需求，有时我们需要对其进行自定义，以适应特定的界面样式或者交互方式。本主题将深入探讨如何在WPF中实现自定义的TreeView布局。 首先，我们要理解WPF中的...
QML TreeView 自定义样式加上节点可拖动
11-11
本文将深入探讨如何自定义`TreeView`的样式，并实现节点的拖放功能，这在创建用户界面时非常有用，尤其是当你需要允许用户重新组织数据结构时。 首先，我们关注的是`TreeView`的样式定制。在QML中，你可以通过`...
WPF TreeView自定义可视化树样式
热门推荐
qq_20758141的博客
05-27 2万+
目前项目中效果（没上传，需要的留言）   以下例子 最终效果： TreeView 折叠箭头，带垂直方向、水平方向层级线条（如图） 来看看怎么一步步实现吧~ 补充一点，代码本地试过，现剪切的所以可能部分运行显示与截图不完全一样， 但基本结构是没有问题的，可以自己修改内容试试看！~   先做一个基础点的样式（图左侧） （右侧是打印出来节点生成顺序，具体输出含义看本页的【转换器...
WPF一个完整的TreeView使用实例：（一）自定义控件样式+数据源绑定+动态添加父子节点
dnazhd的博客
04-30 8304
TreeView控件可在树结构中显示分层数据，其中的项可以展开和折叠。它可以包含多种类型的控件，如Button、Lable、Image等控件，可以通过绑定到数据源并使用HieratchicalDataTemplate对象来填充其树。可以修改默认ControlTemplate以使控件具有独特的外观。 这里举一个完整的TreeView实例来进行说明。本节主要实现自定义控件样式+数据源绑定+动态添加父...
【WPF应用35】深度解析WPF中的TreeView控件：功能、用法、特性与最佳实践
最新发布
qq_35320456的博客
04-05 3157
深度解析WPF中的TreeView控件：功能、用法、特性与最佳实践
WPF 控件 (二十、TreeView)
LyRics1996的博客
04-27 869
【代码】WPF 控件 (二十、TreeView)
QTreeView样式表基操作（QSS）
weixin_44436546的博客
10-14 5200
Qt样式表基本操作（QSS） QTreeView样式操作
WPF自定义TreeView滚动条样式
忧郁的蛋的专栏
09-29 391
根据客户需求，要在TreeView目录树上显示10万+个节点，但是目录树显示10万加节点后，整个页面操作起来非常卡，所以给目录树增加了虚拟化设置。但是虚拟化设置一直没生效，后来经过排查发现是使用的自定义滚动条导致了虚拟化设置没有生效，后来自己写了一个滚动条样式，问题解决了。以下的滚动条样式，是通过原生的滚动条模板样式基础上进行简单修改的，增加了一些注释。目录树虚拟化设置属性。
TreeView
zoujinjishu的专栏
10-11 6677
TreeView ASP.NET TreeView 控件是一个用于呈现 TreeView UI 的功能强大的服务器控件，如下图中所示。该控件支持各种编程模型，从静态定义的树、到动态构造的树以及数据绑定的树几乎无所不包。TreeView 的呈现是可以完全自定义的，从而允许该控件具有多种外观。TreeView 支持回发样式的事件以及简单的超链接导航，还支持唯一的事件处理模型，该模型允许从客户端直
wpf TreeView样式默认展开所有节点
钟一白的博客
06-28 2544
wpf
WPF 类windows资源管理器（一）——TreeViewItem改造
卓尔的专栏
01-26 2558
目标：做一个类似windows资源管理器的TreeView控件，用于展示层次化的数据结构。 功能要求： 1. 鼠标悬停某一项时，改变整行的背景（而不是只改变内容部分的背景） 2. 可以自由拖动项 指定TreeView控件的数据源时，它默认会以TreeViewItem来展示每一个项。因此，TreeViewItem的样式，就非常重要。 一、TreeViewItem的布局 1.1 反编译TreeViewItem控件的Template属性，得到WPF默认的模板代码： <!-- ...
WPF 自定义TreeViewItem样式
姑爷一典型的专栏
10-30 2万+
首先自定义样式的目的是觉得
wpf 自定义treeview
12-13
当我们需要自定义TreeView时，可以使用WPF提供的各种功能和特性来实现。下面是一些实现自定义TreeView的方法： 1. 自定义树节点的外观：可以使用WPF的样式和模板来修改树节点的外观，例如更改节点的背景颜色、字体...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值