Skip to content

Commit edb1665

Browse files
SKProCHSKProCH
authored
Merge pull request #433 from marklam/datagrid-group-expander-icon
Adapt the TreeView's expander for the DataGrid groups.
2 parents 3c92183 + df7b2ad commit edb1665

File tree

1 file changed

+89
-15
lines changed

1 file changed

+89
-15
lines changed

‎Material.Avalonia.DataGrid/DataGrid.xaml‎

Lines changed: 89 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,59 @@
11
<Styles xmlns="https://github.com/avaloniaui"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
34
xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Controls.DataGrid">
45
<!--TODO: Validation and Focus-->
56

67
<Styles.Resources>
78
<Thickness x:Key="DataGridTextColumnCellTextBlockMargin">0</Thickness>
89
</Styles.Resources>
910

11+
<Style Selector="ToggleButton#PART_ExpanderButton">
12+
<Setter Property="Cursor" Value="Hand" />
13+
<Setter Property="Focusable" Value="False" />
14+
<Setter Property="CornerRadius" Value="16" />
15+
<Setter Property="Width" Value="24" />
16+
<Setter Property="Height" Value="24" />
17+
<Setter Property="Margin" Value="4,0,0,0" />
18+
<Setter Property="Template">
19+
<Setter.Value>
20+
<ControlTemplate>
21+
<Border Background="Transparent"
22+
CornerRadius="{TemplateBinding CornerRadius}"
23+
ClipToBounds="True">
24+
<ripple:RippleEffect Name="PART_Ripple"
25+
RippleFill="{TemplateBinding Foreground,
26+
Converter={StaticResource BrushRoundConverter}}">
27+
<Panel Name="PART_InnerPanel" Width="24" Height="24">
28+
<Path Data="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
29+
Name="ExpandPath"
30+
Fill="{TemplateBinding Foreground}"
31+
Stroke="{TemplateBinding Foreground}" />
32+
</Panel>
33+
</ripple:RippleEffect>
34+
</Border>
35+
</ControlTemplate>
36+
</Setter.Value>
37+
</Setter>
38+
39+
<Style Selector="^:not(.no-transitions) /template/ Panel#PART_InnerPanel">
40+
<Setter Property="Transitions">
41+
<Transitions>
42+
<TransformOperationsTransition Duration="0:0:0.25" Property="RenderTransform" Easing="CircularEaseOut" />
43+
</Transitions>
44+
</Setter>
45+
</Style>
46+
47+
<Style Selector="^ /template/ Panel#PART_InnerPanel">
48+
<Setter Property="RenderTransform" Value="rotate(0deg)" />
49+
</Style>
50+
51+
<!-- Rotate the arrow to 45 degrees when group expanded -->
52+
<Style Selector="^:checked /template/ Panel#PART_InnerPanel">
53+
<Setter Property="RenderTransform" Value="rotate(45deg)" />
54+
</Style>
55+
</Style>
56+
1057
<Style Selector="DataGridCell">
1158
<Setter Property="Background" Value="Transparent" />
1259
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -167,11 +214,11 @@
167214

168215
<Style Selector="DataGridRowGroupHeader">
169216
<Setter Property="Background" Value="{DynamicResource ThemeControlMidHighBrush}" />
170-
<Setter Property="Height" Value="20" />
171217
<Setter Property="Template">
172218
<ControlTemplate>
173219
<DataGridFrozenGrid Name="Root"
174220
Background="{TemplateBinding Background}"
221+
MinHeight="52"
175222
ColumnDefinitions="Auto,Auto,Auto,Auto"
176223
RowDefinitions="Auto,*,Auto">
177224

@@ -191,23 +238,50 @@
191238
</Setter>
192239
</Style>
193240

194-
<Style Selector="DataGridRowGroupHeader /template/ ToggleButton#ExpanderButton">
241+
<Style Selector="DataGridRowGroupHeader /template/ ToggleButton#PART_ExpanderButton">
242+
<Setter Property="Cursor" Value="Hand" />
243+
<Setter Property="Focusable" Value="False" />
244+
<Setter Property="CornerRadius" Value="16" />
245+
<Setter Property="Width" Value="24" />
246+
<Setter Property="Height" Value="24" />
247+
<Setter Property="Margin" Value="4,0,0,0" />
195248
<Setter Property="Template">
196-
<ControlTemplate>
197-
<Border Grid.Column="0" Width="20" Height="20" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
198-
<Path Fill="{TemplateBinding Foreground}"
199-
HorizontalAlignment="Center"
200-
VerticalAlignment="Center"
201-
Data="M 0 2 L 4 6 L 0 10 Z" />
202-
</Border>
203-
</ControlTemplate>
249+
<Setter.Value>
250+
<ControlTemplate>
251+
<Border Background="Transparent"
252+
CornerRadius="{TemplateBinding CornerRadius}"
253+
ClipToBounds="True">
254+
<ripple:RippleEffect Name="PART_Ripple"
255+
RippleFill="{TemplateBinding Foreground,
256+
Converter={StaticResource BrushRoundConverter}}">
257+
<Panel Name="PART_InnerPanel" Width="24" Height="24">
258+
<Path Data="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
259+
Name="ExpandPath"
260+
Fill="{TemplateBinding Foreground}"
261+
Stroke="{TemplateBinding Foreground}" />
262+
</Panel>
263+
</ripple:RippleEffect>
264+
</Border>
265+
</ControlTemplate>
266+
</Setter.Value>
204267
</Setter>
205-
</Style>
206268

207-
<Style Selector="DataGridRowGroupHeader /template/ ToggleButton#ExpanderButton:checked /template/ Path">
208-
<Setter Property="RenderTransform">
209-
<RotateTransform Angle="90" />
210-
</Setter>
269+
<Style Selector="^:not(.no-transitions) /template/ Panel#PART_InnerPanel">
270+
<Setter Property="Transitions">
271+
<Transitions>
272+
<TransformOperationsTransition Duration="0:0:0.25" Property="RenderTransform" Easing="CircularEaseOut" />
273+
</Transitions>
274+
</Setter>
275+
</Style>
276+
277+
<Style Selector="^ /template/ Panel#PART_InnerPanel">
278+
<Setter Property="RenderTransform" Value="rotate(0deg)" />
279+
</Style>
280+
281+
<!-- Rotate the arrow to 45 degrees when group expanded -->
282+
<Style Selector="^:checked /template/ Panel#PART_InnerPanel">
283+
<Setter Property="RenderTransform" Value="rotate(45deg)" />
284+
</Style>
211285
</Style>
212286

213287
<Style Selector="DataGrid">

0 commit comments

Comments
 (0)