WPF如何在ComboBox内嵌TreeView选中节点后设置ComboBox文本

核心问题分析 #

原代码中ComboBox仅包含一个嵌套TreeView的ComboBoxItem，导致ComboBox的SelectedItem始终指向这个容器项而非TreeView的选中节点；同时IsEditable="False"时，ComboBox的Text属性无法直接控制显示内容，显示逻辑完全依赖选中项的呈现，因此设置cmbPopup.Text无效，最终显示整个TreeView。

解决方案代码实现 #

1. 修改UserControl XAML代码

自定义ComboBox模板，将TreeView直接作为弹出内容，而非嵌套在ComboBoxItem中，同时绑定选中节点到ComboBox的选中项：

<UserControl x:Class="Some.Namespace.TreeViewPopup" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Some.Namespace">
    <UserControl.Resources>
        <!-- 自定义ComboBox下拉按钮样式 -->
        <Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="20"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="Border" 
                                    Grid.ColumnSpan="2"
                                    CornerRadius="2"
                                    Background="#F0F0F0"
                                    BorderBrush="#888"
                                    BorderThickness="1"/>
                            <Border x:Name="Border2" 
                                    Grid.Column="0"
                                    CornerRadius="2,0,0,2"
                                    Margin="1"
                                    Background="White"
                                    BorderBrush="#888"
                                    BorderThickness="0,0,1,0"/>
                            <Path x:Name="Arrow" 
                                  Grid.Column="1"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Data="M 0 0 L 4 4 L 8 0 Z"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#E8E8E8"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#E0E0E0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <ComboBox x:Name="cmbPopup" 
              Height="25"
              IsEditable="False"
              DisplayMemberPath="Name"
              SelectedItem="{Binding SelectedNode, RelativeSource={RelativeSource AncestorType=UserControl}}">
        <!-- 自定义ComboBox模板，替换默认弹出内容 -->
        <ComboBox.Template>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton x:Name="toggleButton" 
                                  Template="{StaticResource ComboBoxToggleButton}"
                                  IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                  ClickMode="Press"/>
                    <ContentPresenter x:Name="contentPresenter"
                                      Content="{TemplateBinding SelectionBoxItem}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      IsHitTestVisible="False"/>
                    <Popup x:Name="popup"
                           Placement="Bottom"
                           IsOpen="{TemplateBinding IsDropDownOpen}"
                           AllowsTransparency="True"
                           Focusable="False"
                           PopupAnimation="Slide">
                        <Border x:Name="dropDownBorder"
                                Background="White"
                                BorderThickness="1"
                                BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
                            <!-- 直接放置TreeView作为弹出内容 -->
                            <TreeView x:Name="tvNodes" 
                                      Width="200" 
                                      Background="Transparent" 
                                      BorderThickness="0" 
                                      SelectedItemChanged="tvNodes_SelectedItemChanged">
                                <TreeView.ItemTemplate>
                                    <HierarchicalDataTemplate DataType="{x:Type local:Node}" ItemsSource="{Binding Nodes}">
                                        <TextBlock Text="{Binding Name}" />
                                    </HierarchicalDataTemplate>
                                </TreeView.ItemTemplate>
                            </TreeView>
                        </Border>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="dropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="toggleButton" Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ComboBox.Template>
    </ComboBox>
</UserControl>

2. 修改UserControl后台代码

将SelectedNode改为依赖属性，实现与ComboBox的绑定，并添加选中节点后关闭下拉框的逻辑：

public partial class TreeViewPopup : UserControl
{
    // 定义选中节点的依赖属性，用于与ComboBox绑定
    public static readonly DependencyProperty SelectedNodeProperty = DependencyProperty.Register(
        nameof(SelectedNode),
        typeof(Node),
        typeof(TreeViewPopup),
        new PropertyMetadata(null));

    public Node SelectedNode
    {
        get => (Node)GetValue(SelectedNodeProperty);
        set => SetValue(SelectedNodeProperty, value);
    }

    public TreeViewPopup()
    {
        InitializeComponent();
    }

    private void tvNodes_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        SelectedNode = e.NewValue as Node;
        // 选中节点后自动关闭下拉框
        cmbPopup.IsDropDownOpen = false;
    }

    public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(
        nameof(ItemsSource),
        typeof(IEnumerable),
        typeof(TreeViewPopup),
        new PropertyMetadata(null, ItemsSourceChanged));

    public IEnumerable ItemsSource
    {
        get => GetValue(ItemsSourceProperty) as IEnumerable;
        set => SetValue(ItemsSourceProperty, value);
    }

    static void ItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue != e.OldValue && d is TreeViewPopup instance)
        {
            instance.tvNodes.ItemsSource = e.NewValue as IEnumerable;
        }
    }
}

关键优化点 #

• 取消ComboBoxItem容器，将TreeView直接作为ComboBox弹出内容，避免选中容器项的问题
• 通过DisplayMemberPath="Name"指定ComboBox头部显示节点的Name属性
• 将SelectedNode改为依赖属性，实现与ComboBox选中项的双向绑定
• 添加选中节点后自动关闭下拉框的逻辑，提升用户体验

内容的提问来源于stack exchange，提问作者Mc_Topaz