Discussion :

[jacpapac]

Bonsoir,

Je suis en train de tenter de styliser un treeview pour qu'il s'intègre au graphisme global de mon application et je bute sur un problème.
J'ai deux niveaux de treeviewitems :

Code :

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

1
2
+ Niveau 1
      Niveau 2

Mon problème se situe sur le rollover d'un treeviewitem. En effet je souhaite qu'une image de fond s'affiche sous l'item survolé (de niveau 1 ou 2) or j'ai fait mon style sur le niveau 1 et les items de niveau 2 se trouvent dans un "itemspresenter".
Je ne vois pas comment styliser les items de niveau 2 pour afficher l'image en rollover sous l'item correspondant sans que l'image s'affiche aussi pour l'item parent...
Bref je m'en sors pas...

voici le code :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<Style x:Key="TreeViewItemStyle1" 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="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
		<!--<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>-->
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type TreeViewItem}">
					<Grid Width="Auto">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="225"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition/>
						</Grid.RowDefinitions>
						<Grid Margin="0,8,0,0" Grid.ColumnSpan="1" x:Name="bgTreeViewItem" Height="25" HorizontalAlignment="Stretch">
							<ToggleButton x:Name="Expander" Style="{DynamicResource ToggleButtonTreeview}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left" Margin="0,0,0,0" d:LayoutOverrides="HorizontalAlignment"/>
							<Border SnapsToDevicePixels="true" x:Name="Bd" Margin="19,0,0,0" Height="16" VerticalAlignment="Stretch">
								<TextBlock x:Name="Text" Width="Auto" Height="20" TextWrapping="Wrap" FontFamily="Verdana" FontSize="11" Foreground="#FF000000" HorizontalAlignment="Stretch" Margin="0,-2,0,0"><InlineUIContainer>
										<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_Header" ContentSource="Header" Height="20" Margin="0,0,0,0" VerticalAlignment="Bottom"/>
									</InlineUIContainer></TextBlock>
							</Border>
							<Image HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Bottom" Width="35" Height="19" Source="roll_menu.png" Stretch="Fill" x:Name="imgRollover" Visibility="Hidden"/>
						</Grid>
						<ItemsPresenter x:Name="ItemsHost" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Margin="0,8,0,0"/>
						<Rectangle Margin="0,0,0,0" VerticalAlignment="Top" Width="Auto" Height="0.5" Fill="#FFB2B2B2" Stroke="{x:Null}" Grid.ColumnSpan="1" Grid.Row="1"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsExpanded" Value="false">
							<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
							<Setter TargetName="Text" Property="Foreground" Value="#B2000000" />
						</Trigger>
						<Trigger Property="HasItems" Value="false">
							<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
						</Trigger>
						<Trigger Property="HasItems" Value="true">
							<Setter Property="Visibility" TargetName="Expander" Value="Visible"/>
							<Setter TargetName="Text" Property="FontWeight" Value="Bold" />
						</Trigger>
						<Trigger Property="IsMouseOver" Value="true">
							<!--<Setter Property="Background" TargetName="bgTreeViewItem" Value="{DynamicResource GreenGradient}"/>
							<Setter Property="Visibility" TargetName="imgRollover" Value="Visible"/>-->
							<Setter TargetName="Text" Property="FontWeight" Value="Bold" />
							<Setter TargetName="Text" Property="Foreground" Value="#FFFFFFFF" />
						</Trigger>
						<MultiTrigger>
							<MultiTrigger.Conditions>
								<Condition Property="HasItems" Value="true"/>
								<Condition Property="IsMouseOver" Value="true"/>
							</MultiTrigger.Conditions>
							<Setter Property="Background" TargetName="bgTreeViewItem" Value="{DynamicResource GreenGradient}"/>
							<Setter Property="Visibility" TargetName="imgRollover" Value="Visible"/>
						</MultiTrigger>
						<MultiTrigger>
							<MultiTrigger.Conditions>
								<Condition Property="HasItems" Value="false"/>
								<Condition Property="IsMouseOver" Value="true"/>
							</MultiTrigger.Conditions>
							<Setter Property="Background" TargetName="bgTreeViewItem" Value="Transparent"/>
							<Setter Property="Visibility" TargetName="imgRollover" Value="Hidden"/>
						</MultiTrigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

Si vous avez un exemple simple ça me convient aussi... Merci

[jacpapac]

bonjour,

j'ai fait quelques tests et j'ai l'impression d'avoir des problèmes sur les triggers surtout... si vous pouvez m'orienter dans ma recherche...

[binoo]

Salut,

Est-ce que tu pourrais montrer une image (dessin rapide de ce que tu veux), car j'ai du mal à visualiser

Ce que je comprend, tu veux un background (image dans ton cas) différent selon le niveau sur lequel tu te trouves. Est-ce que c'est ça ?

[jacpapac]

En fait je veux juste afficher un background derrière l'item survolé. Qu'il soit de niveau 1 ou de niveau 2.
Sauf qu'avec mon truc, quand je survol un item enfant le background se met toujours sur l'item parent seulement... Et non l'inverse

[tomlev]

Je viens de repenser à ta question en voyant une propriété dont j'avais oublié l'existence... IsMouseDirectlyOver

En fait, si IsMouseOver est vrai pour un élément enfant, il l'est aussi pour l'élément parent (puisque l'enfant est dans le parent), d'où ton problème. Alors qu'avec IsMouseDirectlyOver, ça devrait être vrai pour l'enfant mais faux pour le parent... a priori en tous cas, j'ai pas testé

[jacpapac]

bonjour,
merci pour vos réponses, j'ai essayé le ismousedirectlyover sans succès... Je n'ai toujours pas trouvé de solution à ce problème.