DataGrid
DataGrid displays sets of data across rows and columns.
Getting Started
DataGrid is included in the UraniumUI.Material.Controls
namespace.
You can use the material namespace of UraniumUI in XAML files like the following:
xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material"
DataGrid can't be used standalone without csharp code. You need to bind some data to ItemsSource
property.
Then use it in XAML like this:
Light - Desktop | Dark - Android | Light - iOS |
---|---|---|
![]() |
![]() |
![]() |
Customizations
CellItemTemplate
You can customize the cell item template by using CellItemTemplate
property. It is a DataTemplate
that is used to render each cell item. You can use DataGridCellItem
as the root element of the template. It has a DataContext
of the cell item. You can use Binding
to bind the properties of the cell item.
Columns
Auto Columns
Columns are automatically detected by DataGrid when UseAutoColumns
property is set as True
. It uses reflection to get properties of the data source. You can use DataAnnosations attributes to define Title of column in auto mode. Adding [DisplayName]
attribute to the property will define the title of the column.
Custom Columns
You can also define columns manually by adding DataGridColumn
to Columns
property of DataGrid.
UseAutoColumns
must be false. You can remove it from XAML. Its default value is false
.
An ItemTemplate can be defined for each column via using CellItemTemplate
property of DataGridColumn
class.
Columns are not limited to the properties of the data source. You can also use custom columns without any property mapping. You can use CellItemTemplate
to define the content of the column. That column will be rendered with your custom template. You can use any property of row for current binding.
Column Width
Column width can be defined by using Width
property of DataGridColumn
class. It can be set as Auto
, Star
or a custom value. Its type is GridLength
and it'll be passed as parameter to ColumnDefinition. Auto
is the default value. It will be calculated automatically. Star
will take the remaining space of the grid. You can also set a custom value. It can be a double
or a GridLength
.
TitleView
You can define a custom view for the header of the column by using TitleView
property of DataGridColumn
class. It is a View
that will be rendered as the header of the column. You can use Binding
to bind the properties of the column.
Light | Dark |
---|---|
![]() |
![]() |
TitleTemplate
You can define a custom template for the title of the DataGrid by using TitleTemplate
property. You can use Value
property for binding title name of the column.
Light | Dark |
---|---|
![]() |
![]() |
EmptyView
You can define a view to be shown when the data source is empty. It can be defined by using EmptyView
property of DataGrid.
Selection
DataGrid supports multiple row selection. You can add DataGridSelectionColumn
column to enable selection. Selected Items can be accessed via SelectedItems
property of DataGrid. You can bind it to a property of your ViewModel.
Dark - Desktop | Light - Mobile |
---|---|
![]() |
![]() |
SelectedItems can be handled with ObservableCollection
over IList
interface. So you can use INotifyCollectionChanged
to handle changes in selection. The bound list will be automatically updated. You don't need to register to CollectionChanged
event of SelectedItems
property.
Tips
You can place an activity indicator inside the DataGrid to show loading state if you make a network call to get data.
DataGridColumn
DataGridColumn
is a class that is used to define a column of DataGrid. It has the following properties:
Title
: It's used in header of the column.CellItemTemplate
: It's used to define the template of the cell item of the column.Binding
: It's used to define the binding of the cell item of the column.