WPF实现树形下拉列表框(TreeComboBox)
前言树形下拉菜单是许多WPF应用程序中常见的用户界面元素，它能够以分层的方式展示数据，提供更好的用户体验。本文将深入探讨如何基于WPF创建一个可定制的树形下拉菜单控件，涵盖从原理到实际实现的关键步骤。
一、需求分析
树形下拉菜单控件的核心是将ComboBox与TreeView结合起来，以实现下拉时的树状数据展示。在WPF中，可以通过自定义控件模板、样式和数据绑定来实现这一目标。
我们首先来分析一下ComboBox控件的模板。
<ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="1" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
<theme:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MinWidth="{Binding ActualWidth, ElementName=templateRoot}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="dropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</theme:SystemDropShadowChrome>
</Popup>
<ToggleButton x:Name="toggleButton" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
<ContentPresenter x:Name="contentPresenter" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate> 从以上代码可以看出，其中的Popup控件就是下拉部分，那么按照常理，我们在Popup控件中放入一个TreeView控件即可实现该需求，但是现实情况远没有这么简单。我们开发一个控件，不仅要从外观上实现功能，还需要考虑数据绑定、事件触发、自定义模板等方面的问题，显然，直接放置一个TreeView控件虽然也能实现功能，但是从封装的角度看，它并不优雅，使用也不方便。那么有没有更好的方法满足以上需求呢？下面提供另一种思路，其核心思想就是融合ComboBox控件与TreeView控件模板，让控件既保留TreeView的特性，又拥有ComboBox的外观。
二、代码实现
2.1 编辑TreeView模板；
2.2 提取ComboBox的模板代码；
2.3 将ComboBox的模板代码移植到TreeView模板中；
2.4 将TreeView模板包含ItemsPresenter部分的关键代码放入ComboBox模板中的Popup控件内；
以下为融合后的xaml代码
<ControlTemplate TargetType="{x:Type local:TreeComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
</Grid.ColumnDefinitions>
<Popup
x:Name="PART_Popup"
Grid.ColumnSpan="2"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
Margin="1"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Placement="Bottom"
PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
<Border
x:Name="PART_Border"
Width="{Binding RelativeSource={RelativeSource AncestorType=local:TreeComboBox}, Path=ActualWidth}"
Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"
BorderThickness="1"
SnapsToDevicePixels="true">
<ScrollViewer
x:Name="_tv_scrollviewer_"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
CanContentScroll="false"
Focusable="false"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Popup>
<ToggleButton
x:Name="toggleButton"
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Style="{StaticResource ComboBoxToggleButton}" />
<ContentPresenter
x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
IsHitTestVisible="False" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Trigger>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
<Setter TargetName="_tv_scrollviewer_" Property="CanContentScroll" Value="true" />
</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> 以下为使用控件的代码。
<TreeComboBox
Width="315"
MinHeight="30"
Padding="5"
HorizontalAlignment="Center"
VerticalAlignment="Top"
VerticalContentAlignment="Stretch"
IsAutoCollapse="True"
ItemsSource="{Binding Collection}">
<TreeComboBox.SelectionBoxItemTemplate>
<ItemContainerTemplate>
<Border>
<TextBlock VerticalAlignment="Center" Text="{Binding Property1}" />
</Border>
</ItemContainerTemplate>
</TreeComboBox.SelectionBoxItemTemplate>
<TreeComboBox.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Collection}">
<TextBlock
Margin="5,0,0,0"
VerticalAlignment="Center"
Text="{Binding Property1}" />
</HierarchicalDataTemplate>
</TreeComboBox.ItemTemplate>
</TreeComboBox>三、运行效果
3.1 单选效果
3.2 多选效果
四、个性化外观
当控件默认外观无法满足需求时，我们可以通过编辑样式的方式来实现个性化外观，也可以引用第三方UI库样式，以下为使用MaterialDesign的效果。
4.1 单选效果
4.2 多选效果
来源:https://www.cnblogs.com/qushi2020/p/18115948
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]