Skip to content

Commit 381854f

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/886838
MAUI - 886838 - How to hightlight row when hovered using VisualStateManager in MAUI DataGrid?
2 parents 9a4eec1 + 99936e1 commit 381854f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1552
-2
lines changed

‎README.md‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,42 @@
1-
# How-to-hightlight-row-when-hovered-using-VisualStateManager-in-MAUI-DataGrid
2-
How to hightlight row when hovered using VisualStateManager in MAUI DataGrid?
1+
# How to hightlight row when hovered using VisualStateManager in MAUI DataGrid?
2+
3+
We can utilize the [VisualStateManager](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states?view=net-maui-8.0) to highlight a row when it is hovered over in the [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid).
4+
5+
## XAML
6+
We can set the visual state in the resources section of the content page. Below is the code for setting the `VisualStateManager` within a style that targets the `DataGridRow`.
7+
```XML
8+
<ContentPage.Resources>
9+
<Style TargetType="syncfusion:DataGridRow">
10+
<Setter Property="VisualStateManager.VisualStateGroups">
11+
<VisualStateGroupList>
12+
<VisualStateGroup>
13+
<VisualState x:Name="Normal">
14+
<VisualState.Setters>
15+
<Setter Property="Background" Value="Transparent" />
16+
</VisualState.Setters>
17+
</VisualState>
18+
<VisualState x:Name="PointerOver">
19+
<VisualState.Setters>
20+
<Setter Property="Background" Value= "#ccd5ae" />
21+
</VisualState.Setters>
22+
</VisualState>
23+
</VisualStateGroup>
24+
</VisualStateGroupList>
25+
</Setter>
26+
</Style>
27+
</ContentPage.Resources>
28+
```
29+
30+
![DataGrid row highlight with visualstatemanager](SfDataGrid_RowHighLight.gif)
31+
32+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-hightlight-row-when-hovered-using-VisualStateManager-in-MAUI-DataGrid)
33+
34+
Take a moment to pursue this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples.
35+
Please refer to this [link](https://www.syncfusion.com/maui-controls/maui-datagrid) to learn about the essential features of Syncfusion .NET MAUI DataGrid(SfDataGrid).
36+
37+
### Conclusion
38+
I hope you enjoyed learning about how to hightlight row when hovered using VisualStateManager in MAUI DataGrid.
39+
40+
You can refer to our [.NET MAUI DataGrid's feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
41+
For current customers, you can check out our .NET MAUI components from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI DataGrid and other .NET MAUI components.
42+
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/account/login?ReturnUrl=%2Faccount%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dc54e52f3eb3cde0c3f20474f1bc179ed%26redirect_uri%3Dhttps%253A%252F%252Fsupport.syncfusion.com%252Fagent%252Flogincallback%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520agent.api%2520integration.api%2520offline_access%2520kb.api%26state%3D8db41f98953a4d9ba40407b150ad4cf2%26code_challenge%3DvwHoT64z2h21eP_A9g7JWtr3vp3iPrvSjfh5hN5C7IE%26code_challenge_method%3DS256%26response_mode%3Dquery) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid). We are always happy to assist you!

‎SfDataGridSample/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:SfDataGridSample"
5+
x:Class="SfDataGridSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎SfDataGridSample/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎SfDataGridSample/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="SfDataGridSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:SfDataGridSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="SfDataGridSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎SfDataGridSample/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎SfDataGridSample/MainPage.xaml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
5+
xmlns:local="clr-namespace:SfDataGridSample"
6+
x:Class="SfDataGridSample.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<local:EmployeeViewModel x:Name="viewModel"/>
10+
</ContentPage.BindingContext>
11+
12+
<ContentPage.Resources>
13+
<Style TargetType="syncfusion:DataGridRow">
14+
<Setter Property="VisualStateManager.VisualStateGroups">
15+
<VisualStateGroupList>
16+
<VisualStateGroup>
17+
<VisualState x:Name="Normal">
18+
<VisualState.Setters>
19+
<Setter Property="Background" Value="Transparent" />
20+
</VisualState.Setters>
21+
</VisualState>
22+
<VisualState x:Name="PointerOver">
23+
<VisualState.Setters>
24+
<Setter Property="Background" Value= "#ccd5ae" />
25+
</VisualState.Setters>
26+
</VisualState>
27+
</VisualStateGroup>
28+
</VisualStateGroupList>
29+
</Setter>
30+
</Style>
31+
</ContentPage.Resources>
32+
33+
<syncfusion:SfDataGrid x:Name="sfGrid" ColumnWidthMode="Auto"
34+
GridLinesVisibility="Both"
35+
HeaderGridLinesVisibility="Both"
36+
ItemsSource="{Binding Employees}">
37+
<syncfusion:SfDataGrid.Columns>
38+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID" HeaderText="Employee ID" Format="D"/>
39+
<syncfusion:DataGridTextColumn MappingName="Name" />
40+
<syncfusion:DataGridTextColumn MappingName="Title" />
41+
</syncfusion:SfDataGrid.Columns>
42+
</syncfusion:SfDataGrid>
43+
44+
45+
46+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
6+
public MainPage()
7+
{
8+
InitializeComponent();
9+
}
10+
11+
}
12+
13+
}

‎SfDataGridSample/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core;
3+
using Syncfusion.Maui.Core.Hosting;
4+
namespace SfDataGridSample
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎SfDataGridSample/Model/Employee.cs‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
using System.ComponentModel;
2+
3+
namespace SfDataGridSample
4+
{
5+
public class Employee : INotifyPropertyChanged
6+
{
7+
private int? _employeeID;
8+
private string? _name;
9+
private long _iDNumber;
10+
private int _contactID;
11+
private string? _loginID;
12+
private int _managerID;
13+
private string? _title;
14+
private DateTime _birthDate;
15+
private string? _maritalStatus;
16+
private string? _gender;
17+
private DateTime _hireDate;
18+
private int _sickLeaveHours;
19+
private double _salary;
20+
private bool _employeeStatus;
21+
private int _rating;
22+
23+
public int? EmployeeID
24+
{
25+
get { return _employeeID; }
26+
set
27+
{
28+
_employeeID = value;
29+
OnPropertyChanged(nameof(EmployeeID));
30+
}
31+
}
32+
public string? Name
33+
{
34+
get { return _name; }
35+
set
36+
{
37+
_name = value;
38+
OnPropertyChanged(nameof(Name));
39+
}
40+
}
41+
public long IDNumber
42+
{
43+
get { return _iDNumber; }
44+
set
45+
{
46+
_iDNumber = value;
47+
OnPropertyChanged(nameof(IDNumber));
48+
}
49+
}
50+
public string? Title
51+
{
52+
get { return _title; }
53+
set
54+
{
55+
_title = value;
56+
OnPropertyChanged(nameof(Title));
57+
}
58+
}
59+
public int ContactID
60+
{
61+
get { return _contactID; }
62+
set
63+
{
64+
_contactID = value;
65+
OnPropertyChanged(nameof(ContactID));
66+
}
67+
}
68+
public DateTime BirthDate
69+
{
70+
get { return _birthDate; }
71+
set
72+
{
73+
_birthDate = value;
74+
OnPropertyChanged(nameof(BirthDate));
75+
}
76+
}
77+
public string? MaritalStatus
78+
{
79+
get { return _maritalStatus; }
80+
set
81+
{
82+
_maritalStatus = value;
83+
OnPropertyChanged(nameof(MaritalStatus));
84+
}
85+
}
86+
public string? Gender
87+
{
88+
get { return _gender; }
89+
set
90+
{
91+
_gender = value;
92+
OnPropertyChanged(nameof(Gender));
93+
}
94+
}
95+
public DateTime HireDate
96+
{
97+
get { return _hireDate; }
98+
set
99+
{
100+
_hireDate = value;
101+
OnPropertyChanged(nameof(HireDate));
102+
}
103+
}
104+
public int SickLeaveHours
105+
{
106+
get { return _sickLeaveHours; }
107+
set
108+
{
109+
_sickLeaveHours = value;
110+
OnPropertyChanged(nameof(SickLeaveHours));
111+
}
112+
}
113+
public double Salary
114+
{
115+
get { return _salary; }
116+
set
117+
{
118+
_salary = value;
119+
OnPropertyChanged(nameof(Salary));
120+
}
121+
}
122+
public string? LoginID
123+
{
124+
get { return _loginID; }
125+
set
126+
{
127+
_loginID = value;
128+
OnPropertyChanged(nameof(LoginID));
129+
}
130+
}
131+
public int ManagerID
132+
{
133+
get { return _managerID; }
134+
set
135+
{
136+
_managerID = value;
137+
OnPropertyChanged(nameof(ManagerID));
138+
}
139+
}
140+
public bool EmployeeStatus
141+
{
142+
get { return _employeeStatus; }
143+
set
144+
{
145+
_employeeStatus = value;
146+
OnPropertyChanged(nameof(EmployeeStatus));
147+
}
148+
}
149+
public int Rating
150+
{
151+
get { return _rating; }
152+
set
153+
{
154+
_rating = value;
155+
OnPropertyChanged(nameof(Rating));
156+
}
157+
}
158+
159+
public event PropertyChangedEventHandler? PropertyChanged;
160+
161+
public void OnPropertyChanged(string name)
162+
{
163+
if (this.PropertyChanged != null)
164+
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
165+
}
166+
}
167+
}

‎SfDataGridSample/Platforms/Android/AndroidManifest.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

0 commit comments

Comments
 (0)