WPF Treeview et Customization

Version imprimable

26/05/2008, 16h44
EzecKiel

WPF Treeview et Customization

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 ! :)
26/05/2008, 17h04
binoo

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

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 ;)
26/05/2008, 17h07
EzecKiel

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

Merci ;)

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

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:

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

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:

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

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:

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:

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 :P).

27/05/2008, 12h40
EzecKiel

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 :yaisse2: 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 :king: )

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 :
http://puazea.bay.livefilestore.com/...0bQ/reveal.PNG

Voici le code :

Code:

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 !

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

Code:

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

27/05/2008, 16h38
EzecKiel

Exact :oops:

Merci beaucoup !!!

Trop fort binoo :king: