Skip to content

Commit 93015b3

Browse files
SKProCHSKProCH
authored
Merge pull request #443 from AvaloniaCommunity/dataGridControlThemes
Data grid control themes
2 parents b436c63 + f3f3dc2 commit 93015b3

File tree

3 files changed

+331
-424
lines changed

3 files changed

+331
-424
lines changed

‎Material.Avalonia.DataGrid/DataGrid.axaml‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
<ResourceDictionary xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
4+
xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Controls.DataGrid">
5+
<!--TODO: Validation and Focus-->
6+
7+
<Thickness x:Key="DataGridTextColumnCellTextBlockMargin">0</Thickness>
8+
9+
<ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
10+
<Setter Property="VerticalAlignment" Value="Center" />
11+
</ControlTheme>
12+
13+
<!-- <ControlTheme x:Key="DataGridCellTextBoxTheme" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}"> -->
14+
<!-- <Setter Property="VerticalAlignment" Value="Stretch" /> -->
15+
<!-- <Setter Property="Background" Value="Transparent" /> -->
16+
<!-- <Style Selector="^ /template/ DataValidationErrors"> -->
17+
<!-- <Setter Property="Theme" Value="{StaticResource TooltipDataValidationErrors}" /> -->
18+
<!-- </Style> -->
19+
<!-- </ControlTheme> -->
20+
21+
<!-- Theme for the Expander Button used in Row Group Headers -->
22+
<ControlTheme x:Key="MaterialDataGridExpanderButtonTheme" TargetType="ToggleButton">
23+
<Setter Property="Cursor" Value="Hand" />
24+
<Setter Property="Focusable" Value="False" />
25+
<Setter Property="CornerRadius" Value="16" />
26+
<Setter Property="Width" Value="24" />
27+
<Setter Property="Height" Value="24" />
28+
<Setter Property="Margin" Value="4,0,0,0" />
29+
<Setter Property="Template">
30+
<Setter.Value>
31+
<ControlTemplate>
32+
<Border Background="Transparent"
33+
CornerRadius="{TemplateBinding CornerRadius}"
34+
ClipToBounds="True">
35+
<ripple:RippleEffect Name="PART_Ripple"
36+
RippleFill="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}">
37+
<Panel Name="PART_InnerPanel" Width="24" Height="24">
38+
<Path Data="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
39+
Name="ExpandPath"
40+
Fill="{TemplateBinding Foreground}"
41+
Stroke="{TemplateBinding Foreground}" />
42+
</Panel>
43+
</ripple:RippleEffect>
44+
</Border>
45+
</ControlTemplate>
46+
</Setter.Value>
47+
</Setter>
48+
49+
<Style Selector="^ /template/ Panel#PART_InnerPanel">
50+
<Setter Property="RenderTransform" Value="rotate(0deg)" />
51+
</Style>
52+
53+
<Style Selector="^:not(.no-transitions) /template/ Panel#PART_InnerPanel">
54+
<Setter Property="Transitions">
55+
<Transitions>
56+
<TransformOperationsTransition Duration="0:0:0.25" Property="RenderTransform" Easing="CircularEaseOut" />
57+
</Transitions>
58+
</Setter>
59+
</Style>
60+
61+
<!-- Rotate the arrow to 45 degrees when group expanded -->
62+
<Style Selector="^:checked /template/ Panel#PART_InnerPanel">
63+
<Setter Property="RenderTransform" Value="rotate(45deg)" />
64+
</Style>
65+
</ControlTheme>
66+
67+
<!-- DataGridCell Theme -->
68+
<ControlTheme x:Key="{x:Type DataGridCell}" TargetType="DataGridCell">
69+
<Setter Property="Background" Value="Transparent" />
70+
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
71+
<Setter Property="VerticalContentAlignment" Value="Stretch" />
72+
<Setter Property="Padding" Value="16,0" />
73+
<Setter Property="Template">
74+
<ControlTemplate>
75+
<Grid ColumnDefinitions="*,Auto"
76+
Background="{TemplateBinding Background}">
77+
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
78+
Content="{TemplateBinding Content}"
79+
Margin="{TemplateBinding Padding}"
80+
TextBlock.Foreground="{TemplateBinding Foreground}"
81+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
82+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
83+
</Grid>
84+
</ControlTemplate>
85+
</Setter>
86+
</ControlTheme>
87+
88+
<!-- DataGridColumnHeader Theme -->
89+
<ControlTheme x:Key="{x:Type DataGridColumnHeader}" TargetType="DataGridColumnHeader">
90+
<Setter Property="MinHeight" Value="56" />
91+
<Setter Property="Foreground" Value="{DynamicResource MaterialColumnHeaderBrush}" />
92+
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
93+
<Setter Property="VerticalContentAlignment" Value="Center" />
94+
<Setter Property="SeparatorBrush" Value="{DynamicResource MaterialDividerBrush}" />
95+
<Setter Property="Padding" Value="16,0" />
96+
<Setter Property="Background" Value="Transparent" />
97+
<Setter Property="Template">
98+
<ControlTemplate>
99+
<Grid ColumnDefinitions="*,Auto"
100+
Background="{TemplateBinding Background}">
101+
102+
<Grid ColumnDefinitions="*,Auto"
103+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
104+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
105+
Margin="{TemplateBinding Padding}">
106+
<ContentPresenter Content="{TemplateBinding Content}" />
107+
108+
<Path Name="SortIcon"
109+
Grid.Column="1"
110+
Fill="{TemplateBinding Foreground}"
111+
HorizontalAlignment="Left"
112+
VerticalAlignment="Center"
113+
Stretch="Uniform"
114+
Width="8"
115+
Margin="4,0,0,0"
116+
Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z " />
117+
</Grid>
118+
119+
<Rectangle Name="VerticalSeparator"
120+
Grid.Column="1" Width="2" Height="14"
121+
VerticalAlignment="Stretch"
122+
Fill="{TemplateBinding SeparatorBrush}"
123+
IsVisible="{TemplateBinding AreSeparatorsVisible}" />
124+
</Grid>
125+
</ControlTemplate>
126+
</Setter>
127+
128+
<Style Selector="^:dragIndicator">
129+
<Setter Property="Opacity" Value="0.5" />
130+
</Style>
131+
132+
<Style Selector="^ /template/ Path#SortIcon">
133+
<Setter Property="IsVisible" Value="False" />
134+
<Setter Property="RenderTransform">
135+
<Setter.Value>
136+
<ScaleTransform ScaleX="0.9" ScaleY="0.9" />
137+
</Setter.Value>
138+
</Setter>
139+
</Style>
140+
141+
<Style Selector="^:sortascending /template/ Path#SortIcon">
142+
<Setter Property="IsVisible" Value="True" />
143+
</Style>
144+
145+
<Style Selector="^:sortdescending /template/ Path#SortIcon">
146+
<Setter Property="IsVisible" Value="True" />
147+
<Setter Property="RenderTransform">
148+
<Setter.Value>
149+
<ScaleTransform ScaleX="0.9" ScaleY="-0.9" />
150+
</Setter.Value>
151+
</Setter>
152+
</Style>
153+
</ControlTheme>
154+
155+
<!-- DataGridRow Theme -->
156+
<ControlTheme x:Key="{x:Type DataGridRow}" TargetType="DataGridRow">
157+
<Setter Property="Background" Value="{Binding $parent[DataGrid].RowBackground}" />
158+
<Setter Property="Template">
159+
<ControlTemplate>
160+
<Border x:Name="RowBorder"
161+
Background="{TemplateBinding Background}"
162+
BorderBrush="{TemplateBinding BorderBrush}"
163+
BorderThickness="{TemplateBinding BorderThickness}"
164+
CornerRadius="{TemplateBinding CornerRadius}">
165+
<DataGridFrozenGrid Name="PART_Root"
166+
MinHeight="52"
167+
RowDefinitions="*,Auto,Auto"
168+
ColumnDefinitions="Auto,*">
169+
170+
<Rectangle Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" />
171+
172+
<DataGridRowHeader Grid.RowSpan="3" Name="PART_RowHeader" DataGridFrozenGrid.IsFrozen="True" />
173+
<DataGridCellsPresenter Grid.Column="1" Name="PART_CellsPresenter" DataGridFrozenGrid.IsFrozen="True" />
174+
<DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="PART_DetailsPresenter" />
175+
<Rectangle Grid.Row="2" Grid.Column="1" Margin="0"
176+
VerticalAlignment="Bottom" Height="1" Name="PART_BottomGridLine"
177+
HorizontalAlignment="Stretch" />
178+
</DataGridFrozenGrid>
179+
</Border>
180+
</ControlTemplate>
181+
</Setter>
182+
183+
<Style Selector="^ /template/ Rectangle#BackgroundRectangle">
184+
<Setter Property="IsVisible" Value="False" />
185+
<Setter Property="Fill" Value="{DynamicResource MaterialSelectionBrush}" />
186+
</Style>
187+
188+
<Style Selector="^:pointerover /template/ Rectangle#BackgroundRectangle">
189+
<Setter Property="IsVisible" Value="True" />
190+
<Setter Property="Opacity" Value="0.5" />
191+
</Style>
192+
193+
<Style Selector="^:selected /template/ Rectangle#BackgroundRectangle">
194+
<Setter Property="IsVisible" Value="True" />
195+
<Setter Property="Opacity" Value="1" />
196+
</Style>
197+
198+
<!-- <Style Selector="^:selected">
199+
<Setter Property="Foreground" Value="{DynamicResource MaterialSelectionBrush}" />
200+
</Style> -->
201+
</ControlTheme>
202+
203+
<!-- DataGridRowHeader Theme -->
204+
<ControlTheme x:Key="{x:Type DataGridRowHeader}" TargetType="DataGridRowHeader">
205+
<Setter Property="Template">
206+
<ControlTemplate>
207+
<Grid Name="PART_Root"
208+
RowDefinitions="*,*,Auto"
209+
ColumnDefinitions="Auto,*" />
210+
</ControlTemplate>
211+
</Setter>
212+
</ControlTheme>
213+
214+
<!-- DataGridRowGroupHeader Theme -->
215+
<ControlTheme x:Key="{x:Type DataGridRowGroupHeader}" TargetType="DataGridRowGroupHeader">
216+
<Setter Property="Background" Value="{DynamicResource ThemeControlMidHighBrush}" />
217+
<Setter Property="Template">
218+
<ControlTemplate>
219+
<DataGridFrozenGrid Name="Root"
220+
Background="{TemplateBinding Background}"
221+
MinHeight="52"
222+
ColumnDefinitions="Auto,Auto,Auto,Auto"
223+
RowDefinitions="Auto,*,Auto">
224+
225+
<Rectangle Grid.Column="1" Grid.Row="1" Name="PART_IndentSpacer" />
226+
<!-- Apply the specific theme for the expander button -->
227+
<ToggleButton Grid.Column="2" Grid.Row="1" Name="PART_ExpanderButton" Margin="2,0,0,0"
228+
Theme="{StaticResource MaterialDataGridExpanderButtonTheme}" />
229+
230+
<StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" Margin="0,1,0,1">
231+
<TextBlock Name="PART_PropertyNameElement" Margin="4,0,0,0" IsVisible="{TemplateBinding IsPropertyNameVisible}" />
232+
<TextBlock Margin="4,0,0,0" Text="{Binding Key, DataType=collections:DataGridCollectionViewGroup}" />
233+
<TextBlock Name="PART_ItemCountElement" Margin="4,0,0,0" IsVisible="{TemplateBinding IsItemCountVisible}" />
234+
</StackPanel>
235+
236+
<DataGridRowHeader Name="RowHeader" Grid.RowSpan="3" DataGridFrozenGrid.IsFrozen="True" />
237+
238+
</DataGridFrozenGrid>
239+
</ControlTemplate>
240+
</Setter>
241+
</ControlTheme>
242+
243+
<!-- DataGrid Theme -->
244+
<ControlTheme x:Key="{x:Type DataGrid}" TargetType="DataGrid">
245+
<Setter Property="RowBackground" Value="Transparent" />
246+
<Setter Property="Background" Value="Transparent" />
247+
<Setter Property="HeadersVisibility" Value="Column" />
248+
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
249+
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
250+
<Setter Property="SelectionMode" Value="Extended" />
251+
<Setter Property="GridLinesVisibility" Value="Horizontal" />
252+
<Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource MaterialDividerBrush}" />
253+
<Setter Property="VerticalGridLinesBrush" Value="{DynamicResource MaterialDividerBrush}" />
254+
<Setter Property="BorderBrush" Value="{DynamicResource MaterialBodyBrush}" />
255+
<Setter Property="BorderThickness" Value="1" />
256+
<Setter Property="DropLocationIndicatorTemplate">
257+
<Template>
258+
<Rectangle Fill="{DynamicResource MaterialSelectionBrush}" Width="2" />
259+
</Template>
260+
</Setter>
261+
<Setter Property="Template">
262+
<ControlTemplate>
263+
<Border Background="{TemplateBinding Background}"
264+
BorderThickness="{TemplateBinding BorderThickness}"
265+
BorderBrush="{TemplateBinding BorderBrush}"
266+
CornerRadius="4">
267+
<Grid RowDefinitions="Auto,*,Auto,Auto" ColumnDefinitions="Auto,*,Auto">
268+
269+
<DataGridColumnHeader Name="PART_TopLeftCornerHeader" Width="22" />
270+
<DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1" />
271+
272+
<Separator Grid.ColumnSpan="3" Margin="0"
273+
VerticalAlignment="Bottom" Height="1"
274+
Background="{TemplateBinding BorderBrush}" />
275+
276+
<DataGridRowsPresenter Name="PART_RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1">
277+
<DataGridRowsPresenter.GestureRecognizers>
278+
<ScrollGestureRecognizer CanHorizontallyScroll="True" CanVerticallyScroll="True" />
279+
</DataGridRowsPresenter.GestureRecognizers>
280+
</DataGridRowsPresenter>
281+
<Rectangle Name="PART_BottomRightCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Column="2" Grid.Row="2" />
282+
<Rectangle Name="BottomLeftCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Row="2" Grid.ColumnSpan="2" />
283+
<ScrollBar Name="PART_VerticalScrollbar" Classes="Modern"
284+
Orientation="Vertical" Grid.Column="2" Grid.Row="1" />
285+
286+
<Grid Grid.Column="1" Grid.Row="2"
287+
ColumnDefinitions="Auto,*">
288+
<Rectangle Name="PART_FrozenColumnScrollBarSpacer" />
289+
<ScrollBar Name="PART_HorizontalScrollbar" Grid.Column="1"
290+
Classes="Modern" Orientation="Horizontal" />
291+
</Grid>
292+
</Grid>
293+
</Border>
294+
</ControlTemplate>
295+
</Setter>
296+
297+
<Style Selector="^ /template/ ScrollBar">
298+
<Setter Property="Theme" Value="{StaticResource MaterialModernScrollBar}" />
299+
</Style>
300+
301+
<!-- Template for classic scrollbars -->
302+
<Style Selector="^.ClassicScrollBar /template/ ScrollBar">
303+
<Setter Property="Theme" Value="{StaticResource MaterialScrollBar}" />
304+
</Style>
305+
306+
<Style Selector="^.DisableHoveringScrollBar /template/ ScrollBar">
307+
<Setter Property="Margin" Value="0" />
308+
<Style Selector="^:horizontal">
309+
<Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
310+
</Style>
311+
<Style Selector="^:vertical">
312+
<Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
313+
</Style>
314+
</Style>
315+
</ControlTheme>
316+
</ResourceDictionary>

0 commit comments

Comments
 (0)