我如何创建 N 网格行？在 Xamarin/C#

Question

我有一个项目。我有一张桌子。 （由网格制成）而且我有一个条目/文本框。我需要让客户将数字写入条目（让我们称该数字为“n”）。然后我需要在由网格制成的表格中添加 n 行。我该怎么做？

这是我制作网格表的代码。

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);

我将线条作为网格列，行也是。我想我做错了。当我添加 n 行时，我也需要更改行跨度。我怎么能做那个项目。你们能帮帮我吗？我需要学习：如何添加带有条目的行，如何为新行添加 boxview 和 rowspan（对于 make 行）？谢谢大家的帮助！

那张照片我应该用我的手绘图做什么：https://prnt.sc/10jxdhn

Answer 1

我可以通过使用数据绑定来解决这个问题。 首先，像这样编辑您的 .xaml 文件：

            <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>

接下来创建一个 ViewModel，我称之为 Page1ViewModel.cs。 在 .xaml.cs 文件中，在构造函数中将绑定上下文添加到 Page1ViewModel

            BindingContext = new Page1ViewModel();

在 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
    }

祝你好运！