Adapt the TreeView's expander for the DataGrid groups.

Author: marklam

Material.Avalonia.DataGrid/DataGrid.xaml

@@ -1,12 +1,59 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
         xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Controls.DataGrid">
   <!--TODO: Validation and Focus-->
 
   <Styles.Resources>
     <Thickness x:Key="DataGridTextColumnCellTextBlockMargin">0</Thickness>
   </Styles.Resources>
 
+  <Style Selector="ToggleButton#PART_ExpanderButton">
+    <Setter Property="Cursor" Value="Hand" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="CornerRadius" Value="16" />
+    <Setter Property="Width" Value="24" />
+    <Setter Property="Height" Value="24" />
+    <Setter Property="Margin" Value="4,0,0,0" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Border Background="Transparent"
+                  CornerRadius="{TemplateBinding CornerRadius}"
+                  ClipToBounds="True">
+            <ripple:RippleEffect Name="PART_Ripple"
+                                 RippleFill="{TemplateBinding Foreground,
+                                             Converter={StaticResource BrushRoundConverter}}">
+              <Panel Name="PART_InnerPanel" Width="24" Height="24">
+                <Path Data="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+                      Name="ExpandPath"
+                      Fill="{TemplateBinding Foreground}"
+                      Stroke="{TemplateBinding Foreground}" />
+              </Panel>
+            </ripple:RippleEffect>
+          </Border>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^:not(.no-transitions) /template/ Panel#PART_InnerPanel">
+      <Setter Property="Transitions">
+        <Transitions>
+          <TransformOperationsTransition Duration="0:0:0.25" Property="RenderTransform" Easing="CircularEaseOut" />
+        </Transitions>
+      </Setter>
+    </Style>
+
+    <Style Selector="^ /template/ Panel#PART_InnerPanel">
+      <Setter Property="RenderTransform" Value="rotate(0deg)" />
+    </Style>
+
+    <!-- Rotate the arrow to 45 degrees when group expanded -->
+    <Style Selector="^:checked /template/ Panel#PART_InnerPanel">
+      <Setter Property="RenderTransform" Value="rotate(45deg)" />
+    </Style>
+  </Style>
+
   <Style Selector="DataGridCell">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />