[Blend] Comment modifier l'apparence d'une Listview ?

**vhellers** · 03/09/2008, 13h27

Bonjour,

Je débute sur Blend et je suis en train de faire une interface de logiciel. Tout se passe presque bien en dehors de ListView que je ne parviens pas du tout à personnaliser.

C'est le seul élément de mon interface avec les vieilles couleurs grises et formes carrées...

Pour les boutons tout est prévu, pour certains composants je pars d'un "simple style", mais je ne vois pas comment faire avec Listview.

Merci d'avance pour votre aide.

@ bientôt.

**ikeas** · 03/09/2008, 13h37

si tu veux mofier les design propre a la liste view
tu vas sur blend
tu clique droit sur la liste view
edit control part > edit a copy

la tu modifie la listview pas ce qu'il y a dedans

sinion pour modifier ce qui se trouve a l'interrieur
tu rajoute des <GridViewColumn/>
et la tu peux faire sensiblement la meme chose
mais tu peux faire plus simple comme ceci par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<ListView.View>
<GridView AllowsColumnReorder="True" >
<GridViewColumn Header="" Width="Auto" DisplayMemberBinding="{Binding Path=CurrentAddress, StringFormat=\{0:0000\}}"/>
<GridViewColumn Header="Instruction code" Width="Auto" DisplayMemberBinding="{Binding Path=InstrCode}"/><GridViewColumn Header="PRI type" Width="Auto" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=PRIType}" Margin="1,1,1,1"Background="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}}"
/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
.................

**binoo** · 03/09/2008, 14h19

Salut,

Les styles sur lesquels il faut jouer pour modifier une ListView sont ceux :
- de la ListView (conteneur des items : on peut modifier le contour (border) de la ListView, le background, ...)
- du ListViewItem (définition de la couleur de sélection (autre que le bleu par défaut), de la couleur du texte, de la couleur lorsqu'on survole l'item avec le curseur,... )
- du GridViewColumnHeader (pour les colonnes si tu as décidé d'en utiliser)

La méthode pour récupérer les styles par défaut est celle énoncée par ikeas.

**vhellers** · 03/09/2008, 19h22

Rebonjour,

Merci pour vos réponses.

Toutefois je ne suis toujours pas au point.

J'arrive effectivement à modifier quelques caractéristiques de la listeView mais pas grand chose.

J'arrive à modifier un GridColumnHeader pour en faire une ressource qui me plait mais je n'arrive pas ensuite à l'appliquer à ce que je veux.

En effet voici ma démarche :

Je met un listView dans ma fenêtre.

Je crées mes colonnes en allant dans le panneau "divers" que j'étends puis je vais dans "Columns (collection)" et clique sur les trois petits points.

Avec ça en remplissant les header j'arrive à avoir les noms de colonnes que je veux.

En ayant modifier une copie d'un gridViewColumnHeader j'espérais retrouver ma ressource dans le menu où je crées mes en-têtes de colonne mais rien à faire.

Bref, je ne sais même pas si c'est vraiment comme ça qu'on gère un listView.

Merci de ne pas me jeter des pierres et si vous avez un tuto à me conseiller sur le sujet je suis preneur.

@ bientôt et merci pour vos réponses.

P.S. au passage je ne comprends pas bien le sens de la valeur auto des GridViewColumn, car si je laisse sur auto on ne voit rien. Ça ne tient compte que du contenu et pas des en-tête?

**ikeas** · 03/09/2008, 21h00

fait voir le code que tu as complet pour ta fenetre que je regarde
et dit moi ce que tu voudrais

**vhellers** · 03/09/2008, 23h58

C'est sympa merci, voici le code.

Ce que je voudrais c'est faire en sorte que dans ma listeView les en-têtes ne soient plus bêtement gris, mais plutôt comme ma GridViewColumn. Et surtout savoir comment le faire depuis l'interface Blend.

Merci encore.

Window1.xaml

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
<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="ListoBox.Window1"
	x:Name="Window"
	Title="Window1"
	Width="640" Height="480">
 
	<Grid x:Name="LayoutRoot">
		<ListView IsSynchronizedWithCurrentItem="True" Margin="8,8,272,134" Style="{DynamicResource LVmodele}">
			<ListView.View>
				<GridView>
					<GridViewColumn Header="MaColonne1" Width="100"/>
					<GridViewColumn Header="MaColonne2" Width="100"/>
				</GridView>
			</ListView.View>
		</ListView>
		<GridViewColumnHeader HorizontalAlignment="Right" Style="{DynamicResource GVCHmodele}" VerticalAlignment="Top" Width="168" Height="32" Content="GridViewColumnHeader" Margin="0,32,64,0"/>
	</Grid>
</Window>

composants.xaml

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
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
<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<SolidColorBrush x:Key="GridViewColumnHeaderBackground" Color="#FFF9FAFD"/>
	<LinearGradientBrush x:Key="GridViewColumnHeaderHighlightBackground" EndPoint="0,1" StartPoint="0,0">
		<GradientStop Color="#FFF9FAFD" Offset="0"/>
		<GradientStop Color="#FFBDBECE" Offset="1"/>
	</LinearGradientBrush>
	<SolidColorBrush x:Key="GridViewColumnHeaderDarkBackground" Color="#FFBDBECE"/>
	<SolidColorBrush x:Key="GridViewColumnHeaderGripperBackground" Color="#FFB5B6C8"/>
	<Style x:Key="GridViewColumnHeaderGripper" TargetType="{x:Type Thumb}">
		<Setter Property="Canvas.Right" Value="-9"/>
		<Setter Property="Width" Value="18"/>
		<Setter Property="Height" Value="{Binding Path=ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
		<Setter Property="Padding" Value="0,3,0,4"/>
		<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderGripperBackground}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Thumb}">
					<Border Background="Transparent" Padding="{TemplateBinding Padding}">
						<DockPanel HorizontalAlignment="Center">
							<Rectangle Width="1" Fill="{TemplateBinding Background}"/>
							<Rectangle Width="1" Fill="White"/>
						</DockPanel>
					</Border>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#FFE68B2C"/>
	<SolidColorBrush x:Key="TabItemHotBorderBackround" Color="#FFFFC73C"/>
	<SolidColorBrush x:Key="GridViewColumnHeaderHoverBackground" Color="#FFF9FAFD"/>
	<SolidColorBrush x:Key="GridViewColumnHeaderPressBorder" Color="#FF808099"/>
	<SolidColorBrush x:Key="GridViewColumnHeaderPressBackground" Color="#FFECECF3"/>
	<Style x:Key="GVCHmodele" TargetType="{x:Type GridViewColumnHeader}">
		<Setter Property="HorizontalContentAlignment" Value="Center"/>
		<Setter Property="VerticalContentAlignment" Value="Center"/>
		<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBackground}"/>
		<Setter Property="BorderThickness" Value="1"/>
		<Setter Property="Padding" Value="2,0,2,0"/>
		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
					<Grid SnapsToDevicePixels="true">
						<Grid.Background>
							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
								<GradientStop Color="#FF06DF58" Offset="0"/>
								<GradientStop Color="#FF04B3C9" Offset="1"/>
							</LinearGradientBrush>
						</Grid.Background>
						<Border x:Name="HighlightBorder" VerticalAlignment="Bottom" Height="3" Background="{StaticResource GridViewColumnHeaderHighlightBackground}" BorderBrush="{StaticResource GridViewColumnHeaderDarkBackground}" BorderThickness="0,0,0,1"/>
						<Border Margin="1,0,1,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
							<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0,0,0,1" x:Name="HeaderContent" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
						</Border>
						<Canvas>
							<Thumb x:Name="PART_HeaderGripper" Style="{StaticResource GridViewColumnHeaderGripper}"/>
						</Canvas>
						<Border x:Name="HeaderPressBorder" BorderThickness="1"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="true">
							<Setter Property="BorderBrush" TargetName="HighlightBorder" Value="{StaticResource TabItemHotBorderBrush}"/>
							<Setter Property="Background" TargetName="HighlightBorder" Value="{StaticResource TabItemHotBorderBackround}"/>
							<Setter Property="CornerRadius" TargetName="HighlightBorder" Value="0,0,3,3"/>
							<Setter Property="BorderThickness" TargetName="HighlightBorder" Value="1,0,1,1"/>
							<Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
							<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderHoverBackground}"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="true">
							<Setter Property="Visibility" TargetName="HighlightBorder" Value="Hidden"/>
							<Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
							<Setter Property="BorderBrush" TargetName="HeaderPressBorder" Value="{StaticResource GridViewColumnHeaderPressBorder}"/>
							<Setter Property="Margin" TargetName="HeaderPressBorder" Value="1,0,0,0"/>
							<Setter Property="Margin" TargetName="HeaderContent" Value="1,1,0,0"/>
							<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderPressBackground}"/>
							<Setter Property="BorderBrush" Value="{StaticResource GridViewColumnHeaderPressBackground}"/>
						</Trigger>
						<Trigger Property="Height" Value="Auto">
							<Setter Property="MinHeight" Value="20"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Style.Triggers>
			<Trigger Property="Role" Value="Floating">
				<Setter Property="Opacity" Value="0.7"/>
				<Setter Property="Template">
					<Setter.Value>
						<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
							<Canvas x:Name="PART_FloatingHeaderCanvas"/>
						</ControlTemplate>
					</Setter.Value>
				</Setter>
			</Trigger>
			<Trigger Property="Role" Value="Padding">
				<Setter Property="Template">
					<Setter.Value>
						<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
							<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
								<Border VerticalAlignment="Bottom" Height="3" Background="{StaticResource GridViewColumnHeaderHighlightBackground}" BorderBrush="{StaticResource GridViewColumnHeaderDarkBackground}" BorderThickness="0,0,0,1"/>
								<Border Margin="1,0,1,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
							</Grid>
							<ControlTemplate.Triggers>
								<Trigger Property="Height" Value="Auto">
									<Setter Property="MinHeight" Value="20"/>
								</Trigger>
							</ControlTemplate.Triggers>
						</ControlTemplate>
					</Setter.Value>
				</Setter>
			</Trigger>
		</Style.Triggers>
	</Style>
	<SolidColorBrush x:Key="ListBorder" Color="#FFA5ACB2"/>
	<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
		<Setter Property="Focusable" Value="false"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollViewer}">
					<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="Auto"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="*"/>
							<RowDefinition Height="Auto"/>
						</Grid.RowDefinitions>
						<DockPanel Margin="{TemplateBinding Padding}">
							<ScrollViewer Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" DockPanel.Dock="Top">
								<GridViewHeaderRowPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}" AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"/>
							</ScrollViewer>
							<ScrollContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ScrollContentPresenter" KeyboardNavigation.DirectionalNavigation="Local" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/>
						</DockPanel>
						<ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0.0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
						<ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_VerticalScrollBar" Grid.Column="1" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0.0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
						<DockPanel Grid.Column="1" Grid.Row="1" Background="{Binding Path=Background, ElementName=PART_VerticalScrollBar}" LastChildFill="false">
							<Rectangle Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Width="1" Fill="White" DockPanel.Dock="Left"/>
							<Rectangle Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Height="1" Fill="White" DockPanel.Dock="Top"/>
						</DockPanel>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="LVmodele" TargetType="{x:Type ListView}">
		<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
		<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
		<Setter Property="BorderThickness" Value="1"/>
		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
		<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ListView}">
					<Border SnapsToDevicePixels="true" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
						<Border.Background>
							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
								<GradientStop Color="#FFB1AB0B" Offset="0"/>
								<GradientStop Color="#FF04FFC3" Offset="1"/>
							</LinearGradientBrush>
						</Border.Background>
						<ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
							<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
						</ScrollViewer>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsGrouping" Value="true">
							<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<!-- Les entrées du dictionnaire de ressources sont définies ici. -->
</ResourceDictionary>

App.xaml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Application
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="ListoBox.App"
	StartupUri="Window1.xaml">
	<Application.Resources>
		<!-- Les ressources réparties au niveau Application sont définies ici. -->
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="composants.xaml"/>
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Application.Resources>
</Application>

**binoo** · 04/09/2008, 08h44

Salut,

Il faut ajouter le style que tu as défini :

Code xml :

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

<GridViewColumn Header="MaColonne1" HeaderContainerStyle="{DynamicResource GVCHmodele}" Width="100"/>

Après si tu veux que ce style soit appliqué à toutes les colonnes par défaut, tu peux utiliser comme clé pour ton style :

Code xml :

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

<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">

Ainsi tu n'auras pas à ajouter ce code HeaderContainerStyle="{DynamicResource GVCHmodele}" à chaque fois que tu crées une colonne.

[Edit] Pour Blend :
Lorsque tu cliques sur les trois petits points de "Columns (collection)" (dont tu parles dans ton premier post), tu dois remplir l'information HeaderContainerStyle.

**vhellers** · 04/09/2008, 11h22

Bonjour,

En ce qui concerne la première solution ça marche bien.

Toutefois je ne comprends pas pourquoi je ne parviens pas à ce résultat simplement par l'interface graphique.

Lorsque j'ouvre le pop-up GridViewColomn éditeur (en cliquant sur les fameux trois petits points) je ne peux changer que les contenus des Header. Le HeaderContainerStyle a bien une de ces fameuses petites cases qui permettent d'appliquer des ressources, mais l'option "ressource locale" reste irrémédiablement grisée. D'ailleurs, lorsque je le mets dans le xaml, j'ai bien le champs HeaderContainerStyle qui est complété, mais toujours impossible d'utiliser l'option "ressource locale". Un bug de blend ou dès que ça se complique un peu on doit forcement repasser au xaml à la main?

Concernant la deuxième solution qui me semble plus intéressante, je ne comprends pas à quel niveau de mon code je dois le modifier

Je suppose que c'est dans mon fichier de ressource "composants", mais où précisément ?

Et là je comprends encore moins comment faire ça par l'interface graphique.

Merci en tout cas, au pire je peux m'en sortir ainsi.

**binoo** · 04/09/2008, 14h06

J'utilise rarement Blend à vrai dire. Je préfère de loin travailler avec le xaml

.
Nb: Si jamais tu as des problèmes, quand tu ne sais pas ce qui se passe derrière, il est difficile de debugger.

Toujours est-il que tu peux passer par "Custom Expression..." et y mettre la valeur {DynamicResource GVCHmodele}. Ainsi tu n'auras pas à passer par le xaml.

Pour ce qui est de la deuxième solution, tu dois remplacer ta clé x:Key="GVCHmodele" par la clé x:Key="{x:Type GridViewColumnHeader}".
Pour le faire avec Blend, quand tu crées ton style tu fais "appliquer à tous" plutôt que de donner un nom au style.

**vhellers** · 04/09/2008, 18h35

Et bien un grand merci pour toutes ces explications (ça commençait à faire longtemps que je n'avais pas eu de réponse à la question que je posais sur un forum

avec le nombre croissant de types qui postent pour augmenter leur nombre de messages et ceux qui désagréablement font remarquer qu'on s'y connait moins qu'eux...)

Je vois que tu maitrise pas mal le sujet. Tu travailles dessus ? C'est aussi recherchait que ce qui est sous-entendu par endroit ?

@+