时间戳

首页 > 解决方案 > 网格列占据整个屏幕

c# - 网格列占据整个屏幕

问题描述

我正在用 Xamarin 表单做一个小项目，我希望网格列中的元素相互隔开，以便它们占据整个屏幕。我尝试弄乱垂直布局选项，但它不起作用（迄今为止最好的方法是使用填充/填充和扩展，但它们只是将地狱从第三行拉伸出来，以填补空白）。如果这很重要，我正在使用 VStudio 2019。

另外，如果你能解释你做了什么而不是简单地编写一个有效的代码，我将不胜感激。

public MainPage()
        {
            this.Padding = new Thickness(20);
            var deviceWidht = DeviceDisplay.MainDisplayInfo.Width;
            double buttonWidthandHeight = deviceWidht / 9;
            int buttonCornerRadius = Convert.ToInt32(deviceWidht / 20);

            Grid panel1 = new Grid();
            panel1.HorizontalOptions = LayoutOptions.CenterAndExpand;
            panel1.VerticalOptions = LayoutOptions.CenterAndExpand;
            panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
            panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
            panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
            panel1.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            panel1.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            panel1.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });


            Button r1c1 = SetButton(1, 1);
            Button r1c2 = SetButton(1, 2);
            Button r1c3 = SetButton(1, 3);
            Button r2c1 = SetButton(2, 1);
            Button r2c2 = SetButton(2, 2);
            Button r2c3 = SetButton(2, 3);
            Button r3c1 = SetButton(3, 1);
            Button r3c2 = SetButton(3, 2);
            Button r3c3 = SetButton(3, 3);

            Button SetButton (int row, int column)
            {
                Button createdButton = CreateButton(row, column);
                Grid.SetRow(createdButton, row);
                Grid.SetColumn(createdButton, column);
                panel1.Children.Add(createdButton);
                return createdButton;

            }
            Button CreateButton(int row, int column)
            {
                return new Button
                {
                    Text = "Row " + row + " Column " + column,
                    WidthRequest = buttonWidthandHeight,
                    HeightRequest = buttonWidthandHeight,
                    CornerRadius = buttonCornerRadius
                };               
            }

            this.Content = panel1;
        }

标签： c#xamarin.forms

解决方案

首先，您可以更改ColumnDefinitions和RowDefinitions如下：

panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1,GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

三个 ColumnDefinition 对象都将 Width 设置为 1，这意味着屏幕的宽度在三列下方均分（对于行也是如此）。

其次，添加按钮时，应该从位置开始0，而不是从位置开始1。

Button r1c1 = SetButton(0, 0);
Button r1c2 = SetButton(0, 1);
Button r1c3 = SetButton(0, 2);
Button r2c1 = SetButton(1, 0);
Button r2c2 = SetButton(1, 1);
Button r2c3 = SetButton(1, 2);
Button r3c1 = SetButton(2, 0);
Button r3c2 = SetButton(2, 1);
Button r3c3 = SetButton(2, 2);

最后，您可以检查的代码：

this.Padding = new Thickness(20);
var deviceWidht = DeviceDisplay.MainDisplayInfo.Width;
double buttonWidthandHeight = deviceWidht / 9;
int buttonCornerRadius = Convert.ToInt32(deviceWidht / 20);

Grid panel1 = new Grid();
panel1.HorizontalOptions = LayoutOptions.FillAndExpand;
panel1.VerticalOptions = LayoutOptions.FillAndExpand;
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1,GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });


Button r1c1 = SetButton(0, 0);
Button r1c2 = SetButton(0, 1);
Button r1c3 = SetButton(0, 2);
Button r2c1 = SetButton(1, 0);
Button r2c2 = SetButton(1, 1);
Button r2c3 = SetButton(1, 2);
Button r3c1 = SetButton(2, 0);
Button r3c2 = SetButton(2, 1);
Button r3c3 = SetButton(2, 2);

Button SetButton(int row, int column)
   {
      Button createdButton = CreateButton(row, column);
      Grid.SetRow(createdButton, row);
      Grid.SetColumn(createdButton, column);
      panel1.Children.Add(createdButton);
      return createdButton;

   }
 Button CreateButton(int row, int column)
   {
      return new Button
       {
          Text = "Row " + row + " Column " + column,
          WidthRequest = buttonWidthandHeight,
          HeightRequest = buttonWidthandHeight,
          CornerRadius = buttonCornerRadius
          };
       }

    this.Content = panel1;

推荐阅读