Treeview/HierarchicalDataTemplate : IsMouseOver

**koyot3** · 17/01/2012, 16h06

Bonjour à tous,

J'ai un léger soucis avec mon treeview. Actuellement il est composé de plusieurs TreeViewItem définis dans le xaml et ces derniers sont chacun bindé à une liste d'objet différent.

En gros mes TreeViewItems avec leurs objets

-Peugeot
---206
---306
-Renault
---Clio
---Twingo

Je définis les Header de mes TreeViewItems de la sorte

Code xml :

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

1
2
3
4
5
6
<TreeViewItem.Header> 
 <StackPanel>
  <TextBlock/>
  <Button/>
 <StackPanel>
<TreeViewItem.Header>

Les objets (= sous-items) sont implémentés via des HierarchicalDataTemplate tel que

Code xml :

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

1
2
3
4
5
6
<HierarchicalDataTemplate>
  <StackPanel>
  <TextBlock/>
  <Button/>
 <StackPanel>
<HierarchicalDataTemplate>

J'essaie d'obtenir deux comportements.
- celui pour le Header : si ma souris est sur le TextBlock, le bouton apparaît sinon il est masqué
- celui pour le sous_item : si ma souris est sur le TextBlock, le bouton apparaît sinon il est masqué

Redéfinir le style de mes boutons me paraissait être une des solutions les plus simples mais je n'arrive pas à trouver à quoi binder mes DataTriggers pour obtenir le bon résultat.

Si j'utilise
{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path= IsMouseOver} dans mon HierarchicalDataTemplate, ça fonctionne correctement pour les sous-items (206,306, Clio et Twingo). Par contre c'est pour le Header que ça coince. Si je mets la même chose, en posant la souris sur 206 par exemple, le bouton dans le Header apparaît alors que je voudrais qu'il le soit uniquement si elle est sur le Header en soit...

J'espère avoir été clair dans mon explication

Quelqu'un aurait-il une idée ?

Par avance, merci !

**koyot3** · 18/01/2012, 10h32

Bon problème résolu.

Je binde le HierarchicalDataTemplate sur le TreeViewItem pour récupérer la sélection et j'utilise le IsMouseOver sur un StackPanel pour mon item principal.

Je sais pas si c'est le plus optimal mais ça fonctionne donc pour le moment, ça fera l'affaire ...

@+

**MABROUKI** · 18/01/2012, 18h56

bonjour koyot3
Pourquoi renonces-tu facilement à ta proie? ...Indigne d'un coyote du desert....!!!
C'est faisable à condition de "customiser" un tout petit peu ton HierchicalDataTemplate.....
Juste apres ItemsSource dans sa prop "VisualTree" il attend un DataTemplate.....
1/ DataTemplate : là il faut lui donner dans un StackPanel englobant
un 1er StackPanel pour le Header et un 2em pour le Item.
2/ Utilise ensuite la balise <HierarchicalDataTemplate.Triggers pour referencer
tes controles textblock et buttons avec des x:name car.... maintenant ils sont tous dans la portee du modele HierarchicalDataTemplate................
3/ Mets des marges pour les StackPanels pour eviter que le cursor souris lors des events MouseOver etant à cheval sur un Item et un Header ce qui ferait faire une danse sarabande des controls chevauches .................

voici le code pour les classes avec 2 treeview un pour le class Peugeot avec son HierarchicalDataTemplate et un pour le class Renault 2012 avec son HierarchicalDataTemplate .........
code xaml du winform:

Code xaml :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
 
<Window x:Class="WpfTreeViewHeaderTemplateCSharp.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfTreeViewHeaderTemplateCSharp"    
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <!--HierarchicalDataTemplate Peugeot-->
        <!--attend un DataTemplate dans sa prop VisualTree pour l'Item-->
        <!--StackPanel Englobant avec 2 Sous-StackPanel => DataTemplate du HierarchicalDataTemplate
        -->
        <HierarchicalDataTemplate  
            x:Key="PeugeotHierarchicalDataTemplate" 
            DataType="local:Peugeot" 
            ItemsSource ="{Binding Path=local:ListPeugeot}">
            <!--StackPanel Englobant :DataTemplate du HierarchicalDataTemplate-->
            <StackPanel 
                x:Name="StackPanelEnglobant"
                Margin="5">
                <!--StackPanel :DataTemplate du Header -->
                <StackPanel 
                    x:Name="StackPanelHeader"
                    Margin="5">
                    <TextBlock 
                        x:Name="txtHeader"
                        Padding="5"
                        FontSize="14"
                        Background="CornflowerBlue"
                        Foreground="WhiteSmoke"
                        FontWeight="Bold"
                        Text="HeaderPeugeot">
                    </TextBlock>
                    <Button    
                        x:Name="btnHeader"
                        Background="LightYellow"
                        Foreground="SaddleBrown" 
                        FontSize="14"
                        FontWeight="Bold"
                        Content="Peugeot">
                    </Button>
                    </StackPanel>
                    <!--StackPanel :DataTemplate de l'Item-->
                    <StackPanel 
                        x:Name="StackPanelItem"
                        Margin="5">
                        <TextBlock 
                            x:Name="txtItem"
                            Padding="5"
                            Background="Gold"
                            Foreground="Crimson" 
                            FontFamily="Times New Roman"
                            FontSize="18"
                            FontWeight="Bold"
                            Text="{Binding Path=Name}" >
                        </TextBlock>
                        <Button   
                            x:Name="btnItem"
                            Background="Lime"
                            Foreground="RosyBrown" 
                            FontFamily="Times New Roman"
                            FontSize="18"
                            FontWeight="Bold"
                            Content="{Binding Path=Name}">
                        </Button>
                    </StackPanel>
                </StackPanel>
            <!--Tes triggers en designant chacun par son nom-->
            <!--maintenant ils sont dans la meme portee........-->
            <HierarchicalDataTemplate.Triggers>
                    <!--Trigger du Header-->
                    <Trigger     
                        SourceName="txtHeader" Property="IsMouseOver" Value="true">
                        <Setter TargetName="btnHeader" Property ="Visibility"  Value="Visible"/>
                    </Trigger>
                    <Trigger  
                        SourceName="txtHeader" Property="IsMouseOver" Value="false">
                        <Setter TargetName="btnHeader" Property ="Visibility" Value="Collapsed" />
                    </Trigger>
                    <!--Trigger de l'Item-->
                    <Trigger      
                         SourceName="txtItem"  Property="IsMouseOver" Value="true" >
                        <Setter  TargetName="btnItem" Property ="Visibility"  Value="Visible"/>
                    </Trigger>
                    <Trigger  
                        SourceName="txtItem" Property="IsMouseOver" Value="false">
                        <Setter TargetName="btnItem" Property ="Visibility" Value="Collapsed" />
                    </Trigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
        <!--HierarchicalDataTemplate Renault-->
        <HierarchicalDataTemplate 
            x:Key="RenaultHierarchicalDataTemplate" 
            DataType="local:Renault" 
            ItemsSource ="{Binding Path=local:ListRenault}">
 
            <!--StackPanel Englobant :DataTemplate du HierarchicalDataTemplate-->
            <StackPanel Margin="5">
                <!--StackPanel :DataTemplate du Header -->
                <StackPanel Margin="5">
                    <TextBlock 
                        x:Name="txtHeader"
                        Padding="5"
                        FontSize="14"
                        Background="CornflowerBlue"
                        Foreground="WhiteSmoke"
                        FontWeight="Bold"
                        Text="HeaderRenault">
                    </TextBlock>
                    <Button    
                        x:Name="btnHeader"
                        Background="LightYellow"
                        Foreground="SaddleBrown" 
                        FontSize="14"
                        FontWeight="Bold"
                        Content="Renault">
                    </Button>
                </StackPanel>
                <!--StackPanel :DataTemplate de l'Item-->
                <StackPanel Margin="5">
                    <TextBlock 
                        x:Name="txtItem"
                        Padding="5"
                        Background="Gold"
                        Foreground="Crimson" 
                        FontFamily="Times New Roman"
                        FontSize="18"
                        FontWeight="Bold"
                        Text="{Binding Path=Name}" >
                    </TextBlock>
                    <Button   
                        x:Name="btnItem"
                        Background="Lime"
                        Foreground="RosyBrown" 
                        FontFamily="Times New Roman"
                        FontSize="18"
                        FontWeight="Bold"
                        Content="{Binding Path=Name}">
                    </Button>
                </StackPanel> 
            </StackPanel>
            <!--Tes triggers en designant chacun par son nom-->
            <!--maintenant ils sont dans la meme portee........-->
            <HierarchicalDataTemplate.Triggers>
                <!--Trigger du Header-->
                <Trigger     
                    SourceName="txtHeader" Property="IsMouseOver" Value="true">
                    <Setter  TargetName="btnHeader" Property ="Visibility"  Value="Visible"/>
                </Trigger>
                <Trigger  
                    SourceName="txtHeader" Property="IsMouseOver" Value="false">
                    <Setter TargetName="btnHeader" Property ="Visibility" Value="Collapsed" />
                </Trigger>
                <!--Trigger de l'Item-->
                <Trigger      
                    SourceName="txtItem"  Property="IsMouseOver" Value="true" >
                    <Setter TargetName="btnItem" Property ="Visibility"  Value="Visible"/>
                </Trigger>
                <Trigger  
                    SourceName="txtItem" Property="IsMouseOver" Value="false">
                    <Setter TargetName="btnItem" Property ="Visibility" Value="Collapsed" />
                </Trigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
 
 
        <local:ListPeugeot  x:Key="MyListPeugeot" >
            <local:Peugeot Name="Modele 206" />
            <local:Peugeot Name="Modele 306" />
            <local:Peugeot Name="Modele 307" />
            <local:Peugeot Name="Modele 3008" />
            <local:Peugeot Name="Modele 3009" />
            <local:Peugeot Name="Modele 3005" />
            <local:Peugeot Name="Modele 706" />
        </local:ListPeugeot>
        <local:ListRenault  x:Key="MyListRenault" >
            <local:Renault Name="Modele Clio" />
            <local:Renault Name="Modele Twingo" />
            <local:Renault Name="Modele Megane1" />
            <local:Renault Name="Modele Megane2" />
            <local:Renault Name="Modele Touareg" />
        </local:ListRenault>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TreeView
              Grid.Row="0"
              x:Name="treeviewPeugeot"  
              Background="DarkBlue" 
              BorderBrush="Black"
              ItemsSource="{Binding Source={StaticResource MyListPeugeot}}"
              ItemTemplate ="{StaticResource PeugeotHierarchicalDataTemplate}">
        </TreeView>
        <TreeView
              Grid.Row="1"
              x:Name="treeviewRenault"  
              Background="DarkOrange" 
              BorderBrush="Black"
              ItemsSource="{Binding Source={StaticResource MyListRenault}}"
              ItemTemplate="{StaticResource RenaultHierarchicalDataTemplate}">
        </TreeView>
    </Grid>
</Window>

simple code-behind des class Peugeot et Renault:

Code c# :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
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;
using System.Collections.ObjectModel;
namespace WpfTreeViewHeaderTemplateCSharp
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
 
    class Peugeot
    {
        public string Name { get; set; }
 
    }
    class ListPeugeot : ObservableCollection<Peugeot>
    {
        public ListPeugeot()
        {
        }
 
    }
    class Renault
    {
        public string Name { get; set; }
 
    }
    class ListRenault : ObservableCollection<Renault>
    {
        public ListRenault()
        {
        }
 
    }
}

bon code....................

**koyot3** · 19/01/2012, 09h05

Merci pour ton exemple et tes explications précises Mabrouki.
en fait j'ai fait différemment de toi car j'avais défini mon template du TreeviewItem directement dans le TreeViewItem.Header et non dans le HierarchicalDataTemplate comme tu l'as fais...

Mais ta solution est clairement plus propre...

**koyot3** · 23/01/2012, 16h19

Hey Mabrouki,

Je reviens sur le bout de code que tu m'as posté car il fallait bien que je teste ça à mes heures perdues

: en fait il fonctionne bien si la liste contient au moins un élément. Dans mon cas, au démarrage de l'application, mon TreeView possède déjà les TreeViewItems de base (Renault et Peugeot dans mon exemple).
Or si je stocke tout dans mon HierarchicalDataTemplate, je n'aurais rien au démarrage...

Je suis donc bien obligé de définir un Header séparément du template pour les sous-items...

Treeview/HierarchicalDataTemplate : IsMouseOver

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager