Discussion :

[vhellers]

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]

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]

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]

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]

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

[vhellers]

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>