HierarchicalDataTemplate WPF TreeView à partir d'un menu récursif?

Version imprimable

Bonjour à tous, je débute en WPF, et celà fait une semaine que je rame sur les treeView et les HierarchicalDataTemplate.

En fait, j'ai une classe menu, qui comporte entre autre des items, chaque item contient des subitems, chaque subitem contient lui même des subitems etc....
Je veux afficher ces items dans une arborescence treeView.
J'ai utilisé HierarchicalDataTemplate.
Problèmes
-le treeView n'affiche que le premier niveau de l'arborescence.
- le second niveau est affiché sous la forme "Project.Model.Items" (qui est le type de mes items)
-Pas d'autres niveaux que ces deux là.

Voilà quelques bout de code xaml:
Code:

1 2 3 4 5 6 7 8 <Grid.Resources> <HierarchicalDataTemplate DataType="{x:Type tes:Items}" x:Key="Temp"> <TreeViewItem IsExpanded="True" Header="{Binding Path=Label}" ItemsSource="{Binding Path=Subitems}"> </TreeViewItem> </HierarchicalDataTemplate> </Grid.Resources>
et pour le treeView:
Code:

1 2 3 4 5 6 7 8 9 <TreeView SelectedItemChanged="TreeView_SelectedItemChanged" DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelPropertyMenu}" AllowDrop="True" > <TreeViewItem Header="{Binding Path=Name}" ItemTemplate="{StaticResource Temp}" ItemsSource="{Binding Path=it, Mode=TwoWay}" IsExpanded="True"> </TreeViewItem> </TreeView>
Merci d'avance pour votre aide j'espère vraiment trouver la solution, car là je blocke.:(

Rectification

J'ai enfin réussi à afficher le treeView proprement en spécifiant les dataType et ItemsSource de mes HierarchicalDataTemplate. Par contre, je ne trouve toujours pas de solution pour la récursivité. C'est à dire que le TreeView m'affiche autant de niveaux que les HierarchicalDataTemplate que j'ai spécifié.
Voilà le code de mes HierarchicalDataTemplate corrigé, pour ceux qui pourraient en avoir besoin:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <Grid.Resources> <HierarchicalDataTemplate DataType="{x:Type tes:Items}" x:Key="Temp" ItemsSource="{Binding Path=Subitems}"> <TextBlock Text="{Binding Path=Label}" /> <HierarchicalDataTemplate.ItemTemplate> <HierarchicalDataTemplate DataType="{x:Type tes:Items}" ItemsSource="{Binding Path=Subitems}"> <TextBlock Text="{Binding Path=Label}"/> </HierarchicalDataTemplate> </HierarchicalDataTemplate.ItemTemplate> </HierarchicalDataTemplate> </Grid.Resources>

Dans l'idéal on devrait pouvoir faire :
Code:

1 2 3 <HierarchicalDataTemplate DataType="{x:Type tes:Items}" x:Key="Temp" ItemsSource="{Binding Path=Subitems}" ItemTemplate="{StaticResource Temp}"> <TextBlock Text="{Binding Path=Label}" /> </HierarchicalDataTemplate>
Mais malheureusement il ne semble pas que le système de gestion des ressources de WPF le gère.

Un hack est de passer par du code-behind, par exemple en créant un DataTemplateSelector qui renverrait toujours ton template "Temp" :

Code:

return Application.Current.MainWindow.Resources["Temp"]

Puis :
Code:

1 2 3 4 <local:ItemSelector x:Key="Selector" /> <HierarchicalDataTemplate DataType="{x:Type tes:Items}" x:Key="Temp" ItemsSource="{Binding Path=Subitems}" ItemTemplateSelector="{StaticResource Selector}"> <TextBlock Text="{Binding Path=Label}" /> </HierarchicalDataTemplate>
Code non testé mais le principe est là.

13/07/2010, 10h08
hannnnnn
Merci seriousme d'avoir répondu. Comme tu l'as bien dit, l'idéal est d'utiliser la récursivité, malheureusement WPF ne le permet pas. J'essaies d'implémenter le code behind que tu m'as proposé, seul hic, j'arrive pas à comprendre à quoi correspond local et ItemSelector. dans la ligne
Code:

1 2 <local:ItemSelector x:Key="Selector" />
Est ce que je dois créer une nouvelle classe ItemSelector et lui faire référence dans local ou quoi?
Car j'ai essayé de faire une fonction ItemSelector, mais je ne trouve pas comment lui faire appel dans le code XAML.

Merci encore.

Code:

1
2
3
4
5
6
7
8
9
    <Grid>
        <Grid.Resources>
            <HierarchicalDataTemplate DataType="{x:Type tes:Items}"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Label}" />
            </HierarchicalDataTemplate>
        </Grid.Resources>
        <TreeView ItemsSource="{Binding .}" />
    </Grid>

Code:

1
2
3
4
5
6
7
8
9
10
    <Grid>
        <TreeView ItemsSource="{Binding .}">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type tes:Items}"
                                          ItemsSource="{Binding SubItems}">
                    <TextBlock Text="{Binding Label}" />
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>

fonctionne bien. Ce n'est pas ce que tu souhaites faire ?

13/07/2010, 13h33
hannnnnn

Non Spazou, ça ne résout pas mon problème.
Je veux afficher en quelques sorte un TreeView qui pourrait être infini.
Il s'arrête quand il n'ya plus de sous éléments à binder.
Merci quand même
13/07/2010, 13h37
Spazou

Citation:

Envoyé par hannnnnn

Non Spazou, ça ne résout pas mon problème.
Je veux afficher en quelques sorte un TreeView qui pourrait être infini.
Il s'arrête quand il n'ya plus de sous éléments à binder.
Merci quand même

Je ne comprends pas. J'affiche parfaitement un treeview "infini" avec mon code, en mettant en SubItems un parent par exemple.
13/07/2010, 14h56
hannnnnn

Mille merci cher Spazou.:ccool:
Je sais pas ce que j'ai oublié de mettre la dernière fois que j'ai tenté ton code, mais là ça marche nickel.

Merci énormément.
13/07/2010, 19h49
Pragmateek

Tu n'avais rien oublié, au contraire, tu en avais trop mis en spécifiant le "DataTemplate" des sous-éléments.

Le comportement du TreeView illustré par Spazou (merci) est vraiment intéressant pour le cas où l'on a pas besoin de spécifier de DataTemplate.

Cependant, si tu es dans un cas plus complexe, par exemple si les sous-éléments peuvent avoir des DataTemplate différents alors je crains que la seule solution soit de passer par du code-behind.

Si quelqu'un pouvait confirmer/infirmer...

Je dirais que non, on peut parfaitement s'en sortir sans code behind. Tout dépend de ce qui définit la différence de template.

Il y avait plusieurs erreurs dans les codes proposés.
hannnn mettait un TreeViewItem dans son template (ça peut marche, mais pas correctement)
Et après, vous cherchiez à setter l'ItemTemplate sur votre template.
Ceci est inutile, lorsque l'un ItemTemplate est défini, il s'appliquera également aux fils, si ils n'en ont pas.

En clair :

Code:

1
2
3
4
5
6
7
8
9
10
    <Grid>
        <Grid.Resources>
            <HierarchicalDataTemplate x:Key="Temp"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Disp}"
                           Background="Red" />
            </HierarchicalDataTemplate>
        </Grid.Resources>
        <TreeView ItemsSource="{Binding .}" ItemTemplate="{StaticResource Temp}" />
    </Grid>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <Grid>
        <Grid.Resources>
            <HierarchicalDataTemplate x:Key="Temp"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Disp}"
                           Background="Red" />
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate x:Key="Temp2"
                                      ItemTemplate="{StaticResource Temp}"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Disp}"
                           Background="Yellow" />
            </HierarchicalDataTemplate>
        </Grid.Resources>
        <TreeView ItemsSource="{Binding .}" ItemTemplate="{StaticResource Temp2}" />
    </Grid>

Et on peut s'amuser à faire un mix avec les DataTypes

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <Grid>
        <Grid.Resources>
            <HierarchicalDataTemplate x:Key="Temp"
                                      ItemTemplate="{x:Null}"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Disp}"
                           Background="Red" />
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate x:Key="Temp2"
                                      ItemTemplate="{StaticResource Temp}"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Disp}"
                           Background="Yellow" />
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:THie}"
                                      ItemTemplate="{StaticResource Temp2}"
                                      ItemsSource="{Binding SubItems}">
                <TextBlock Text="{Binding Disp}" />
            </HierarchicalDataTemplate>
        </Grid.Resources>
        <TreeView ItemsSource="{Binding .}"
                  ItemTemplate="{StaticResource Temp2}" />
    </Grid>

Moi, j'ai une préférences pour faire des template sur des DataType, parce que si je dois faire une différence de template, c'est que j'ai une différence dans mon arbre, donc l'élément a un type différent, qui justifie cet affichage différent.
Mais, WPF est souple pour autoriser tout le monde à faire un peu comme il veut ;)

Edit:
Exemple avec pour code :

Code:

1
2
3
4
5
    public class THie
    {
        public string Disp { get; set; }
        public List<THie> SubItems { get; set; }
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var dc = new List<THie>();
            dc.Add(new THie() { Disp = "A" });
            dc.Add(new THie() { Disp = "B" });
            dc.Add(new THie() { Disp = "C" });
 
            dc[0].SubItems = new List<THie>();
            dc[0].SubItems.Add(new THie() { Disp = "AA" });
            dc[0].SubItems.Add(new THie() { Disp = "AB" });
 
            dc[1].SubItems = new List<THie>();
            dc[1].SubItems.Add(new THie() { Disp = "BA" });
            dc[1].SubItems.Add(new THie() { Disp = "BB" });
 
            dc[1].SubItems[1].SubItems = new List<THie>();
            dc[1].SubItems[1].SubItems.Add(new THie() { Disp = "BBA" });
            dc[1].SubItems[1].SubItems.Add(dc[1]);
            this.DataContext = dc;
            return;
 
        }

15/07/2010, 12h52
hannnnnn

Citation:

Envoyé par Spazou

Il y avait plusieurs erreurs dans les codes proposés.
hannnn mettait un TreeViewItem dans son template (ça peut marche, mais pas correctement)
Et après, vous cherchiez à setter l'ItemTemplate sur votre template.
Ceci est inutile, lorsque l'un ItemTemplate est défini, il s'appliquera également aux fils, si ils n'en ont pas.

J'ai bien remarqué que le treeViewItem dans un ItemTemplate n'est pas le bon choix, en l'utilisant je n'arrive plus à sélectionner mes items grâce au click de la souris. Mais en utilisant des Textblock, je ne sais plus comment récupérer l'item sélectionné.
En plus de ça j'ai besoin des propriétés IsExpanded et IsSelected des TreeViewItem, pour manipuler mon TreeView, mais en utilisant un TextBlock je n'y ai plus accès. COmment pourrais je faire?

Je suis vraiment désolée si mes questions sont bêtes, ou mes bouts de code sont défectueux mais je suis en train de découvrir WPF. Et le treeview n'est vraiment pas simple.:?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    public class THie : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
        public string Disp { get; set; }
        public List<THie> SubItems { get; set; }
 
        private bool _IsExpanded = false;
        public bool IsExpanded { get { return _IsExpanded; } set { _IsExpanded = value; OnPropertyChanged("IsExpanded"); } }
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<TreeView ItemsSource="{Binding .}">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type local:THie}"
                                          ItemsSource="{Binding SubItems}">
                    <TextBlock Text="{Binding Disp}" />
                </HierarchicalDataTemplate>
                <Style TargetType="TreeViewItem">
                    <Setter Property="IsExpanded"
                            Value="{Binding IsExpanded, Mode=TwoWay}" />
                </Style>
            </TreeView.Resources>
        </TreeView>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var dc = new List<THie>();
            dc.Add(new THie() { Disp = "A", IsExpanded = true });
            dc.Add(new THie() { Disp = "B" });
            dc.Add(new THie() { Disp = "C" });
 
            dc[0].SubItems = new List<THie>();
            dc[0].SubItems.Add(new THie() { Disp = "AA" });
            dc[0].SubItems.Add(new THie() { Disp = "AB" });
 
            dc[1].SubItems = new List<THie>();
            dc[1].SubItems.Add(new THie() { Disp = "BA" });
            dc[1].SubItems.Add(new THie() { Disp = "BB" });
 
            dc[1].SubItems[1].SubItems = new List<THie>();
            dc[1].SubItems[1].SubItems.Add(new THie() { Disp = "BBA" });
            dc[1].SubItems[1].SubItems.Add(dc[1]);
            this.DataContext = dc;
 
        }

Après, pour IsSelected, c'est vraiment IsSelected, ou le SelectedItem du TreeView suffirait ?

15/07/2010, 16h53
hannnnnn

Citation:

Envoyé par Spazou

Après, pour IsSelected, c'est vraiment IsSelected, ou le SelectedItem du TreeView suffirait ?

Merci Spazou :mrgreen:
Au niveau du TreeView les propriétés IsExpanded et IsSelected marchent bien avec le binding que tu viens de me montrer.
Mais si je veux récupérer l'élément sélectionné du treeview dans un autre UserControl ( dans le cas d'une vue maitre-détails) alors comment je fais?
15/07/2010, 17h00
Spazou
(Il y a une erreur dans mon précédent code hannnn,

Code:

[...]set { _IsExpanded = true;[...]

est en fait

Code:

set { _IsExpanded = value;

)

Dans mon exemple, je ne peux pas, mon DataContext étant une bête liste. Dans ta VueModele qui sert de datacontext, tu fais une propriété SelectedItem.
Code:

1 2 private THie _SelectedItem = null; public THie SelectedItem { get { return _SelectedItem; } set { _SelectedItem = value; OnPropertyChanged("SelectedItem"); } }
et tu binds le SelectedItem du TreeView dessus. Il te suffirat dans ton autre controle de te binder sur le selecteditem de ta VM.

Code:

<TreeView ItemsSource="{Binding .}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
15/07/2010, 17h12
hannnnnn

Oui Spazou, J'ai modifié

Code:

_IsExpanded = true;

par

Code:

_IsExpanded = value;

Mais désolé je ne l'ai pas mentionné, en tout cas l'idée était là.

J'ai déjà crée la propriété SelectedItem dans ma classe viewmodel, mais le hic c'est que je ne trouve pas la propriété SelectedItem relative au TreeView (code xaml).
En fait il me dit que SelectedItem est une propriété readonly, même en utilisant le binding One Way.

Effectivement, read only, j'avais oublié :ccool:

2 exemples de possibilités :
- Tu bind directement sur le SelectedItem du treeview
Code:

1 2 3 <TreeView ItemsSource="{Binding .}" Name="testTV" /> [...] <TonControl DataContext="{Binding ElementName=testTV, Path=SelectedItem, Mode=OneWay}" />
- Tu t'abonnes à l'évènement "Selected" ou à SelectedItemChanged de TreeView (même principe)

Code:

<TreeView ItemsSource="{Binding .}" TreeViewItem.Selected="OnSelectedItem"/>
Code:

1 2 3 4 5 6 private void OnSelectedItem(object sender, RoutedEventArgs e) { // tu sauvegardes l'item sélectionné TypeDeTaVM vm = (sender as TreeView).DataContext as TypeDeTaVM; vm.SelectedItem = (sender as TreeView).SelectedItem as Items; }

15/07/2010, 18h39
hannnnnn

Merci pour les réponses rapides :ccool:

Pour le premier exemple je ne peut pas l'appliquer puisque mon treeView est inclu dans un autre UserControl, donc je ne peux pas y avoir accès avec l'ElementName.
Je vais plutot tenter la deuxième possibilité. ;)
16/07/2010, 19h25
hannnnnn

Parfait Spazou la deuxième solution marche à merveille :ccool:
Merci encore;)
19/11/2013, 12h26
NazOok

Merciiiiii beaucoup ce topic m'a bien servi !!! J'en ai vraiment bavé avec mon TreeView.. C'est vrai que ce control n'est vraiment pas si simple !!

Tchou'