WPF TreeView和Expander的区别及不同适用场景 （踩坑记录）

已于 2023-02-10 11:37:53 修改
阅读量943 收藏 4
点赞数 1
文章标签： wpf c#
于 2023-02-09 17:34:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54675347/article/details/128939129
版权
文章讲述了在WPF开发中，由于TreeView要求父子节点控件类型一致的限制，作者转而使用Expander来实现类似功能。在使用Expander的过程中，解决了内容高度不可变、多选以及滚动条问题，最终实现了期望的交互效果。

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

一、TreeView要求父子节点控件类型需一致

最近在工作项目中，需要将ListBox （如图1）

图1 ListBox

修改为带展开按钮的树视图（如图2）

图2 带展开按钮的树视图

在修改时，本WPF新手首先想到的是TreeView，结合网上资料边学边折腾。最后发现，在绑定数据源的的前提下，TreeView在父子节点只能应用相同的控件种类。如下图，HierarchicalDataTemplate中的控件被同时应用到了父节点和子节点。

 <TreeView Height="NaN" Width="NaN" x:Name="treeView" ItemsSource="{Binding ListMeasureStation}" pu:TreeViewHelper.SelectedBackground="Red" pu:TreeViewHelper.ItemHeight="100" pu:TreeViewHelper.SelectMode="Any" pu:TreeViewHelper.TreeViewStyle="Standard">
                        <TreeView.ItemTemplate>
                            <HierarchicalDataTemplate ItemsSource="{Binding list_sleeper_detail}">
                                <StackPanel>
                                    <RadioButton Content="{Binding station_number}"/>
                                    <TextBlock Text="{Binding station_number}"/>
                                </StackPanel>
                                
                            </HierarchicalDataTemplate>
                        </TreeView.ItemTemplate>
                        <TreeView.ItemContainerStyle>
                            <Style TargetType="TreeViewItem"  BasedOn="{StaticResource {x:Type TreeViewItem}}">
                                <Setter Property="IsExpanded" Value="True" />
                            </Style>
                        </TreeView.ItemContainerStyle>
                    </TreeView>

图3 RadioButton和TextBlock控件被同时应用到了父节点和子节点

故在本次修改中，放弃TreeView改用Expander。

总结：TreeView只适用于多节点，且父子节点的控件类型相同的应用场景。

二、改用Expander

改用Expander编码时，先是参考了站内的这篇WPF 简易手风琴 (ListBox+Expander)文章，编译运行时发现Expander的内容高度不能改变，查询相关资料Template，ItemsPanel，ItemContainerStyle ，ItemTemplate四个属性辨析后，高度可变。编码大致思路：ListBox套Expander再套ListBox。（由于还未将Style写进Resources中，故代码比较冗余）

<ListBox x:Name="ItemBox" MaxHeight="1500" Width="350" ItemsSource="{Binding ListMeasureStation}" Template="{DynamicResource ListBoxControlTemplate_101}">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="{x:Type ListBoxItem}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                            <Expander  Background="#f2f2f2" pu:ExpanderHelper.ExpanderStyle="Classic">
                                                <Expander.Header>
                                                    <Border Height="60" Width="330" >
                                                        <TextBlock Text="{Binding station_number,StringFormat={}第{0}站}" FontSize="32" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                                    </Border>
                                                </Expander.Header>
                                                <Expander.Content>
                                                    <ListBox MaxHeight="1500" SelectedItem="{Binding Source={StaticResource Locator},Path=MeasureDetail.SleeperDetailSingle}" SelectedIndex="{Binding Source={StaticResource Locator},Path=MeasureDetail.SelectedIndex}" ItemsSource="{Binding list_sleeper_detail}" Template="{DynamicResource ListBoxControlTemplate_101}">
                                                        <behaviors:Interaction.Behaviors>
                                                            <func:AutoScrollBehavior />
                                                        </behaviors:Interaction.Behaviors>
                                                        <ListBox.ItemContainerStyle>
                                                            <Style TargetType="{x:Type ListBoxItem}">
                                                                <Setter Property="Template">
                                                                    <Setter.Value>
                                                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                                                            <Border x:Name="border_Row" Background="#f2f2f2">
                                                                                <Grid x:Name="grid_Row" Height="90" Margin="0,10">
                                                                                    <Grid.ColumnDefinitions>
                                                                                        <ColumnDefinition Width="1*" />
                                                                                        <ColumnDefinition Width="4*" />
                                                                                    </Grid.ColumnDefinitions>
                                                                                    <TextBlock x:Name="txt_Num" Text="1" Loaded="TextBlock_Loaded" Margin="10,20,10,10" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#32D3CD" FontSize="32" FontWeight="Bold"/>
                                                                                    <Grid Grid.Column="1" Margin="0,10,0,0">
                                                                                        <Grid.RowDefinitions>
                                                                                            <RowDefinition Height="1*" />
                                                                                            <RowDefinition Height="1*" />
                                                                                        </Grid.RowDefinitions>
                                                                                        <TextBlock x:Name="txt_SleeperNumber" Text="{Binding sleeper_number,StringFormat={}{0}(编号)}" Margin="0" TextAlignment="Center" HorizontalAlignment="Left" Foreground="#000000" FontSize="26" FontFamily="苹方-简, 苹方-简-Normal" />
                                                                                        <TextBlock x:Name="txt_Footage" Text="{Binding footage,StringFormat={}DK{0:F5}}" Margin="0" TextAlignment="Center" HorizontalAlignment="Left" Foreground="#000000" FontSize="26"/>
                                                                                    </Grid>
                                                                                </Grid>
                                                                            </Border>
                                                                            <ControlTemplate.Triggers>
                                                                                <Trigger Property="IsSelected" Value="false">
                                                                                    <Setter Property="Foreground" TargetName="txt_SleeperNumber" Value="black" />
                                                                                    <Setter Property="Foreground" TargetName="txt_Footage" Value="black" />
                                                                                    <Setter Property="Background" TargetName="grid_Row" Value="white" />
                                                                                </Trigger>
                                                                                <Trigger Property="IsSelected" Value="true">
                                                                                    <Setter Property="Foreground" TargetName="txt_Num" Value="white" />
                                                                                    <Setter Property="Foreground" TargetName="txt_SleeperNumber" Value="white" />
                                                                                    <Setter Property="Foreground" TargetName="txt_Footage" Value="white" />
                                                                                    <Setter Property="Background" TargetName="grid_Row" Value="#6f99fe" />
                                                                                </Trigger>
                                                                            </ControlTemplate.Triggers>
                                                                        </ControlTemplate>
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </Style>
                                                        </ListBox.ItemContainerStyle>
                                                    </ListBox>
                                                </Expander.Content>
                                            </Expander>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>

实现的效果如下：

图4 ListBox套Expander再套ListBox 使用ItemContainerStyle自定义ListBoxItem子项的控件样式

自我批判：

1、有没有一种可能，找一个完善的UI控件库就不必这么大费周折了。。。

2、或许有更好的解决方案？

三、Expander和ListBox互相嵌套时的“bug”

主体建好后，就到了修bug时间了。之所以bug打引号，是因为有些点不算bug，但影响软件实际使用时的人机交互。

“bug”列表：

  1. 实际只需要同时展开某一个Expander的内容，不需要同时展开多个Expander。

  1. 最内层的多个ListBox的选中项需是唯一的，不能出现如图4中同时选中两个最内层元素的情况。

  1. 鼠标指针停靠在Expander内容区时，默认只会触发内层ListBox的滚动效果，无法实现外层ListBox的滚动。

经过一番折腾，找到了对应的解决方案。

解决方案：

  1. 将Expander的IsExpanded属性绑定到父容器ListBoxItem的IsSelected属性。

 <Expander MaxHeight="900" Background="Transparent" pu:ExpanderHelper.ExpanderStyle="Standard" BorderThickness="0" IsExpanded="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=ListBoxItem},  Path=IsSelected}">

  1. 放弃SelectedItem，改用 SelectedValue。当在ListBox中找不到对应的SelectedItem时，绑定SelectedItem属性不会取消选择原选项。而绑定SelectedValue属性会取消选择原选项。ps：SelectedValue属性取消选择多个原选项时，会多次触发SelectionChanged事件，可能导致SelectedIndex属性跳变多次，丢失正确index值。

<ListBox SelectedValue="{Binding MySelectedItem}" />

  1. 暂缓处理。（在修复前两个bug后，此bug的问题得到缓冲，后续处理时再补充此文）

图5 最终效果

最终版代码：

<ListBox x:Name="lbox_MeasureStation" MaxHeight="1500" Width="350" ItemsSource="{Binding ListMeasureStation}" Template="{DynamicResource ListBoxControlTemplate_101}" BorderThickness="0" Background="Transparent">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="{x:Type ListBoxItem}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                            <Expander MaxHeight="900" Background="Transparent" pu:ExpanderHelper.ExpanderStyle="Standard" BorderThickness="0" IsExpanded="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=ListBoxItem},  Path=IsSelected}">
                                                <Expander.Header>
                                                    <Border Height="60" Width="330">
                                                        <TextBlock Text="{Binding station_number,StringFormat={}第{0}站}" FontSize="32" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                                    </Border>
                                                </Expander.Header>
                                                <Expander.Content>
                                                    <ListBox x:Name="lbox_MeasureDetail" MaxHeight="900" SelectionChanged="lbox_MeasureDetail_SelectionChanged" SelectedValue="{Binding Source={StaticResource Locator},Path=MeasureDetail.SleeperDetailSingle}" ItemsSource="{Binding list_sleeper_detail}" Template="{DynamicResource ListBoxControlTemplate_101}" BorderThickness="0" Background="Transparent">
                                                        <behaviors:Interaction.Behaviors>
                                                            <func:AutoScrollBehavior />
                                                        </behaviors:Interaction.Behaviors>
                                                        <i:Interaction.Triggers>
                                                            <i:EventTrigger EventName="SelectionChanged">
                                                                <mvvm:EventToCommand Command="{Binding Source={StaticResource Locator},Path=MeasureDetail.DataSwitchCommand}" />
                                                            </i:EventTrigger>
                                                        </i:Interaction.Triggers>
                                                        <ListBox.ItemContainerStyle>
                                                            <Style TargetType="{x:Type ListBoxItem}">
                                                                <Setter Property="Template">
                                                                    <Setter.Value>
                                                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                                                            <Border x:Name="border_Row" Background="#f2f2f2">
                                                                                <Grid x:Name="grid_Row" Height="90" Margin="0,10">
                                                                                    <Grid.ColumnDefinitions>
                                                                                        <ColumnDefinition Width="1*" />
                                                                                        <ColumnDefinition Width="4*" />
                                                                                    </Grid.ColumnDefinitions>
                                                                                    <TextBlock x:Name="txt_Num" Text="1" Loaded="TextBlock_Loaded" Margin="10,20,10,10" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#32D3CD" FontSize="32" FontWeight="Bold" />
                                                                                    <Grid Grid.Column="1" Margin="0,10,0,0">
                                                                                        <Grid.RowDefinitions>
                                                                                            <RowDefinition Height="1*" />
                                                                                            <RowDefinition Height="1*" />
                                                                                        </Grid.RowDefinitions>
                                                                                        <TextBlock x:Name="txt_SleeperNumber" Text="{Binding sleeper_number,StringFormat={}{0}}" Margin="0" TextAlignment="Center" HorizontalAlignment="Left" Foreground="#000000" FontSize="26" />
                                                                                        <TextBlock x:Name="txt_Footage" Text="{Binding footage,StringFormat={}DK{0:F5}}" Margin="0" TextAlignment="Center" HorizontalAlignment="Left" Foreground="#000000" FontSize="26" Grid.Row="1" />
                                                                                    </Grid>
                                                                                </Grid>
                                                                            </Border>
                                                                            <ControlTemplate.Triggers>
                                                                                <Trigger Property="IsSelected" Value="false">
                                                                                    <Setter Property="Foreground" TargetName="txt_SleeperNumber" Value="black" />
                                                                                    <Setter Property="Foreground" TargetName="txt_Footage" Value="black" />
                                                                                    <Setter Property="Background" TargetName="grid_Row" Value="white" />
                                                                                </Trigger>
                                                                                <Trigger Property="IsSelected" Value="true">
                                                                                    <Setter Property="Foreground" TargetName="txt_Num" Value="white" />
                                                                                    <Setter Property="Foreground" TargetName="txt_SleeperNumber" Value="white" />
                                                                                    <Setter Property="Foreground" TargetName="txt_Footage" Value="white" />
                                                                                    <Setter Property="Background" TargetName="grid_Row" Value="#6f99fe" />
                                                                                </Trigger>
                                                                            </ControlTemplate.Triggers>
                                                                        </ControlTemplate>
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </Style>
                                                        </ListBox.ItemContainerStyle>
                                                    </ListBox>
                                                </Expander.Content>
                                            </Expander>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>

ListBox滚动条样式：

<ControlTemplate x:Key="ListBoxControlTemplate_101" TargetType="{x:Type ListBox}">
            <Border x:Name="Bd" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True">
                <ScrollViewer Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Padding="{TemplateBinding Padding}">
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" TargetName="Bd" Value="#FFD9D9D9" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <!--<Condition Property="IsGrouping" Value="True" />-->
                        <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False" />
                    </MultiTrigger.Conditions>
                    <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
昼星1239
关注
WPF中的TreeView
weixin_57726973的博客
11-29 714
如果你曾经使用过WinForms中的TreeView，你可能认为TreeView是一种容易使用但很难自定义的控件。在WPF中，情况有点不同，至少对新手来说，它上手有一些复杂，但是自定义却简单得多。就像其他WPF控件一样，TreeView一开始看起来完全没有样式，但是你可以轻易地为它创造样式。 在XAML结构化文件中，可以看到TreeView的ItemTemplate具有一个HierarchicalDataTemplate。通过设置这个模板的ItemsSource属性，我指示它使用Items属性来查找子元素
WPF TreeView自定义可视化树样式
热门推荐
qq_20758141的博客
05-27 3万+
目前项目中效果（没上传，需要的留言）   以下例子 最终效果： TreeView 折叠箭头，带垂直方向、水平方向层级线条（如图） 来看看怎么一步步实现吧~ 补充一点，代码本地试过，现剪切的所以可能部分运行显示与截图不完全一样， 但基本结构是没有问题的，可以自己修改内容试试看！~   先做一个基础点的样式（图左侧） （右侧是打印出来节点生成顺序，具体输出含义看本页的【转换器...
WPF应用基础篇---TreeView
weixin_30933531的博客
07-31 500
　　1.前言 　　最近有部分朋友经常问我，WPF的TreeView控件，如何用MVVM来实现绑定和显示？所以写下了这篇WPF应用基础篇---TreeView. 　2.介绍 案例浏览： 　　　　 　　　　　　　　　　　　　　　　　　图 1-1（案例结构图） 目的：本文中做了三个简单的Demo给刚刚入门或者入门不久而且不熟悉TreeView控件在MVVM中具体实现的朋友们...
深入理解WPF TreeView控件操作
最新发布
weixin_42181686的博客
03-14 1030
TreeView控件是图形用户界面中的一种常用组件，主要用于以树状结构展示信息，以层级方式组织数据。在应用程序中，它可以用来展示文件系统的目录结构、组织架构或者任何需要层次化展示的信息。TreeView控件在XAML中除了基本的声明外，还可以配置多项属性和事件，以实现丰富的交互功能。常见的属性包括HeaderHeightWidth等，用于设置TreeView的基本显示效果。以下是几个重要属性和事件的简单介绍：Header: 设置TreeView控件上方显示的文本。Height和。
WPF TreeView,Expander样式使用
weixin_30565199的博客
09-28 1019
效果如图，treeview 跟 expander的样式。 <Window.Resources> <local:LineConverter x:Key="lineConverter"></local:LineConverter> <SolidColorBrush x:Key="Expander.MouseOv...
wpf treeview
alohaCPP的专栏
11-02 2853
首先一个简单的Demo 如果这实现这个Demo呢？我们从MVC三个方面入手： TreeView的View 在WPF的TreeView，你可以定制每个节点的显示方式，包括为一个节点添加多个图标，这些都只需要在XAML中配置，而不必留下复杂的C#代码。例如： 1: TreeView Name="tvProperties" Width="250" Paddi
WPF TreeView
weixin_34088598的博客
10-10 131
1、不同于Windows Forms，当前WPF版本没有提供一个直接的方法可以把TreeView控件所有的节点都展开。一般来说，在WPF中有两种方法可以实现这个功能。第一种方法就像下面例子一样使用样式展开所有节点： <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pr...
探索WPF中的TreeView和Expander界面设计
在这个测试项目中，开发者可能需要验证TreeView和Expander控件是否按照设计正确显示数据，是否响应用户输入，并且确保它们在不同的使用场景下都能正常工作。测试的过程可能包括单元测试、集成测试和用户接受测试等，...
最漂亮的treeview（wpf）
01-22
在Windows Presentation Foundation (WPF) 中，TreeView是一个用于展示层级数据的强大控件。它允许用户以树状结构浏览和操作数据，广泛应用于文件系统、组织结构或者任何具有层次关系的数据展示。标题“最漂亮的...
WPF UI treeview
06-19
在Windows Presentation Foundation (WPF) 中，UI设计是构建用户界面的关键部分，而`TreeView`控件和`Expander`控件是实现高效且交互性强的界面不可或缺的元素。这两个组件在创建层次结构数据展示、折叠与展开功能时...
WPF 中TreeView的子节点选中时父节点也会高亮(样式）
05-26
在WPF（Windows Presentation Foundation）开发中，TreeView控件是一个常用元素，用于展示层次结构的数据。在实际应用中，我们经常需要实现一个功能：当用户选中TreeView中的某个子节点时，其对应的父节点也会自动...
wpf 漂亮的treeview
10-27
wpf 漂亮的treeview
WPF 虚线 TreeView
09-17
WPF自定义样式Treeview，带有虚线。
WPF之TreeView
Major_S的博客
05-23 282
【代码】WPF之TreeView。
WPF TreeView IsExpanded 绑定不上的问题
baitangran2976的博客
10-31 741
最近项目上需要通过MVVM来控制TreeView，其中需要需要控制通过搜索来定位某个节点，正常逻辑下，首先通过需要在树上面找到该节点，然后选中该节点，并将该节点的父节点展开，这个时候需要通过MVVM来控制，需要绑定起来，只是一直没有binding上，代码如下： MVVM示例代码： 1 using System; 2 using System.Collections.Ge...
WPF TreeView 简单实用
^@^lemon tea^@^
12-27 1112
本章讲述：TreeView使用，动态添加节点，数据绑定；本示例是改写了模板的； 1、首先，改写ToggleButton样式 &lt;Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"&gt; &lt;Setter Property="Focusable" Value="False"/&g
简单的通用TreeView(WPF)
weixin_30670151的博客
12-19 165
工作中要为很多类创建TreeView, 很多时候仅仅是因为要显示字段不同, 就得Ctrl+C、Ctrl+V复制一份几乎相同的代码, 这难免让人生厌, 于是希望像泛型集合的扩展方法那样, 可以在使用的时候灵活指定要显示哪个字段. 下面的TreeView要实现这样的逻辑: 父项目 被勾选 或者 取消勾选, 那么它的所有子项目全部改成 被勾选 或者 取消勾选; 只有所有...
WPF_TreeView控件
weixin_40899924的博客
03-15 219
TreeView 控件 使用数据绑定的TreeView
WPF遍历TreeView
breakbridge的博客
09-08 1043
TreeView TreeView中的Item有两种选择，要么是TreeViewItem，要么不是TreeViewItem。只有在TreeViewItem中才能继续添加元素，以此往复。 TreeViewItem中IsExpanded表示是否展开，IsSelected表示是否选中。 通过下述方法可以将TreeView所有项展开或者收起： private static void ExpandAllItems(ItemsControl control, bool isExpande...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值