WPF: TreeView dans une zone de liste déroulante

Je suis en train de mettre un TreeView à l'intérieur d'une zone de liste déroulante dans WPF, de sorte que lorsque la zone de liste modifiable est tombé, au lieu d'une liste à plat l'utilisateur obtient une liste hiérarchique et quel que soit le nœud ils choisissent devient la valeur sélectionnée de la liste déroulante.

J'ai cherché un peu beaucoup pour la façon de le faire, mais le mieux que j'ai pu trouver était uniquement de morceaux de potentiel soltuions que, parce que je suis trop nouveau pour WPF, je ne pouvais pas faire le travail.

J'ai assez de connaissance de WPF et de la liaison de données que je peux obtenir mes données dans l'arborescence, et je peux même obtenir l'arborescence à l'intérieur de la zone de liste déroulante, cependant ce que j'ai pu accomplir ne pas se comporter correctement. J'ai joint une capture d'écran pour montrer ce que je veux dire. Dans la capture d'écran de la zone de liste modifiable est "ouvert", de sorte que le treeview sur le fond c'est où je peux sélectionner un nœud et le treeview "en haut" est en cours d'élaboration sur le dessus de la zone de liste déroulante où je veux que le texte/valeur du nœud sélectionné dans l'arbre pour être affiché.

Fondamentalement, ce que je ne sais pas comment le faire est de savoir comment puis-je obtenir le treeview currrently nœud sélectionné pour revenir à sa valeur de retour jusqu'à la zone de liste déroulante qui l'utilise alors comme sa valeur sélectionnée?

Voici le code xaml, je suis actuellement à l'aide:

        <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>

Capture d'écran: WPF: TreeView dans une zone de liste déroulante

source d'informationauteur

16

Pour ceux qui ont encore besoin de ce contrôle, j'ai mis en place un WPF version de mon Contrôle Silverlight. Il fonctionne uniquement avec les modèles de vue et exige de ces modèles de vue pour mettre en œuvre une interface spéciale, mais en dehors de cela, il n'est pas difficile à utiliser.

Dans WPF, il ressemble à ceci:

Vous pouvez télécharger le code source et exemple d'application à partir d'ici: WpfComboboxTreeview.zip

J'ai eu le même problème.

La façon la plus simple à mettre en œuvre le comportement d'un treeview dans un combobox est de créer une zone de texte et styliser qu'il ressemble à une zone de liste déroulante. Ajouter une image à côté d'elle. L'astuce est de mettre le treeview dans une fenêtre de contrôle. Ensuite, lorsque l'utilisateur clique sur la zone de texte ou de la liste déroulante de l'image que vous avez choisi, le popup s'affiche directement sous la zone de texte.

Puis, quand le treeview élément est sélectionné, fermer la fenêtre et placer le texte de la sélection dans la zone de texte.

Voici un unstylized exemple:

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>

Et voici le Code derrière:

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;
}
}
}

1

Vous pourriez être en mesure d'utiliser un gestionnaire d'événement sur l'arborescence pour régler le SelectedItem sur la zone de liste déroulante.

Pour ce faire, vous devez définir la Balise de propriété de l'arborescence comme ceci:
```
<TreeView Tag="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"  MouseDoubleClick="treeview_MouseDoubleClick" ItemsSource="{Binding Children}" x:Name="TheTree">
```
Maintenant dans le DoubleClick événement que vous pouvez obtenir à la zone de liste déroulante:
```
    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)
{
}
}
```
Vous aurez également besoin de redéfinir la façon dont l'Élément comboBox est selecte, sinon, tout le TreeView sera sélectionné dès que vous cliquez sur elle.
1

Cette question est étroitement liée à que l'on

De sorte que vous trouverez probablement cette mise en œuvre utile. C'est une zone de liste déroulante avec des cases à cocher à l'intérieur, mais vous pouvez obtenir l'idée sur comment dissocier le texte dans la zone de la fenêtre contextuelle du contenu avec votre arbre.

Il démontre également l'idée que la IsSelected propriété devrait être sur votre modèle entités et puis elle est liée retour à la case Text de propriété à travers le modèle. En d'autres termes, ce que vous montrez dans la zone de liste déroulante s'est effondré peut être complètement sans rapport avec le contenu... Bien, peut-être pas complètement, mais dans mon application lorsqu'un utilisateur sélectionne plusieurs cases à cocher dans ce combo, je peux montrer séparées par des virgules dans le top de zone de texte, ou je peux montrer "Plusieurs options", ou quoi que ce soit.

HTH =)

C'est un vieux sujet, mais il peut être utile à quelqu'un.

Essayer de faire quelque chose de similaire avec une zone de liste déroulante, j'ai essayé d'utiliser popup au lieu de cela, et ça fonctionne.
Pour la transformer en une belle fonctionnalité, il faut beaucoup de peaufinage.

<Expander Header="TestCS">
<Popup IsOpen="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Expander}}}">
<TreeView ItemsSource="{Binding CSTree.CSChildren}">
<TreeView.Resources>
<HierarchicalDataTemplate ItemsSource="{Binding CSChildren}" DataType="{x:Type ViewModel:ObservableCS}">
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="16" Text="{Binding CSName}"></TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
</Popup>
</Expander>

Je pense que vous pouvez foreach treeViewItems puis ajouter en combo 1by1.

et dans chaque treeviewitem développez événement, l'ajout de ses enfants dans la zone de liste déroulante.

cependant, l'ensemble extensible de l'élément de hauteur à l'air dans une ligne, telles que la Hauteur = 18d.

//== Append Item into combobox =================
TreeViewItem root = new TreeViewItem();
root.Header = "item 1";
TreeViewItem t1 = new TreeViewItem();
t1.Header = "Expanding...";
root.Items.Add(t1);
//==============================================
//== root expandind event ==============================
root.Height = 18.00d;
TreeViewItem[] items = GetRootChildren(root.Tag);
foreach(TreeViewItem item in items)
{
combox1.Items.Add(item);
}
//======================================================

Vous devez vous connecter pour publier un commentaire.