WPF:ComboBox中的TreeView

17 wpf treeview combobox

我正在尝试将一个TreeView放在WPF中的ComboBox中,这样当组合框被删除时,用户就会获得一个分层列表而不是一个平面列表,而他们选择的任何节点都会成为ComboBox的选定值.

我已经搜索了很多关于如何实现这个目标但是我能找到的最好的只是潜在的解决方案,因为我对WPF来说是荒谬的,我无法工作.

我对WPF和数据绑定有足够的了解,我可以将我的数据放到树视图中,甚至可以在组合框中获取树视图,但是我能够完成的任何操作都不正常.我附上了截图来说明我的意思.在屏幕截图中,组合框是"打开"的,因此底部的树视图是我可以选择节点的地方,树形视图"在顶部"正在组合框顶部绘制,我想要所选节点的文本/值在要显示的树中.

基本上我不知道怎么做的是如何让treeview的currrently选择节点将其值返回到组合框,然后组合框将其用作选定值?

这是我目前使用的xaml代码:

        <ComboBox Grid.Row="0" Grid.Column="1"  VerticalAlignment="Top">
        <ComboBoxItem>
            <TreeView ItemsSource="{Binding Children}" x:Name="TheTree">
                <TreeView.Resources>
                    <HierarchicalDataTemplate DataType="{x:Type Core:LookupGroupItem}" ItemsSource="{Binding Children}">
                        <TextBlock Text="{Binding Path=Display}"/>                            
                    </HierarchicalDataTemplate>
                </TreeView.Resources>
            </TreeView>
        </ComboBoxItem>
    </ComboBox>
Run Code Online (Sandbox Code Playgroud)

截图: 树视图

vor*_*olf 16

对于那些仍然需要这个控件的人,我已经实现了我的Silverlight控件的WPF版本.它仅适用于视图模型,并且需要这些视图模型来实现特殊的界面,但除此之外,它并不难使用.

在WPF中它看起来像这样:

WPF Combobox与TreeView

您可以从此处下载源代码和示例应用程序:WpfComboboxTreeview.zip


Jos*_*osh 7

我遇到过同样的问题.

在组合框中实现树视图行为的最简单方法是创建一个TextBox并将其样式化为看起来像一个组合框.在它旁边添加图像.诀窍是将树视图放在弹出控件中.然后,当用户单击您选择的文本框或下拉图像时,弹出窗口将直接显示在文本框下方.

然后,选择树视图项目时,关闭弹出窗口并将所选内容的文本放在文本框中.

这是一个未经证实的例子:

XAML:

<Window x:Class="ComboBoxTreeView.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="MainWindow" Height="350" Width="525" MouseEnter="Window_MouseEnter">
   <Grid Margin="15">
      <Grid.RowDefinitions>
         <RowDefinition Height="30" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <TextBox Grid.Row="0" x:Name="header" Width="300" Height="30" PreviewMouseDown="header_PreviewMouseDown" HorizontalAlignment="Left" />
      <Popup Grid.Row="1" x:Name="PopupTest" AllowsTransparency="True" IsOpen="False">
         <TreeView x:Name="Tree1" Initialized="Tree1_Initialized" SelectedItemChanged="Tree1_SelectedItemChanged">
            <TreeViewItem Header="Test1" x:Name="Tree1Item1">
               <TreeViewItem Header="1test1" />
               <TreeViewItem Header="2test2" />
            </TreeViewItem>
            <TreeViewItem Header="Test2" />
         </TreeView>
      </Popup>
   </Grid>
</Window>
Run Code Online (Sandbox Code Playgroud)

以下是守则背后:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ComboBoxTreeView
{
   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow : Window
   {
      public MainWindow()
      {
         InitializeComponent();
      }

      private void Window_MouseEnter(object sender, MouseEventArgs e)
      {

      }

      private void Tree1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
      {
         var trv = sender as TreeView;
         var trvItem = trv.SelectedItem as TreeViewItem;
         if (trvItem.Items.Count != 0) return;
         header.Text = trvItem.Header.ToString();
         PopupTest.IsOpen = false;
      }

      private void Tree1_Initialized(object sender, EventArgs e)
      {
         var trv = sender as TreeView;
         var trvItem = new TreeViewItem() { Header="Initialized item"};
         var trvItemSel = trv.Items[1] as TreeViewItem;
         trvItemSel.Items.Add(trvItem);
      }

      private void header_PreviewMouseDown(object sender, MouseButtonEventArgs e)
      {
         PopupTest.Placement = System.Windows.Controls.Primitives.PlacementMode.RelativePoint;
         PopupTest.VerticalOffset = header.Height;
         PopupTest.StaysOpen = true;
         PopupTest.Height = Tree1.Height;
         PopupTest.Width = header.Width;
         PopupTest.IsOpen = true;
      }
   }
}
Run Code Online (Sandbox Code Playgroud)


Kel*_*lly 1

您也许可以使用树视图上的事件处理程序来设置组合框上的 SelectedItem。

为此,您需要设置树视图的标签属性,如下所示:

<TreeView Tag="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"  MouseDoubleClick="treeview_MouseDoubleClick" ItemsSource="{Binding Children}" x:Name="TheTree">
Run Code Online (Sandbox Code Playgroud)

现在在 DoubleClick 事件中您可以访问 ComboBox:

    private void treeview_MouseDoubleClick(object sender, RoutedEventArgs e)
    {
        try
        {
            TreeView tv = sender as TreeView;
            if(tv == null)
                return;
            var cB = tv.Tag as ComboBox;
            cB.SelectedItem = tv.SelectedItem;
        }
        catch (Exception e)
        {

        }
    }
Run Code Online (Sandbox Code Playgroud)

您还需要覆盖选择组合框项的方式,否则一旦您单击它,整个 TreeView 就会被选择。