Discussion :

[hannnnnn]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[hannnnnn]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Pragmateek]

Dans l'idéal on devrait pouvoir faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Puis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Spazou]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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

[Spazou]

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.

[hannnnnn]

Mille merci cher Spazou.
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.

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

[Spazou]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[hannnnnn]

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.

[Spazou]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[hannnnnn]

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

Merci Spazou
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?

[Spazou]

(Il y a une erreur dans mon précédent code hannnn,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

est en fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<TreeView ItemsSource="{Binding .}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">

[hannnnnn]

Oui Spazou, J'ai modifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

_IsExpanded = true;

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Spazou]

Effectivement, read only, j'avais oublié

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[hannnnnn]

Merci pour les réponses rapides

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

[hannnnnn]

Parfait Spazou la deuxième solution marche à merveille
Merci encore

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