Xamarin.Forms DataGrid is actually a great library to create good-looking and functional tables in your Xamarin pages. However, there might be a good reason for creating a table that includes button controls in it. Here’s how you can create a DataGrid with buttons in Xamarin.Forms.
Assuming you got the package downloaded form the NuGet Library, make sure you initialize the library by adding this to your App.xaml.cs inside the class constructor. So something like this:
public App()
{
InitializeComponent();Xamarin.Forms.DataGrid.DataGridComponent.Init();
FreshIOC.Container.Register<IDataService, MyDataService>();
var tablePage = FreshPageModelResolver.ResolvePageModel<MyTablePageModel>();
var container = new FreshNavigationContainer(tablePage);
MainPage = container;
}Also, please note that in this example I’m using MVVM pattern; specifically FreshMvvm which I consider a really convenient framework to work with.
Additional Libraries I use for this Project.
- Fody
Extensible tool for weaving .net assemblies.
- PropertyChanged.Fody
Add property notification to all classes that implement INotifyPropertyChanged.
Ok, enough. Let’s dive right in.
This is how my DataGrid XAML view looks like:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dataGrid="clr-namespace:Xamarin.Forms.DataGrid;assembly=Xamarin.Forms.DataGrid"
mc:Ignorable="d"
x:Class="RIB.XamarinExamples.Pages.MyTablePage"
Title="My Table">
<ContentPage.Content>
<Grid Margin="100,50">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<dataGrid:DataGrid Grid.Row="0"
ItemsSource="{Binding Customers}"
SelectionEnabled="False"
RowHeight="45" HeaderHeight="40"
BorderColor="White"
HeaderBordersVisible="False"
Margin="0,0,20,0"
x:Name="MyDataGrid">
<x:Arguments>
<ListViewCachingStrategy>RetainElement</ListViewCachingStrategy>
</x:Arguments>
<dataGrid:DataGrid.HeaderLabelStyle>
<Style TargetType="Label">
<Setter Property="FontSize" Value="25" />
<Setter Property="TextColor" Value="DarkBlue" />
<Setter Property="Padding" Value="5" />
</Style>
</dataGrid:DataGrid.HeaderLabelStyle>
<dataGrid:DataGrid.NoDataView>
<Label Text="No data to show" FontSize="18" />
</dataGrid:DataGrid.NoDataView>
<dataGrid:DataGrid.Columns>
<dataGrid:ColumnCollection>
<dataGrid:DataGridColumn Title="Name" PropertyName="Name" Width="1*" SortingEnabled="True">
<dataGrid:DataGridColumn.CellTemplate>
<DataTemplate >
<ContentView >
<Label Text="{Binding .}" FontSize="18" Padding="5" />
</ContentView>
</DataTemplate>
</dataGrid:DataGridColumn.CellTemplate>
</dataGrid:DataGridColumn>
<dataGrid:DataGridColumn Title="Id" PropertyName="Id" Width="1*" SortingEnabled="True" >
<dataGrid:DataGridColumn.CellTemplate>
<DataTemplate>
<ContentView>
<Label Text="{Binding .}" Margin="5,0" FontSize="18" Padding="5"/>
</ContentView>
</DataTemplate>
</dataGrid:DataGridColumn.CellTemplate>
</dataGrid:DataGridColumn>
<dataGrid:DataGridColumn Title="Created" PropertyName="DateCreated" Width="1*" SortingEnabled="True" >
<dataGrid:DataGridColumn.CellTemplate>
<DataTemplate>
<ContentView>
<Label Text="{Binding ., StringFormat='{0:dd/MM/yyyy}'}" Margin="5,0" FontSize="18" Padding="5" />
</ContentView>
</DataTemplate>
</dataGrid:DataGridColumn.CellTemplate>
</dataGrid:DataGridColumn>
<dataGrid:DataGridColumn Title="License" PropertyName="LicenseId" Width="1*" SortingEnabled="True" >
<dataGrid:DataGridColumn.CellTemplate>
<DataTemplate>
<ContentView>
<Label Text="{Binding .}" Margin="5,0" FontSize="18" Padding="5"/>
</ContentView>
</DataTemplate>
</dataGrid:DataGridColumn.CellTemplate>
</dataGrid:DataGridColumn>
<dataGrid:DataGridColumn Title="" PropertyName="Id" Width="1*" SortingEnabled="False" >
<dataGrid:DataGridColumn.CellTemplate >
<DataTemplate>
<ContentView>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Padding="4">
<Button Text="Delete"
CornerRadius="10"
FontSize="12"
Command="{Binding Source={x:Reference MyDataGrid}, Path=BindingContext.DeleteCmd}" CommandParameter="{Binding .}" />
</StackLayout>
</ContentView>
</DataTemplate>
</dataGrid:DataGridColumn.CellTemplate>
</dataGrid:DataGridColumn>
</dataGrid:ColumnCollection>
</dataGrid:DataGrid.Columns>
<dataGrid:DataGrid.RowsBackgroundColorPalette>
<dataGrid:PaletteCollection>
<Color>#F2F2F2</Color>
<Color>#FFFFFF</Color>
</dataGrid:PaletteCollection>
</dataGrid:DataGrid.RowsBackgroundColorPalette>
</dataGrid:DataGrid>
</Grid>
</ContentPage.Content>
</ContentPage>Make sure you add a name to the DataGrid component as on line 25. The Command property on line 89 will have to look like this:
Command="{Binding Source={x:Reference MyDataGrid}, Path=BindingContext.DeleteCmd}" CommandParameter="{Binding .}"Make sure DeleteCmd is a Command property defined in your PageModel (Line 41).
My PageModel (ViewModel):
using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;
using FreshMvvm;
using PropertyChanged;
using RIB.XamarinExamples.Models;
using RIB.XamarinExamples.Services;
using Xamarin.Forms;
namespace RIB.XamarinExamples.PageModels
{
[AddINotifyPropertyChangedInterface]
public class MyTablePageModel : FreshBasePageModel
{
private readonly IDataService _service;
public MyTablePageModel(IDataService s)
{
_service = s;
}
public override void Init(object initData)
{
base.Init(initData);
GetCustomers();
}
private async void GetCustomers()
{
try
{
var result = await _service.GetCustomers();
Customers = result?.Any() ?? false
? new ObservableCollection<Customer>(result)
: new ObservableCollection<Customer>();
}
catch (Exception e)
{
//Do something
}
}
public Command DeleteCmd => new Command(async (id) =>
{
await Task.Delay(100);
if (id != null)
{
var list = Customers.ToList();
var customer = list.First(c => c.Id.Equals(id));
list.Remove(customer);
Customers = new ObservableCollection<Customer>(list);
}
});
public ObservableCollection<Customer> Customers { get; set; }
}
}As a result, your DataGrid will include a button/control per row and it will do its thing. In this case, when you tap on DELETE the row will be removed from the data grid.
Code is available at my GitHub Repo.
Very interesting website and useful
Very interesting website and useful
Interesting!