Skip to content

Commit 3439f20

Browse files
dipeshmsftdipeshmsft
authored
[Fluent] Adds missing style for GridView in WPF (#10909)
* Added GridView Fluent style * Fixed GridView Header color in Light and HC mode * Addressed PR Comments * Regenerated Theme Files * Regenerated theme files
1 parent 33f4f80 commit 3439f20

File tree

12 files changed

+1256
-152
lines changed

12 files changed

+1256
-152
lines changed

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Controls/ViewIsGridViewConverter.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
4+
using System;
5+
using System.Collections.Generic;
6+
using System.Globalization;
7+
using System.Text;
8+
using System.Windows.Controls;
9+
using System.Windows.Data;
10+
11+
namespace Fluent.Controls
12+
{
13+
internal class ViewIsGridViewConverter : IValueConverter
14+
{
15+
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
16+
{
17+
// Returns true if value is a GridView, otherwise false
18+
return value is GridView;
19+
}
20+
21+
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
22+
{
23+
throw new NotSupportedException();
24+
}
25+
}
26+
}

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/PresentationFramework.Fluent.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<ItemGroup>
2828
<Compile Include="Controls\AnimationFactorToValueConverter.cs" />
2929
<Compile Include="Controls\FallbackBrushConverter.cs" />
30+
<Compile Include="Controls\ViewIsGridViewConverter.cs" />
3031
</ItemGroup>
3132

3233
<!-- Project References -->

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Dark.xaml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,6 +576,18 @@
576576
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
577577
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource ControlStrongFillColorDefault}" />
578578

579+
<!-- GridView -->
580+
<SolidColorBrush x:Key="GridViewColumnHeaderGripperThumbFill" Color="{StaticResource ControlStrokeColorSecondary}" />
581+
<SolidColorBrush x:Key="GridViewColumnHeaderForeground" Color="{StaticResource TextFillColorSecondary}" />
582+
<SolidColorBrush x:Key="GridViewColumnHeaderBackground" Color="Transparent" />
583+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
584+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundPressed" Color="{StaticResource SubtleFillColorTertiary}" />
585+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundDisabled" Color="{StaticResource SubtleFillColorDisabled}" />
586+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrush" Color="Transparent" />
587+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushPointerOver" Color="Transparent" />
588+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushPressed" Color="Transparent" />
589+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushDisabled" Color="Transparent" />
590+
579591
<!-- GroupBox -->
580592
<SolidColorBrush x:Key="GroupBoxBackground" Color="Transparent" />
581593
<SolidColorBrush x:Key="GroupBoxBorderBrush" Color="Transparent" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/HC.xaml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,18 @@
398398
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource SystemColorWindowColor}" />
399399
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource SystemColorButtonTextColor}" />
400400

401+
<!-- GridView -->
402+
<SolidColorBrush x:Key="GridViewColumnHeaderGripperThumbFill" Color="{StaticResource SystemColorButtonTextColor}" />
403+
<SolidColorBrush x:Key="GridViewColumnHeaderForeground" Color="{StaticResource SystemColorWindowTextColor}" />
404+
<SolidColorBrush x:Key="GridViewColumnHeaderBackground" Color="Transparent" />
405+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
406+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundPressed" Color="{StaticResource SystemColorHighlightColor}" />
407+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundDisabled" Color="{StaticResource SystemColorWindowColor}" />
408+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrush" Color="Transparent" />
409+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushPointerOver" Color="Transparent" />
410+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushPressed" Color="Transparent" />
411+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushDisabled" Color="Transparent" />
412+
401413
<!-- GroupBox -->
402414
<SolidColorBrush x:Key="GroupBoxBackground" Color="{StaticResource SystemColorButtonFaceColor}" />
403415
<SolidColorBrush x:Key="GroupBoxBorderBrush" Color="{StaticResource SystemColorButtonTextColor}" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Light.xaml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,18 @@
592592
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
593593
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource ControlStrongFillColorDefault}" />
594594

595+
<!-- GridView -->
596+
<SolidColorBrush x:Key="GridViewColumnHeaderGripperThumbFill" Color="{StaticResource ControlStrokeColorSecondary}" />
597+
<SolidColorBrush x:Key="GridViewColumnHeaderForeground" Color="{StaticResource TextFillColorPrimary}" />
598+
<SolidColorBrush x:Key="GridViewColumnHeaderBackground" Color="Transparent" />
599+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
600+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundPressed" Color="{StaticResource SubtleFillColorTertiary}" />
601+
<SolidColorBrush x:Key="GridViewColumnHeaderBackgroundDisabled" Color="{StaticResource SubtleFillColorDisabled}" />
602+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrush" Color="Transparent" />
603+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushPointerOver" Color="Transparent" />
604+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushPressed" Color="Transparent" />
605+
<SolidColorBrush x:Key="GridViewColumnHeaderBorderBrushDisabled" Color="Transparent" />
606+
595607
<!-- GroupBox -->
596608
<SolidColorBrush x:Key="GroupBoxBackground" Color="Transparent" />
597609
<SolidColorBrush x:Key="GroupBoxBorderBrush" Color="Transparent" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/GridView.xaml‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<ResourceDictionary
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:system="clr-namespace:System;assembly=System.Runtime">
5+
6+
<system:Double x:Key="GridViewColumnHeaderMinHeight">32</system:Double>
7+
8+
9+
<Style x:Key="DefaultGridViewColumnHeaderGripper" TargetType="Thumb">
10+
<Setter Property="Canvas.Right" Value="-4" />
11+
<Setter Property="Width" Value="8" />
12+
<Setter Property="Height" Value="{Binding Path=ActualHeight, RelativeSource={RelativeSource TemplatedParent}}" />
13+
<Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
14+
<Setter Property="Template">
15+
<Setter.Value>
16+
<ControlTemplate TargetType="Thumb">
17+
<Border x:Name="RootGrid"
18+
Background="Transparent"
19+
Padding="{TemplateBinding Padding}">
20+
<Rectangle x:Name="PART_Thumb"
21+
Width="2" Height="16"
22+
HorizontalAlignment="Center"
23+
Fill="{DynamicResource GridViewColumnHeaderGripperThumbFill}"
24+
RadiusX="1"
25+
RadiusY="1" />
26+
</Border>
27+
</ControlTemplate>
28+
</Setter.Value>
29+
</Setter>
30+
</Style>
31+
32+
<!--GridView ColumnHeader Style-->
33+
<Style x:Key="DefaultGridViewColumnHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
34+
<Setter Property="Background" Value="{DynamicResource GridViewColumnHeaderBackground}" />
35+
<Setter Property="BorderBrush" Value="{DynamicResource GridViewColumnHeaderBorderBrush}" />
36+
<Setter Property="Foreground" Value="{DynamicResource GridViewColumnHeaderForeground}" />
37+
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
38+
<Setter Property="VerticalContentAlignment" Value="Center" />
39+
<Setter Property="BorderThickness" Value="0,2,0,2" />
40+
<Setter Property="Padding" Value="12,0" />
41+
<Setter Property="OverridesDefaultStyle" Value="True" />
42+
<Setter Property="Template">
43+
<Setter.Value>
44+
<ControlTemplate TargetType="GridViewColumnHeader">
45+
<Grid>
46+
<Border
47+
x:Name="HeaderBorder"
48+
Background="{TemplateBinding Background}"
49+
BorderThickness="{TemplateBinding BorderThickness}"
50+
BorderBrush="{TemplateBinding BorderBrush}"
51+
CornerRadius="4 4 0 0">
52+
<ContentPresenter
53+
Margin="{TemplateBinding Padding}"
54+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
55+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
56+
RecognizesAccessKey="True"
57+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
58+
</Border>
59+
<Canvas>
60+
<Thumb x:Name="PART_HeaderGripper"
61+
Style="{StaticResource DefaultGridViewColumnHeaderGripper}" />
62+
</Canvas>
63+
</Grid>
64+
<ControlTemplate.Triggers>
65+
<Trigger Property="IsMouseOver" Value="true">
66+
<Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource GridViewColumnHeaderBackgroundPointerOver}" />
67+
<Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{DynamicResource GridViewColumnHeaderBorderBrushPointerOver}" />
68+
</Trigger>
69+
<Trigger Property="IsPressed" Value="true">
70+
<Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource GridViewColumnHeaderBackgroundPressed}" />
71+
<Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{DynamicResource GridViewColumnHeaderBorderBrushPressed}" />
72+
</Trigger>
73+
<Trigger Property="Height" Value="Auto">
74+
<Setter Property="MinHeight" Value="{DynamicResource GridViewColumnHeaderMinHeight}" />
75+
</Trigger>
76+
<Trigger Property="IsEnabled" Value="False">
77+
<Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource GridViewColumnHeaderBackgroundDisabled}" />
78+
<Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{DynamicResource GridViewColumnHeaderBorderBrushDisabled}" />
79+
<Setter Property="Foreground" Value="{DynamicResource GridViewColumnHeaderForegroundDisabled}" />
80+
</Trigger>
81+
</ControlTemplate.Triggers>
82+
</ControlTemplate>
83+
</Setter.Value>
84+
</Setter>
85+
<Style.Triggers>
86+
<Trigger Property="Role" Value="Padding">
87+
<Setter Property="BorderThickness" Value="0,2,0,2" />
88+
<Setter Property="Template">
89+
<Setter.Value>
90+
<!-- The same as normal header, just no gripper. -->
91+
<ControlTemplate TargetType="GridViewColumnHeader">
92+
<Border
93+
Background="{TemplateBinding Background}"
94+
BorderThickness="{TemplateBinding BorderThickness}"
95+
BorderBrush="{TemplateBinding BorderBrush}" />
96+
<ControlTemplate.Triggers>
97+
<Trigger Property="Height" Value="Auto">
98+
<Setter Property="MinHeight" Value="{DynamicResource GridViewColumnHeaderMinHeight}" />
99+
</Trigger>
100+
</ControlTemplate.Triggers>
101+
</ControlTemplate>
102+
</Setter.Value>
103+
</Setter>
104+
</Trigger>
105+
<Trigger Property="Role" Value="Floating">
106+
<Setter Property="Opacity" Value="0.6" />
107+
<Setter Property="Template">
108+
<Setter.Value>
109+
<ControlTemplate TargetType="GridViewColumnHeader">
110+
<Canvas Name="PART_FloatingHeaderCanvas" />
111+
</ControlTemplate>
112+
</Setter.Value>
113+
</Setter>
114+
</Trigger>
115+
</Style.Triggers>
116+
</Style>
117+
118+
<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader" />
119+
120+
<!--GridView ScrollViewer Style-->
121+
<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer">
122+
<Setter Property="Focusable" Value="False" />
123+
<Setter Property="Template">
124+
<Setter.Value>
125+
<ControlTemplate TargetType="ScrollViewer">
126+
<Grid Background="{TemplateBinding Background}"
127+
SnapsToDevicePixels="true">
128+
<Grid.ColumnDefinitions>
129+
<ColumnDefinition Width="*" />
130+
<ColumnDefinition Width="Auto" />
131+
</Grid.ColumnDefinitions>
132+
<Grid.RowDefinitions>
133+
<RowDefinition Height="*" />
134+
<RowDefinition Height="Auto" />
135+
</Grid.RowDefinitions>
136+
<DockPanel
137+
Grid.ColumnSpan="2"
138+
Grid.RowSpan="2"
139+
Margin="{TemplateBinding Padding}">
140+
<ScrollViewer
141+
DockPanel.Dock="Top"
142+
HorizontalScrollBarVisibility="Hidden"
143+
VerticalScrollBarVisibility="Hidden"
144+
Focusable="False">
145+
<GridViewHeaderRowPresenter
146+
Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"
147+
ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={StaticResource DefaultGridViewColumnHeaderStyle}}"
148+
ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
149+
ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
150+
ColumnHeaderStringFormat="{Binding Path=TemplatedParent.View.ColumnHeaderStringFormat, RelativeSource={RelativeSource TemplatedParent}}"
151+
AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
152+
ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
153+
ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
154+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
155+
</ScrollViewer>
156+
<ScrollContentPresenter Name="PART_ScrollContentPresenter"
157+
KeyboardNavigation.DirectionalNavigation="Local"
158+
Content="{TemplateBinding Content}"
159+
ContentTemplate="{TemplateBinding ContentTemplate}"
160+
CanContentScroll="{TemplateBinding CanContentScroll}"
161+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
162+
</DockPanel>
163+
<ScrollBar
164+
Name="PART_HorizontalScrollBar"
165+
Orientation="Horizontal"
166+
Grid.Row="1"
167+
Minimum="0.0"
168+
Maximum="{TemplateBinding ScrollableWidth}"
169+
ViewportSize="{TemplateBinding ViewportWidth}"
170+
Value="{TemplateBinding HorizontalOffset}"
171+
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
172+
Cursor="Arrow" />
173+
<ScrollBar Name="PART_VerticalScrollBar"
174+
Orientation="Vertical"
175+
Grid.Column="1"
176+
Minimum="0.0"
177+
Maximum="{TemplateBinding ScrollableHeight}"
178+
ViewportSize="{TemplateBinding ViewportHeight}"
179+
Value="{TemplateBinding VerticalOffset}"
180+
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
181+
Cursor="Arrow" />
182+
<DockPanel Grid.Column="1"
183+
Grid.Row="1"
184+
Background="{Binding Path=Background, ElementName=PART_VerticalScrollBar}"
185+
LastChildFill="false">
186+
<Rectangle DockPanel.Dock="Left"
187+
Width="1"
188+
Fill="Transparent"
189+
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
190+
<Rectangle DockPanel.Dock="Top"
191+
Height="1"
192+
Fill="Transparent"
193+
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
194+
</DockPanel>
195+
</Grid>
196+
</ControlTemplate>
197+
</Setter.Value>
198+
</Setter>
199+
</Style>
200+
201+
<!-- Default GridView ControlTemplate -->
202+
<ControlTemplate x:Key="GridViewTemplate" TargetType="{x:Type ListView}">
203+
<Border x:Name="RootBorder"
204+
Background="{TemplateBinding Background}"
205+
BorderBrush="{TemplateBinding BorderBrush}"
206+
BorderThickness="{TemplateBinding BorderThickness}"
207+
SnapsToDevicePixels="True">
208+
<Border.Resources>
209+
<Style TargetType="GridViewColumnHeader" BasedOn="{StaticResource DefaultGridViewColumnHeaderStyle}" />
210+
</Border.Resources>
211+
<ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}"
212+
Padding="{TemplateBinding Padding}">
213+
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
214+
</ScrollViewer>
215+
</Border>
216+
<!-- TODO : Is enabled false trigger-->
217+
</ControlTemplate>
218+
219+
</ResourceDictionary>

0 commit comments

Comments
 (0)