How can i create N grid row ? In Xamarin/C#

Question

I have a project. I have a table. ( Made from grid ) And i have a entry/Textbox. I need make like customer will write number to entry ( Lets call that number "n" ). Then i need add n row inside of my table made from grid. How can i do that ?

Its my codes for make grid table.

gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Absolute)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Star)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Absolute)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Star)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Absolute)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Star)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Absolute)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Star)
        });
        gr.RowDefinitions.Add(new RowDefinition
        {
            Height = new GridLength(1, GridUnitType.Absolute)
        });

       
        gr.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Absolute)
        });
        gr.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Star)
        });
        gr.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Absolute)
        });
        gr.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Star)
        });
        gr.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Absolute)
        });
      

        var backgroundbox = new BoxView
        {
            Color = System.Drawing.Color.FromArgb(-32513)
        };
        gr.Children.Add(backgroundbox, 0, 1);
        Grid.SetColumnSpan(backgroundbox, 5);

        var ustyatay = new BoxView { Color = System.Drawing.Color.Gray };
        gr.Children.Add(ustyatay, 0, 0);
        Grid.SetColumnSpan(ustyatay, 5);

       var yatay2 = new BoxView { Color = System.Drawing.Color.Gray };
        gr.Children.Add(yatay2, 0, 2);
        Grid.SetColumnSpan(yatay2, 5);

        var yatay3 = new BoxView { Color = Xamarin.Forms.Color.Gray };
        gr.Children.Add(yatay3, 0, 4);
        Grid.SetColumnSpan(yatay3, 5);


        var yatay4 = new BoxView { Color = Xamarin.Forms.Color.Gray };
        gr.Children.Add(yatay4, 0, 6);
        Grid.SetColumnSpan(yatay4, 5);


        var soldik = new BoxView { Color = System.Drawing.Color.Gray };
        gr.Children.Add(soldik, 0, 0);
        Grid.SetRowSpan(soldik, 7); 

        var ortadik = new BoxView { Color = Xamarin.Forms.Color.Gray };
        gr.Children.Add(ortadik, 2, 0);
        Grid.SetRowSpan(ortadik, 7);

        var sagdik = new BoxView { Color = System.Drawing.Color.Gray };
        gr.Children.Add(sagdik, 4, 0);
        Grid.SetRowSpan(sagdik, 7);

        gr.Children.Add(new Label
        {
            Text = "Customer Name",
            FontAttributes = FontAttributes.Bold,
            TextColor = System.Drawing.Color.Yellow,
            FontSize = 16,
            Padding=new Thickness(10,10)
        }, 1, 1); ;

        gr.Children.Add(new Label
        {
            Text = "T.Type Name",
            FontAttributes = FontAttributes.Bold,
            TextColor= Xamarin.Forms.Color.Yellow,
            FontSize=16,
            Padding = new Thickness(10, 10)

        }, 3, 1);

I made lines as grid column,row too. I think i made it wrong. When i add n row i need change rowspan too. Idk how can i make that project. Can you guys help me please ? I need learn : How can i add rows with entry , how can i add boxview and rowspan for new row (For make line) ? Thanks for help guys!

That photo for what should i do with my hand drawing : https://prnt.sc/10jxdhn

Answer 1

I can slove the problem by using Data binding. First, edit your .xaml file like this:

            <Entry Text="{Binding N}"></Entry>
            <Button Text="Create" Command ="{Binding CreateCommand}"></Button>
            <ListView ItemsSource="{Binding Rows}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding}"></Label>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Next create a ViewModel, I call it Page1ViewModel.cs. In .xaml.cs file, add the binding context to Page1ViewModel in the constructor

            BindingContext = new Page1ViewModel();

In Page1ViewModel.cs:

    class Page1ViewModel : INotifyPropertyChanged
    {
        private int n;
        private List<string> rows;
        public List<string> Rows
        {
            get => rows;
            set
            {
                rows = value;
                OnPropertyChanged();
            }
        }
        public int N
        {
            get => n;
            set
            {
                n = value;
                OnPropertyChanged();
            }
        }

        public Command CreateCommand { get; }

        public Page1ViewModel()
        {
            Rows = new List<string>();
            CreateCommand = new Command(Create);
        }

        private void Create()
        {
            List <string> tmp = new List<string>();
            for (int i = 0; i < n; i++)
            {
                tmp.Add("Row" + i);
            }
            Rows = tmp;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

Good luck!