We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply the row background color when mouse hover on SfDataGrid in UWP

Platform: Xamarin.Forms |
Control: SfDataGrid |
Published Date: March 18, 2020 |
Last Revised Date: March 18, 2020

By default, the SfDataGrid does not have a support to apply the row background color when hover on the row in UWP platform. But we can achieve this by hosting the SfDataGrid into the custom StackLayout and customize the StackLayout renderer.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataGridDemo"
             xmlns:data="clr-namespace:Syncfusion.Data;assembly=Syncfusion.Data.Portable"
             xmlns:sfgrid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
             xmlns:sfPager="clr-namespace:Syncfusion.SfDataGrid.XForms.DataPager;assembly=Syncfusion.SfDataGrid.XForms"
             x:Class="DataGridDemo.MainPage">
    <ContentPage.Content>
        <local:CustomStackLayout Orientation="Vertical">
            <sfgrid:SfDataGrid x:Name="sfgrid" AllowResizingColumn="True" AllowSwiping="True">
 
            </sfgrid:SfDataGrid>
        </local:CustomStackLayout>
 
    </ContentPage.Content>
</ContentPage>


public class CustomStackLayout : StackLayout
    {
        public CustomStackLayout()
        {
 
        }
 
        protected override void LayoutChildren(double x, double y, double width, double height)
        {
            base.LayoutChildren(x, y, width, height);
        }
    }


//UWP Renderer
public class CustomStackLayoutRenderer : VisualElementRenderer<CustomStackLayout, Control>
    {
 
        int previousIndex;
 
        DataRowBase rowdata;
 
        VirtualizingCellsControl wholeRowElement;
 
        SfDataGrid grid;
 
        Xamarin.Forms.Point point;
        public CustomStackLayoutRenderer()
        {
            this.PointerMoved += CustomStackLayoutRenderer_PointerMoved;
            this.PointerReleased += CustomStackLayoutRenderer_PointerReleased;
        }
 
        private void CustomStackLayoutRenderer_PointerReleased(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            var pointerPoint = e.GetCurrentPoint(this);
            point.Y = pointerPoint.Position.Y;
            point.X = pointerPoint.Position.X;
            var rowColumnIndex = SfDataGridHelpers.PointToCellRowColumnIndex(grid, point);
            var model = (GridModel)grid.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("GridModel")).GetValue(grid);
            rowdata = SfDataGridHelpers.GetRowGenerator(grid).Items.FirstOrDefault(x => x.RowIndex == rowColumnIndex.RowIndex);
            if (rowdata != null)
            {
                wholeRowElement = (VirtualizingCellsControl)rowdata.GetType().GetRuntimeFields().FirstOrDefault(x => x.Name.Equals("WholeRowElement")).GetValue(rowdata);
                wholeRowElement.BackgroundColor = Xamarin.Forms.Color.White;
            }
        }
 
        private void CustomStackLayoutRenderer_PointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            var pointerPoint = e.GetCurrentPoint(this);
            point.Y = pointerPoint.Position.Y;
            point.X = pointerPoint.Position.X;
            var rowColumnIndex = SfDataGridHelpers.PointToCellRowColumnIndex(grid, point);
            var model = (GridModel)grid.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("GridModel")).GetValue(grid);
            if (previousIndex == rowColumnIndex.RowIndex)
            {
 
                rowdata = SfDataGridHelpers.GetRowGenerator(grid).Items.FirstOrDefault(x => x.RowIndex == rowColumnIndex.RowIndex);
                if (rowdata != null)
                {
                    wholeRowElement = (VirtualizingCellsControl)rowdata.GetType().GetRuntimeFields().FirstOrDefault(x => x.Name.Equals("WholeRowElement")).GetValue(rowdata);
                    wholeRowElement.BackgroundColor = Xamarin.Forms.Color.Red;
                }
            }
            else
            {
                rowdata = SfDataGridHelpers.GetRowGenerator(grid).Items.FirstOrDefault(x => x.RowIndex == previousIndex);
                if (rowdata != null)
                {
                    wholeRowElement = (VirtualizingCellsControl)rowdata.GetType().GetRuntimeFields().FirstOrDefault(x => x.Name.Equals("WholeRowElement")).GetValue(rowdata);
                    wholeRowElement.BackgroundColor = Xamarin.Forms.Color.White;
                }
            }
            previousIndex = rowColumnIndex.RowIndex;
 
        }
 
        protected override void OnElementChanged(ElementChangedEventArgs<CustomStackLayout> e)
        {
            base.OnElementChanged(e);
            grid = this.Element.Children[0] as SfDataGrid;
            grid.GridTapped += Grid_GridTapped;
            point = new Xamarin.Forms.Point();
 
        }
 
        private void Grid_GridTapped(object sender, GridTappedEventArgs e)
        {
            wholeRowElement = (VirtualizingCellsControl)rowdata.GetType().GetRuntimeFields().FirstOrDefault(x => x.Name.Equals("WholeRowElement")).GetValue(rowdata);
            wholeRowElement.BackgroundColor = Xamarin.Forms.Color.Blue;
        }
    }


SfDataGrid UWP

 

View Sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon