如何創建 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
    }

祝你好運！