WPF 自定义TreeViewItem样式

最新推荐文章于 2025-03-14 14:56:29 发布
最新推荐文章于 2025-03-14 14:56:29 发布
阅读量2.3w 收藏 10
点赞数 6
分类专栏： WPF 文章标签： wpf treeview Style
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lvguoshan/article/details/40624961
版权
本文详细介绍了如何使用XAML实现TreeViewItem的定制样式，并通过事件处理实现场景交互，包括箭头样式设定及点击事件响应。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先直接看运行结果：


直接上代码吧

箭头的样式：

<Style x:Key="PresetDownArrowStyle"  TargetType ="{x:Type Label}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Label}">
                        <Border x:Name="PART_Background"  Background="#02000000">
                            <Path Data="F1 M439.22619,483.9185 L384.0285,515.8315 329.32864,483.9185 329.32864,468.9785 384.0285,501.8875 439.22619,468.9785 z M439.22619,461.0095 L384.0285,492.9225 329.32864,461.0095 329.32864,446.0685 384.0285,479.4765 439.22619,446.0685 z" Fill="Black" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

TreeViewItem的样式：

<Style TargetType="TreeViewItem">
            <Style.Resources>
                <LinearGradientBrush x:Key="ItemAreaBrush" StartPoint="0.5, 0" EndPoint="0.5, 1">
                    <GradientStop Color="#66000000" Offset="0" />
                    <GradientStop Color="#22000000" Offset="1" />
                </LinearGradientBrush>
                <LinearGradientBrush x:Key="SelectedItemAreaBrush" StartPoint="0.5, 0" EndPoint="0.5, 1">
                    <GradientStop Color="Orange" Offset="0" />
                    <GradientStop Color="OrangeRed" Offset="1" />
                </LinearGradientBrush>
                <LinearGradientBrush x:Key="ItemBorderBrush" StartPoint="0.5, 0" EndPoint="0.5, 1">
                    <GradientStop Color="LightGray" Offset="0" />
                    <GradientStop Color="Gray" Offset="1" />
                </LinearGradientBrush>
                <LinearGradientBrush x:Key="SelectedItemBorderBrush" StartPoint="0.5, 0" EndPoint="0.5, 1">
                    <GradientStop Color="Yellow" Offset="0" />
                    <GradientStop Color="Black" Offset="1" />
                </LinearGradientBrush>
                <DropShadowBitmapEffect x:Key="DropShadowEffect" />
            </Style.Resources>
            <Setter Property="Cursor" Value ="Hand"/>
            <!-- Make each TreeViewItem show it's children in a horizontal StackPanel. -->
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" IsItemsHost="True" Margin="10,2" Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate x:Name="Parent" TargetType="TreeViewItem">
                        <Grid Margin="2" Width="1500">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0" Name="Bd" Background="{StaticResource ItemAreaBrush}" BorderBrush="{StaticResource ItemBorderBrush}" BorderThickness="0.6" Padding="6" PreviewMouseDown="Tree_MouseDown" Tag="{Binding ElementName=PART_Header}">
                                <ContentPresenter Name="PART_Header" ContentSource="Header" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0" />
                            </Border>
                            <Label x:Name="BtnArrow" Width="25" Height="15" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Style="{DynamicResource PresetDownArrowStyle}" PreviewMouseDown="Tree_MouseDown" Tag="{Binding ElementName=PART_Header}" IsEnabled="False"></Label>
                            <!--{RelativeSource FindAncestor,AncestorType={x:Type TreeViewItem},AncestorLevel=2}}<-->
                            <ItemsPresenter x:Name="GridChild" Grid.Row="1"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!--When the item is selected in the TreeView, use the "selected" colors and give it a drop shadow. -->
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Bd" Property="Panel.Background" Value="{StaticResource SelectedItemAreaBrush}" />
                                <Setter TargetName="Bd" Property="Border.BorderBrush" Value="{StaticResource SelectedItemBorderBrush}" />
                                <Setter TargetName="Bd" Property="Border.BitmapEffect" Value="{StaticResource DropShadowEffect}" />
                                <Setter Property="IsExpanded"  Value="True"/>
                                
                            </Trigger>
                            <!--<MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasItems"  Value="true"/>
                                    <Condition Property="IsExpanded"  Value="true"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="GridChild"  Property="Visibility"  Value="Collapsed"/>
                            </MultiTrigger>-->
                            <Trigger Property="IsSelected" Value="False">
                                <Setter Property="IsExpanded"  Value="False"/>
                            </Trigger>
                            <Trigger Property="HasItems"  Value="false">
                                <Setter TargetName="BtnArrow"  Property="Visibility"  Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="HasItems"  Value="true">
                                <Setter TargetName="BtnArrow"  Property="Visibility"  Value="Visible"/>
                            </Trigger>
                            
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter TargetName="GridChild"  Property="Visibility"  Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter TargetName="GridChild"  Property="Visibility"  Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

上面 TreeViewItem的样式中包含了事件、单纯的在XAML实现自定义对我来说有难度

所以在MainWindow.CS中定义了事件：

//点击事件
        private void Tree_MouseDown(object sender, MouseButtonEventArgs e)
        {
            TreeViewItem SelectedfItem = new TreeViewItem();
            if (sender.GetType() == typeof(Button))
            {
                Button btn = (Button)sender;
                System.Windows.Controls.ContentPresenter CP = (System.Windows.Controls.ContentPresenter)btn.Tag;
                SelectedfItem = (TreeViewItem)CP.TemplatedParent;
            }
            else if (sender.GetType() == typeof(Border))
            {
                Border btn = (Border)sender;
                System.Windows.Controls.ContentPresenter CP = (System.Windows.Controls.ContentPresenter)btn.Tag;
                SelectedfItem = (TreeViewItem)CP.TemplatedParent;
            }
            else if (e.Source.GetType() == typeof(TreeViewItem))
            {
                SelectedfItem = (TreeViewItem)sender;
            }
            
            SelectedfItem.IsExpanded = SelectedfItem.IsExpanded == true ? false : true;
        }

上面只是主要的样式如果要加入节点详细研究还得看源文件：

http://download.youkuaiyun.com/detail/lvguoshan/8101613

WPF 类windows资源管理器（一）——TreeViewItem改造
卓尔的专栏
01-26 2780
目标：做一个类似windows资源管理器的TreeView控件，用于展示层次化的数据结构。 功能要求： 1. 鼠标悬停某一项时，改变整行的背景（而不是只改变内容部分的背景） 2. 可以自由拖动项 指定TreeView控件的数据源时，它默认会以TreeViewItem来展示每一个项。因此，TreeViewItem的样式，就非常重要。 一、TreeViewItem的布局 1.1 反编译TreeViewItem控件的Template属性，得到WPF默认的模板代码： <!-- ...
WPF TreeView自定义可视化树样式
热门推荐
qq_20758141的博客
05-27 3万+
目前项目中效果（没上传，需要的留言）   以下例子 最终效果： TreeView 折叠箭头，带垂直方向、水平方向层级线条（如图） 来看看怎么一步步实现吧~ 补充一点，代码本地试过，现剪切的所以可能部分运行显示与截图不完全一样， 但基本结构是没有问题的，可以自己修改内容试试看！~   先做一个基础点的样式（图左侧） （右侧是打印出来节点生成顺序，具体输出含义看本页的【转换器...
WPF自定义TreeViewItem 样式
10-30
WPF 自定义TreeViewItem的样式 优快云 博客中有界面展示 http://blog.youkuaiyun.com/lvguoshan/article/details/40624961
深入理解WPF TreeView控件操作
最新发布
weixin_42181686的博客
03-14 951
TreeView控件是图形用户界面中的一种常用组件，主要用于以树状结构展示信息，以层级方式组织数据。在应用程序中，它可以用来展示文件系统的目录结构、组织架构或者任何需要层次化展示的信息。TreeView控件在XAML中除了基本的声明外，还可以配置多项属性和事件，以实现丰富的交互功能。常见的属性包括HeaderHeightWidth等，用于设置TreeView的基本显示效果。以下是几个重要属性和事件的简单介绍：Header: 设置TreeView控件上方显示的文本。Height和。
WPF 自定义TreeView控件样式，仿QQ联系人列表
weixin_33755649的博客
04-16 320
一、前言 TreeView控件在项目中使用比较频繁，普通的TreeView并不能满足我们的需求。因此我们需要滴对TreeView进行改造。下面的内容将介绍仿QQ联系人TreeView样式及TreeView数据绑定方法。 二、TreeView仿QQ联系人列表 准确的说不是仿QQ联系人列表，这个TreeView样式作为组织架构来使用更好。废话不多说，先看效果： 2.1、基本思路 像这种...
TreeView样式自定义
diesi2328的博客
03-21 749
---恢复内容开始--- wpf自带的TreeView样式相对比较简单，为了设计符合自己设想中的样式，从头理了一下xmal的样式定义流程。 1、新建ResourceDictionary，便于对自定义样式资源分类、管理 2、编写样式TreeView.xmal <ResourceDictionary xmlns="http://schemas.microsoft....
WPF利用TreeView自定义层级菜单
zhaojibolv的博客
11-12 1221
今天利用休息时间回顾整理一下利用TreeView制作菜单控件，最近加班比较多，整理时间不集中，可能有很多不合理和错误的地方，欢迎大家提出宝贵意见，接下来我会暂停一下控件整理，先把我用到的一些opencv视觉相关的算子整理一下，到时候发出来大家一起探讨学习一下。
WPF自定义左侧折叠菜单
11-27
通过以上步骤，我们可以创建出一个功能完备、易于扩展的WPF自定义左侧折叠菜单。在实际项目中，可能还需要考虑其他因素，如国际化支持、无障碍性等，但以上内容已涵盖了实现这一功能的核心技术点。在实践中不断优化...
WPF自定义TreeView控件样式实现QQ联系人列表效果
08-27
3. **TreeViewItem样式**：定义鼠标经过和选中时的背景色变化，提供更好的用户体验。 4. **IndentConverter**：转换器用于动态计算每一级的缩进距离，使得视觉上呈现出层次感。 5. **布尔转换器**：使用...
WPF自定义虚线树形控件
03-29
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现一个自定义的虚线树形控件。这个控件与WinForm中的树控件相似，具有虚线连接各个子节点的功能，并且可以展开和收缩节点。此外，每个...
WPF TreeView Win8 样式
didiao7566的专栏
06-04 403
WPF 的 TreeView 控件自带的样式如图 1 的左边所示，节点前的箭头还不错，但是选中效果实在是不给力，如果想更加华丽的话，那么很有必要把 TreeView 的样式好好自定义一番。我最后得到的结果如图 1 的右边所示，是一个 Win8 风格的 TreeView。 图 1 TreeView 样式对比 在 WPF 中，自定义控件的外观是一件非常简单的事情，但对于 TreeVi...
WPF TreeView控件样式
03-28
自定义 TreeView控件样式（自定义节点样式大小、形状）。
wpf Treeview多种样式
04-23
wpf 多种treeview样式 vs2008
WPF TreeView控件的图树自定义布局样式
04-08
显示如何使用WPF TreeView控件绘制带有连接线的图形样式层次结构。
WPF的TreeView带连接线样式[免费]
09-24
TreeView原始样式是不带连接的，本资源通过Style重写TreeViewItem样式，实现带连接线样式，这里提供源代码希望对各位有帮助。
WPF中的高级自定义TreeView布局
04-02
评论WPF TreeView的高级布局自定义。
自定义TreeView样式
~忘记了时间~
07-07 1153
1：重定义TreeView的数据模板（HierarchicalDataTemplate） —— 能够帮助层级控件显示层级数据的模板是HierarchicalDataTemplate 2：重定义TreeViewItem的样式模板，绑定对应的数据内容（可根据自身数据需求处理） 3：模板中定义事件监控折叠开关，通过事件调整不同展示状态下的效果功能......
WPF树控件自定义样式
zh_98的博客
03-20 1000
<!--树控件样式--> <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z" /> <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"> <Sett...
WPF 可以自定义字段的Treeview
dearbigdog的博客
09-25 1199
private string FOLDER_ICON=@"Image/33.png"; private string TAG_ICON=@"Image/31.png"; private string EDITABLE_ICON=@"Image/6.png"; private void ShowTreeView() {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值