Discussion :

[Golzinne]

Bonjour,

J'ai fais un datagrid transparent et derrière j'ai mis une belle image très foncée.

Code :

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

 <data:DataGrid x:Name="GrilleContact" Width="1000" AlternatingRowBackground="#15FFFFFF"  RowBackground="Transparent"  Background="Transparent" ItemsSource="{Binding Data, ElementName=ContactDS}" AutoGenerateColumns="False"  RowEditEnded="GrilleContact_RowEditEnded">

Bien sûr pour que mon texte soit lisible sur un fond foncé, je dois mettre le foreground à blanc.

par exemple:

Code :

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

                            <data:DataGridTextColumn Foreground="White"  Header="First Name" Binding="{Binding ContactFirstName}" Width="80" IsReadOnly="true" />

Mon problème, c'est que la ligne sélectionnée dans le datagrid apparait par défaut sur un fond presque blanc et que donc ma ligne sélectionnée (font blanc sur fond presque blanc) est illisible.

J'ai trouvé plusieurs méthodes pour pouvoir changer le style du datagrid mais elles sont toutes plus compliquées les unes que les autres (avec décompilation de dll, ...)

Est-ce que quellqu'un aurait déjà rencontré ce besoin ?

Merci d'avance

[Skyounet]

Y'a pas de template/style pour le DataGrid ? Y'a pas genre une resource SelectedRowColor ?

[DaMo`]

Normalement par défaut le fond de sélection de la datagrid est bleu

Sinon je sais pas si tu as expression blend, dans ce cas la il te suffit de faire un clic droit sur la datagrid -> Edit Additional Template -> Edit RowStyle et tu modifies la couleur appliqué dans l'état : NormalSelected

sinon je te copie la Template par défaut de RowStyle, pour la couleur du selected il te suffit de modifier la couleur du Rectangle "BackgroundRectangle"

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
 
	<Style x:Key="DataGridRowStyle" TargetType="data:DataGridRow">
			<Setter Property="IsTabStop" Value="False"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="data:DataGridRow">
						<dataPrimitives:DataGridFrozenGrid x:Name="Root">
							<dataPrimitives:DataGridFrozenGrid.Resources>
								<Storyboard x:Key="DetailsVisibleTransition">
									<DoubleAnimation Duration="00:00:0.1" Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight"/>
								</Storyboard>
							</dataPrimitives:DataGridFrozenGrid.Resources>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="NormalAlternatingRow">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="0"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To=".5"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="NormalSelected">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="MouseOverSelected">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="UnfocusedSelected">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
											<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FFE1E7EC"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="ValidationStates">
									<VisualState x:Name="Valid"/>
									<VisualState x:Name="Invalid">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<dataPrimitives:DataGridFrozenGrid.RowDefinitions>
								<RowDefinition/>
								<RowDefinition Height="Auto"/>
								<RowDefinition Height="Auto"/>
							</dataPrimitives:DataGridFrozenGrid.RowDefinitions>
							<dataPrimitives:DataGridFrozenGrid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition/>
							</dataPrimitives:DataGridFrozenGrid.ColumnDefinitions>
							<Rectangle x:Name="BackgroundRectangle" Fill="#FFBADDE9" Opacity="0" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
							<Rectangle x:Name="InvalidVisualElement" Fill="#FFF7D8DB" Opacity="0" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
							<dataPrimitives:DataGridRowHeader x:Name="RowHeader" Grid.RowSpan="3" dataPrimitives:DataGridFrozenGrid.IsFrozen="True"/>
							<dataPrimitives:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1" dataPrimitives:DataGridFrozenGrid.IsFrozen="True"/>
							<dataPrimitives:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="1" Grid.Row="1"/>
							<Rectangle x:Name="BottomGridLine" Height="1" HorizontalAlignment="Stretch" Grid.Column="1" Grid.Row="2"/>
						</dataPrimitives:DataGridFrozenGrid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

pour l'appliquer :

Code :

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

		<data:DataGrid RowStyle="{StaticResource DataGridRowStyle}"/>

[Golzinne]

Bonjour,

Merci pour vos réponses

Blend permet effectivement de faire facilement le changement. (il faut quand même savoir comment faire !).

J'ai donc cliqué droit sur mon datagrid et pris "Edit Additional Templates" puis "Edit Row Style" puis "Edit a copy". Il me propose alors une fenêtre avec "Create Style Resource" et donc je pousse sur "OK".

Dans "Objects and Timeline", je clique sur "BackgroundRectangle" et la couleur par défaut, est un bleu clair. Je change la couleur pour du noir et je sauve.

Le style suivant apparait dans ma page:

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
 <Style x:Key="DataGridRowStyleBKE" TargetType="data:DataGridRow">
        	<Setter Property="IsTabStop" Value="False"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="data:DataGridRow">
        				<dataPrimitives:DataGridFrozenGrid x:Name="Root">
        					<dataPrimitives:DataGridFrozenGrid.Resources>
        						<Storyboard x:Key="DetailsVisibleTransition">
        							<DoubleAnimation Duration="00:00:0.1" Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight"/>
        						</Storyboard>
        					</dataPrimitives:DataGridFrozenGrid.Resources>
        					<dataPrimitives:DataGridFrozenGrid.ColumnDefinitions>
        						<ColumnDefinition Width="Auto"/>
        						<ColumnDefinition/>
        					</dataPrimitives:DataGridFrozenGrid.ColumnDefinitions>
        					<dataPrimitives:DataGridFrozenGrid.RowDefinitions>
        						<RowDefinition/>
        						<RowDefinition Height="Auto"/>
        						<RowDefinition Height="Auto"/>
        					</dataPrimitives:DataGridFrozenGrid.RowDefinitions>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal"/>
        							<VisualState x:Name="NormalAlternatingRow">
        								<Storyboard>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="0"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="MouseOver">
        								<Storyboard>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To=".5"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="NormalSelected">
        								<Storyboard>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="MouseOverSelected">
        								<Storyboard>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="UnfocusedSelected">
        								<Storyboard>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
        									<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FFE1E7EC"/>
        								                                        </Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="ValidationStates">
        							<VisualState x:Name="Valid"/>
        							<VisualState x:Name="Invalid">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Visibility">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        									</ObjectAnimationUsingKeyFrames>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Rectangle x:Name="BackgroundRectangle" Fill="Black" Opacity="0" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
        					<Rectangle x:Name="InvalidVisualElement" Fill="#FFF7D8DB" Opacity="0" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
        					<dataPrimitives:DataGridRowHeader x:Name="RowHeader" dataPrimitives:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
        					<dataPrimitives:DataGridCellsPresenter x:Name="CellsPresenter" dataPrimitives:DataGridFrozenGrid.IsFrozen="True" Grid.Column="1"/>
        					<dataPrimitives:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="1" Grid.Row="1"/>
        					<Rectangle x:Name="BottomGridLine" Height="1" HorizontalAlignment="Stretch" Grid.Column="1" Grid.Row="2"/>
        				</dataPrimitives:DataGridFrozenGrid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>

ce qui est presque parfait, sauf que quand la grille s'ouvre, la première ligne apparait toujours sur fond presque blanc.

Il faut modifier dans le code ci-dessus:

Code :

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

1
2
3
4
5
6
<VisualState x:Name="UnfocusedSelected">
        								<Storyboard>
        									<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>
        									<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="Black"/>
        								                                        </Storyboard>
        							</VisualState>

Et voilà un problème de réglé,

Merci et Bon WE.