Skip to content

Commit 481b1e6

Browse files
ashok-kuvarajaashok-kuvaraja
authored
Merge pull request #1 from SyncfusionExamples/svgImage
How to add an SVG image column in .NET MAUI DataGrid (SfDataGrid)
2 parents 660f8b8 + d70631c commit 481b1e6

Some content is hidden

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

43 files changed

+9546
-2
lines changed

‎README.md‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,46 @@
1-
# How-to-add-an-SVG-image-column-in-.NET-MAUI-DataGrid-SfDataGrid
2-
This demo shows how to add an SVG image column in .NET MAUI DataGrid (SfDataGrid)
1+
# How to add an SVG image column in .NET MAUI DataGrid (SfDataGrid) ?
2+
In this article, we will show you how to add an SVG image column in [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid).
3+
4+
## Xaml
5+
The code below demonstrates how to set up a .NET MAUI ContentPage with a SfDataGrid to display employee information, linking to an EmployeeViewModel and configuring columns for ID, Name, Title, and an SVG image.
6+
7+
```
8+
<ContentPage.BindingContext>
9+
<local:EmployeeViewModel x:Name="viewModel" />
10+
</ContentPage.BindingContext>
11+
12+
<syncfusion:SfDataGrid x:Name="sfGrid"
13+
GridLinesVisibility="Both"
14+
HeaderGridLinesVisibility="Both"
15+
ColumnWidthMode="Auto"
16+
AutoGenerateColumnsMode="None"
17+
ItemsSource="{Binding Employees}">
18+
19+
<syncfusion:SfDataGrid.Columns>
20+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID"
21+
Format="#"
22+
HeaderText="Employee ID" />
23+
<syncfusion:DataGridTextColumn MappingName="Name"
24+
HeaderText="Employee Name" />
25+
<syncfusion:DataGridTextColumn MappingName="Title"
26+
HeaderText="Designation" />
27+
<syncfusion:DataGridImageColumn MappingName="ImagePath"
28+
HeaderText="Svg Image" />
29+
</syncfusion:SfDataGrid.Columns>
30+
</syncfusion:SfDataGrid>
31+
```
32+
33+
<img src="https://support.syncfusion.com/kb/agent/attachment/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjQyMjcxIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.f5tYJnWmc9I-WrYUbyF5St1HYb4RrwvZEi3BGyyvEIs" width=800/>
34+
35+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-add-an-SVG-image-column-in-.NET-MAUI-DataGrid-SfDataGrid)
36+
37+
Take a moment to explore this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more information about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples. 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).
38+
39+
##### Conclusion
40+
41+
I hope you enjoyed learning about how to add an SVG image column in SfDataGrid.
42+
43+
You can refer to our [.NET MAUI DataGrid’s feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to learn about its other groundbreaking feature representations. You can also explore our [.NET MAUI DataGrid Documentation](https://help.syncfusion.com/maui/datagrid/getting-started) to understand how to present and manipulate data.
44+
For current customers, you can check out our .NET MAUI components on the [License and Downloads](https://www.syncfusion.com/sales/teamlicense) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads/maui) to explore our .NET MAUI DataGrid and other .NET MAUI components.
45+
46+
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/create) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid), or the feedback portal. We are always happy to assist you!

‎SfDataGridSample/SfDataGridSample.sln‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35506.116 d17.12
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SfDataGridSample", "SfDataGridSample\SfDataGridSample.csproj", "{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{EEB0310E-49AF-4663-87C2-E585EEFE9E5E}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
EndGlobal

‎SfDataGridSample/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/SfDataGridSample/App.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
protected override Window CreateWindow(IActivationState? activationState)
11+
{
12+
return new Window(new AppShell());
13+
}
14+
}
15+
}

‎SfDataGridSample/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="Flyout"
8+
Title="SfDataGridSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎SfDataGridSample/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/SfDataGridSample/MainPage.xaml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
<syncfusion:SfDataGrid x:Name="sfGrid"
13+
GridLinesVisibility="Both"
14+
HeaderGridLinesVisibility="Both"
15+
ColumnWidthMode="Auto"
16+
AutoGenerateColumnsMode="None"
17+
ItemsSource="{Binding Employees}">
18+
19+
<syncfusion:SfDataGrid.Columns>
20+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID"
21+
Format="#"
22+
HeaderText="Employee ID" />
23+
<syncfusion:DataGridTextColumn MappingName="Name"
24+
HeaderText="Employee Name" />
25+
<syncfusion:DataGridTextColumn MappingName="Title"
26+
HeaderText="Designation" />
27+
<syncfusion:DataGridImageColumn MappingName="ImagePath"
28+
HeaderText="Svg Image" />
29+
</syncfusion:SfDataGrid.Columns>
30+
</syncfusion:SfDataGrid>
31+
</ContentPage>

‎SfDataGridSample/SfDataGridSample/MainPage.xaml.cs‎

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

‎SfDataGridSample/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.Hosting;
3+
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/SfDataGridSample/Model/Employee.cs‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
using System.ComponentModel;
2+
3+
namespace SfDataGridSample
4+
{
5+
public class Employee : INotifyPropertyChanged
6+
{
7+
private bool _isSelected;
8+
private int? _employeeID;
9+
private string? _name;
10+
private long _iDNumber;
11+
private int _contactID;
12+
private string? _loginID;
13+
private int _managerID;
14+
private string? _title;
15+
private DateTime _birthDate;
16+
private string? _maritalStatus;
17+
private string? _gender;
18+
private DateTime _hireDate;
19+
private int _sickLeaveHours;
20+
private double _salary;
21+
private bool _employeeStatus;
22+
private int _rating;
23+
private bool _isButtonVisible;
24+
private string _imagePath;
25+
26+
public string ImagePath {
27+
get { return _imagePath; }
28+
set { _imagePath = value; OnPropertyChanged(nameof(ImagePath)); }
29+
}
30+
public bool IsSelected
31+
{
32+
get { return _isSelected; }
33+
set { _isSelected = value; OnPropertyChanged(nameof(IsSelected)); }
34+
}
35+
36+
public int? EmployeeID
37+
{
38+
get { return _employeeID; }
39+
set { _employeeID = value; OnPropertyChanged(nameof(EmployeeID)); }
40+
}
41+
public string? Name
42+
{
43+
get { return _name; }
44+
set { _name = value; OnPropertyChanged(nameof(Name)); }
45+
}
46+
public long IDNumber
47+
{
48+
get { return _iDNumber; }
49+
set { _iDNumber = value; OnPropertyChanged(nameof(IDNumber)); }
50+
}
51+
public string? Title
52+
{
53+
get { return _title; }
54+
set { _title = value; OnPropertyChanged(nameof(Title)); }
55+
}
56+
public int ContactID
57+
{
58+
get { return _contactID; }
59+
set { _contactID = value; OnPropertyChanged(nameof(ContactID)); }
60+
}
61+
public DateTime BirthDate
62+
{
63+
get { return _birthDate; }
64+
set { _birthDate = value; OnPropertyChanged(nameof(BirthDate)); }
65+
}
66+
public string? MaritalStatus
67+
{
68+
get { return _maritalStatus; }
69+
set { _maritalStatus = value; OnPropertyChanged(nameof(MaritalStatus)); }
70+
}
71+
public string? Gender
72+
{
73+
get { return _gender; }
74+
set { _gender = value; OnPropertyChanged(nameof(Gender)); }
75+
}
76+
public DateTime HireDate
77+
{
78+
get { return _hireDate; }
79+
set { _hireDate = value; OnPropertyChanged(nameof(HireDate)); }
80+
}
81+
public int SickLeaveHours
82+
{
83+
get { return _sickLeaveHours; }
84+
set { _sickLeaveHours = value; OnPropertyChanged(nameof(SickLeaveHours)); }
85+
}
86+
public double Salary
87+
{
88+
get { return _salary; }
89+
set { _salary = value; OnPropertyChanged(nameof(Salary)); }
90+
}
91+
public string? LoginID
92+
{
93+
get { return _loginID; }
94+
set { _loginID = value; OnPropertyChanged(nameof(LoginID)); }
95+
}
96+
public int ManagerID
97+
{
98+
get { return _managerID; }
99+
set { _managerID = value; OnPropertyChanged(nameof(ManagerID)); }
100+
}
101+
public bool EmployeeStatus
102+
{
103+
get { return _employeeStatus; }
104+
set { _employeeStatus = value; OnPropertyChanged(nameof(EmployeeStatus)); }
105+
}
106+
public int Rating
107+
{
108+
get { return _rating; }
109+
set { _rating = value; OnPropertyChanged(nameof(Rating)); }
110+
}
111+
112+
public bool IsButtonVisible
113+
{
114+
get { return _isButtonVisible; }
115+
set { _isButtonVisible = value; OnPropertyChanged(nameof(IsButtonVisible)); }
116+
}
117+
118+
public event PropertyChangedEventHandler? PropertyChanged;
119+
120+
protected void OnPropertyChanged(string propertyName)
121+
{
122+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
123+
}
124+
}
125+
}

0 commit comments

Comments
 (0)