Datagrid entry in Xamarin Forms

Question

Does anyone know is it possible to achieve an entry like the picture I have attached below? I would like to have a data grid to display data from database. I have tried using Xamarin.Forms.Datagrid but it does not allow rows to be added manually. My objective is to display the parameters in such a manner for easier viewing (similar to excel sheet format) but Xamarin has really limited controls...Just wondering if anyone know any other ways to achieve it?

This is my code for datagrid. I was only able to create Column with names but not the rows.

<dg:DataGrid HeaderHeight="50"
         BorderColor="#CCCCCC" HeaderBackground="#E0E6F8">
    <dg:DataGrid.Columns>
        <dg:DataGridColumn Title="Zone 1"/>
        <dg:DataGridColumn Title="Zone 2"/>
        <dg:DataGridColumn Title="Zone 3"/>
        <dg:DataGridColumn Title="Zone 4"/>
        <dg:DataGridColumn Title="Zone 5"/>
        <dg:DataGridColumn Title="Zone 6"/>
    </dg:DataGrid.Columns>
</dg:DataGrid>

Answer 1

You do not need to create the this kind of Entry.

Do you want to achieve the result like this sceenshot?

If so, you should add this layout in your xaml folder.

 <StackLayout>
        <!-- Place new controls here -->
        <dg:DataGrid ItemsSource="{Binding Teams}" SelectionEnabled="True"
               RowHeight="70" HeaderHeight="50" BorderColor="#CCCCCC" HeaderBackground="#E0E6F8">

            <dg:DataGrid.HeaderFontSize>
                <OnIdiom  x:TypeArguments="x:Double">
                    <OnIdiom.Tablet>15</OnIdiom.Tablet>
                    <OnIdiom.Phone>13</OnIdiom.Phone>
                </OnIdiom>
            </dg:DataGrid.HeaderFontSize>

            <dg:DataGrid.Columns>


                <dg:DataGridColumn Title="Team" PropertyName="Name" Width="2*"/>
                <dg:DataGridColumn Title="Win" PropertyName="Win" Width="0.95*"/>
                <dg:DataGridColumn Title="Loose" PropertyName="Loose"  Width="1*"/>
                <dg:DataGridColumn Title="Home" PropertyName="Home"/>
                <dg:DataGridColumn Title="Percentage" PropertyName="Percentage" StringFormat="{}{0:0.00}" />

            </dg:DataGrid.Columns>


        </dg:DataGrid>
    </StackLayout>

If you do not know how to add rows in this control. For example,

<dg:DataGridColumn Title="Team" PropertyName="Name" Width="2*"/>

above line have three attribute, Title, PropertyName , Width.

Title: mean first line Team, win, loose, home, percentage titles.

Width: mean width of this Column

If you want to add data blew the Title ,you should use PropertyName attribute.

In the layout background, you add binding context.

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MyViewModel();
        }
    }

Here is my MyViewModel.cs

    public class MyViewModel
    {
        public ObservableCollection<Team> Teams { get; set; }
        public MyViewModel()
        {
            Teams = new ObservableCollection<Team>();

            Teams.Add(new Team() {  Home = "lost1", Win = "31", Loose="1", Name="cava", Percentage="91" }) ;
            Teams.Add(new Team() {  Home = "lost2", Win = "31", Loose = "2", Name = "cava", Percentage = "91" });
            Teams.Add(new Team() { Home = "lost3", Win = "31", Loose = "3", Name = "cava", Percentage = "91" });
            Teams.Add(new Team() {  Home = "lost4", Win = "31", Loose = "4", Name = "cava", Percentage = "91 "});
            Teams.Add(new Team() {  Home = "lost5", Win = "31", Loose = "5", Name = "cava", Percentage = "91" });
            Teams.Add(new Team() {  Home = "lost6", Win = "31", Loose = "6", Name = "cava", Percentage = "91",  });
        }
    }

Here is my Team code.

  public class Team
    {

        public string Name { get; set; }
        public string Win { get; set; }
        public string Loose { get; set; }
        public string Home { get; set; }
        public string Percentage { get; set; }



    }

Here is my demo.

https://github.com/851265601/Xamarin.Android_ListviewSelect/blob/master/DataGridDemo1.zip