WPF Treeview et Customization

**EzecKiel** · 26/05/2008, 16h44

Bonjour à tous,

je souhaite customiser mon treeview de la façon suivante :

- Enlever le petit carré '+' / '-' à gauche de l'item
- Animer l'expansion des sous-items (les sous-items descendent en 1s par exemple).
- Customizer le fond la police, bref, quelque chose de plus classique.

Ma question porte sur les deux premiers points : Dans quelle direction dois-je partir pour customizer le contrôle ? - Le styles suffisent-ils ou bien faut-il que je fasse un custom control qui dérive du Treeview ?

Merci d'avance !

**binoo** · 26/05/2008, 17h04

Salut,

Les styles suffisent à mon avis.

Pour : Enlever le petit carré '+' / '-' à gauche de l'item
-> Dans le style du TreeViewItem, le ToggleButton est défini. C'est là que tu trouveras ton bonheur

Pour : Animer l'expansion des sous-items
-> regarde du côté des WPFBagOTricks, il y a la partie "Reveal" ou tu trouveras un exemple

Pour : Customizer le fond la police, bref, quelque chose de plus classique.
-> il faut travailler sur le style du TreeViewItem et le style du TreeView

**EzecKiel** · 26/05/2008, 17h07

Cool, je regarde ça maintenant ! Je me doutais que ça allait être aussi simple. Vive WPF !

Merci

**EzecKiel** · 27/05/2008, 10h36

Oups, étant débutant en WPF, je suis un petit peu paumé...

Où puis-je définir que je veux cacher le ' + ' et le ' - ' ?

j'ai un treeview tout ce qu'il y a de plus banal :

Code :

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

1
2
3
4
 
<DockPanel>
<TreeView Width="500" x:Name="EmployeesTree" DockPanel.Dock="Left" ItemsSource="{Binding}" />
</DockPanel>

relié à un HierarchicalDataSource :

Code :

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

1
2
3
4
 
<HierarchicalDataTemplate DataType="{x:Type local:EmployeeNode}" ItemsSource="{Binding ReportingEmployees}">
            <TextBlock Text="{Binding Path=Data.FirstName}" />
</HierarchicalDataTemplate>

Je crois que c'est dans le TreeviewItem non ? mais comment le définir dans mon code ?

J'avais essayé quelque chose comme ça :

Code :

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

1
2
3
<Style x:Key="plusMinusButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Visibility" Value="Hidden" />
</Style>

Est-ce suffisant et où dois-je faire "pointer" ce style ?

Merci

**binoo** · 27/05/2008, 12h10

En fait le mécanisme est le suivant :

- tu redéfinis comme tu l'entends le style du ToggleButton (flèche au lieu d'un +/-, ou autre chose...). Comme tu l'as fait par exemple.

- tu redéfinis ensuite le style du TreeViewItem. C'est dans le ControlTemplate de celui-ci que tu vas faire apparaître le ToggleButton (cf. texte en gras dans le code suivant).
Le code suivant est un exemple tiré du net (je crois ou depuis Blend...)

Code xml :

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
	<Style x:Key="MonStyleTreeViewItem" TargetType="{x:Type TreeViewItem}">
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
		<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
		<Setter Property="Padding" Value="1,0,0,0"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type TreeViewItem}">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition MinWidth="19" Width="Auto"/>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="*"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition/>
						</Grid.RowDefinitions>
						<ToggleButton x:Name="Expander" Style="{StaticResource plusMinusButton}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />
						<Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" ContentSource="Header"/>
						</Border>
						<ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsExpanded" Value="false">
							<Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost"/>
						</Trigger>
						<Trigger Property="HasItems" Value="false">
							<Setter Property="Visibility" Value="Hidden" TargetName="Expander"/>
						</Trigger>
						<Trigger Property="IsSelected" Value="true">
							<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Selection_Border"/>
							<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
						</Trigger>
						<MultiTrigger>
							<MultiTrigger.Conditions>
								<Condition Property="IsSelected" Value="true"/>
								<Condition Property="IsSelectionActive" Value="false"/>
							</MultiTrigger.Conditions>
							<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Selection_Border"/>
							<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
						</MultiTrigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

Ensuite tu ajoute ton style MonStyleTreeViewItem au treeView via ItemContainerStyle je crois. Soit :

Code xml :

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

1
2
3
4
<TreeView Width="500" x:Name="EmployeesTree" DockPanel.Dock="Left" 
  ItemsSource="{Binding}" 
  ItemContainerStyle="{StaticResource MonStyleTreeViewItem}"
  />

Voilà, il faut connaitre un peu j'avoue et malheureusement je ne sais pas si il y a de bon tuto sur le net. Il faut mettre les mains dans les codes déjà existant (c'est comme ça que je fait en tout cas

).

**EzecKiel** · 27/05/2008, 12h40

Autant le dire, autant c'est super puissant, mais par contre c'est tout sauf intuitif !

Bon le truc cool c'est que ça fonctionne par contre

Merci beaucoup !

En gros, on redéfinit tout l'aspect visuel du contrôle quoi...

Bon, je vais éplucher tout ça... Merci et à toute à l'heure (parce que je sens que je vais encore vous embêter

)

**EzecKiel** · 27/05/2008, 16h19

Me revoilà. J'ai un petit souci concernant "l'animation de l'expansion des sous-items.

Sur les conseils de binoo, j'utilise le WPFBagOTricks (je ne connaissais pas, c'est vraiment génial !). j'utilise 'Reveal' ce qui correspond exactement à ce que je veux.

En revanche quand je l'utilise mes sous-items sont redondants. Tout d'abord ils apparaissent directement et ensuite ils apparaissent de façon animer, par dessus.

Ex :

Voici le code :

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
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
    <Window.Resources>
 
        <Style x:Key="plusMinusButton" TargetType="{x:Type ToggleButton}">
            <Setter Property="Visibility" Value="Hidden" />
        </Style>
 
        <Style x:Key="MonStyleTreeViewItem" TargetType="{x:Type TreeViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="19" Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
 
                            <ToggleButton x:Name="Expander" Style="{StaticResource plusMinusButton}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />
 
                            <Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" ContentSource="Header"/>
                            </Border>
 
                            <r:Reveal Grid.Row="1"
                                              Grid.Column="1"
                                              Grid.ColumnSpan="2"
                                              HorizontalAlignment="Left" 
                                              VerticalAlignment="Top" 
                                              VerticalReveal="FromBottomToTop" 
                                              IsExpanded="{TemplateBinding IsExpanded}">
                                <ItemsPresenter />
 
                            </r:Reveal>
 
                            <ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost"/>
 
                        </Grid>
                        <ControlTemplate.Triggers>
 
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost"/>
                            </Trigger>
 
                            <!--<Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" Value="Hidden" TargetName="Expander"/>
                            </Trigger>-->
 
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Selection_Border"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
 
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
 
                                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Selection_Border"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            </MultiTrigger>
 
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
 
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <HierarchicalDataTemplate DataType="{x:Type local:EmployeeNode}" ItemsSource="{Binding ReportingEmployees}">
            <TextBlock Text="{Binding Path=Data.FirstName}" />
        </HierarchicalDataTemplate>
 
    </Window.Resources>
 
    <DockPanel>
        <TreeView Width="500" x:Name="EmployeesTree" DockPanel.Dock="Left" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource MonStyleTreeViewItem}"/>
    </DockPanel>

Merci !

**binoo** · 27/05/2008, 16h33

Ça vient peut-être de la ligne qui me semble en trop ici (en rouge dans le code)

:

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
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
<Window.Resources>

        <Style x:Key="plusMinusButton" TargetType="{x:Type ToggleButton}">
            <Setter Property="Visibility" Value="Hidden" />
        </Style>

        <Style x:Key="MonStyleTreeViewItem" TargetType="{x:Type TreeViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="19" Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            
                            <ToggleButton x:Name="Expander" Style="{StaticResource plusMinusButton}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />
                            
                            <Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" ContentSource="Header"/>
                            </Border>
                            
                            <r:Reveal Grid.Row="1"
                                              Grid.Column="1"
                                              Grid.ColumnSpan="2"
                                              HorizontalAlignment="Left" 
                                              VerticalAlignment="Top" 
                                              VerticalReveal="FromBottomToTop" 
                                              IsExpanded="{TemplateBinding IsExpanded}">
                                <ItemsPresenter />

                            </r:Reveal>
                            
                            <ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost"/>
                            
                        </Grid>
                        <ControlTemplate.Triggers>
                            
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost"/>
                            </Trigger>
                            
                            <!--<Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" Value="Hidden" TargetName="Expander"/>
                            </Trigger>-->
                            
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Selection_Border"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                
                                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Selection_Border"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            </MultiTrigger>
                            
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <HierarchicalDataTemplate DataType="{x:Type local:EmployeeNode}" ItemsSource="{Binding ReportingEmployees}">
            <TextBlock Text="{Binding Path=Data.FirstName}" />
        </HierarchicalDataTemplate>
        
    </Window.Resources>
    
    <DockPanel>
        <TreeView Width="500" x:Name="EmployeesTree" DockPanel.Dock="Left" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource MonStyleTreeViewItem}"/>
    </DockPanel>

A vérifier

**EzecKiel** · 27/05/2008, 16h38

Exact

Merci beaucoup !!!

Trop fort binoo

WPF Treeview et Customization

Windows Presentation Foundation

Discussions similaires

Partager

Partager