Styling .Net MAUI SfDataGrid

[Amit Saraf]

I've been using WPF SfDataGrid since long time and have created a control with few modifications 

 XAML Code for the same is as below

I want to implement the same in .New MAUI SfDataGrid Control.

Can you please help.

<syncfusion:SfDataGrid
             x:Class="GS.Controls.GSDataGrid"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:GS.Controls"
             xmlns:syncfusion="http://schemas.syncfusion.com/wpf">


    <syncfusion:SfDataGrid.Resources>
        <ResourceDictionary>


            <!-- Resource Dictionary has been added for the purpose of Style -->
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>


            <syncfusion:BoolToVisiblityConverter x:Key="VisiblityConverter" />


            <Style TargetType="{x:Type local:GSDataGrid}">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="#FFC8E3E3" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="HeaderRowHeight" Value="30" />
                <Setter Property="RowSelectionBrush" Value="#FFdff3f4" />
                <Setter Property="GroupRowSelectionBrush" Value="#FFdff3f4" />
                <Setter Property="CurrentCellBorderThickness" Value="2" />
                <Setter Property="CurrentCellBorderBrush" Value="#FF26A0DA" />
                <Setter Property="SelectionForegroundBrush" Value="#FF2A2A2A" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
                <Setter Property="ScrollViewer.PanningMode" Value="Both" />
                <Setter Property="ScrollViewer.PanningRatio" Value="1" />
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:GSDataGrid}">


                            <Grid SnapsToDevicePixels="True">


                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Busy">
                                            <Storyboard>
                                                <BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_BusyDecorator" Storyboard.TargetProperty="IsBusyIndicatorShowing">
                                                    <DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
                                                </BooleanAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Normal" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>


                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>


                                <Border Grid.Row="0" SnapsToDevicePixels="True" Visibility="{Binding Path=ShowGroupDropArea, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VisiblityConverter}}">
                                    <syncfusion:GroupDropArea x:Name="PART_GroupDropArea" SnapsToDevicePixels="True" />
                                </Border>


                                <Border Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                                    <ScrollViewer x:Name="PART_ScrollViewer" CanContentScroll="True" FlowDirection="{TemplateBinding FlowDirection}" IsTabStop="False"
                                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                              IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                              PanningMode="{TemplateBinding ScrollViewer.PanningMode}"
                                              PanningRatio="{TemplateBinding ScrollViewer.PanningRatio}"
                                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">


                                        <syncfusion:VisualContainer x:Name="PART_VisualContainer" Background="Transparent"/>
                                    </ScrollViewer>
                                </Border>


                                <syncfusion:BusyDecorator x:Name="PART_BusyDecorator" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />


                                <syncfusion:ToolBarAdv Grid.Row="2" x:Name="ToolBarRow" GripperVisibility="Hidden" EnableAddRemoveButton="False" Focusable="False" IsTabStop="False">
                                    <syncfusion:ToolBarAdv.Resources>
                                        <Style TargetType="{x:Type syncfusion:ButtonAdv}">
                                            <Setter Property="SizeMode" Value="Small"/>
                                            <Setter Property="BorderThickness" Value="0"/>
                                            <Setter Property="Background" Value="Transparent"/>
                                        </Style>
                                    </syncfusion:ToolBarAdv.Resources>
                                    <syncfusion:ToolBarAdv x:Name="EditDeleteTBR">
                                        <syncfusion:ButtonAdv x:Name="btnEdit" ToolTip="Edit Selected Voucher/Document" SmallIcon="pack:/Controls/Images/Edit.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnDelete" ToolTip="Delete Selected Voucher/Document" SmallIcon="pack:/Controls/Images/Delete.png"/>
                                    </syncfusion:ToolBarAdv>
                                    <syncfusion:ToolBarAdv>
                                        <syncfusion:ButtonAdv x:Name="btnFilter" ToolTip="Show/Hide Filters" SmallIcon="pack:/Controls/Images/Filter.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnGroup" ToolTip="Show/Hide Groups" SmallIcon="pack:/Controls/Images/Group.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnExpandGroup" ToolTip="Expand All Groups" SmallIcon="pack:/Controls/Images/Expand.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnCollapseGroup" ToolTip="Collapse All Groups" SmallIcon="pack:/Controls/Images/Collaps.png"/>
                                    </syncfusion:ToolBarAdv>
                                    <syncfusion:ToolBarAdv>
                                        <syncfusion:ButtonAdv x:Name="btnPrintList" ToolTip="Print List" SmallIcon="pack:/Controls/Images/Print.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnExport2XLS" ToolTip="Export to Excel" SmallIcon="pack:/Controls/Images/Excel.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnExport2PDF" ToolTip="Export to Pdf" SmallIcon="pack:/Controls/Images/PDF.png"/>
                                    </syncfusion:ToolBarAdv>
                                    <syncfusion:ToolBarAdv>
                                        <syncfusion:SfTextBoxExt x:Name="txtSearch" Watermark="Search" Width="200" Margin="2"/>
                                        <syncfusion:ButtonAdv x:Name="btnSearch" ToolTip="Search Text" SmallIcon="pack:/Controls/Images/Find.png"/>
                                        <syncfusion:ButtonAdv x:Name="btnClearSearch" ToolTip="Clear Search Result" SmallIcon="pack:/Controls/Images/Cancel.png"/>
                                    </syncfusion:ToolBarAdv>
                                </syncfusion:ToolBarAdv>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


            <Style TargetType="syncfusion:GridTableSummaryCell">
                <Setter Property="HorizontalContentAlignment" Value="Right"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>


            <Style TargetType="syncfusion:GridGroupSummaryCell">
                <Setter Property="HorizontalContentAlignment" Value="Right"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontStyle" Value="Italic"/>
            </Style>


            <Style TargetType="syncfusion:UnBoundRowControl">
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>


            <Style TargetType="syncfusion:GridRowHeaderCell">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="syncfusion:GridRowHeaderCell">
                            <Border x:Name="PART_RowHeaderCellBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
                                   Text="{Binding RowIndex, RelativeSource={RelativeSource TemplatedParent}}"/>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


        </ResourceDictionary>
    </syncfusion:SfDataGrid.Resources>


</syncfusion:SfDataGrid>

[Tamilarasan Paranthaman]

Hi Amit,

As of now, MAUI SfDataGrid does not have support for editing the control Template of the DataGrid. We have considered your request as a feature. We will implement this feature in any of our upcoming releases.

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then.  

Thank you for requesting this feature and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts.  

You can also communicate with us regarding the open features any time using our Feature Report page.   

Feedback link: 53132

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.  

Regards,

Tamilarasan

[Amit Saraf]

Thanks for considering my request.