如何将自动填充设置为网格列宽

Question

我有一个只有一行高度为 GridLength.Star 的网格。 在第一列中，我有一个填充单元格的 svg。 在第二列中，我有一个标签。

svg 是一个正方形，应该在垂直和水平方向上填充它，但不能更多。 标签应占宽度的其余部分。

我试着设置

column1.Width = GridLength.Auto;
column2.Width = GridLength.Star;

但总会在中间分开。

所以我得到了：

svg........|标签........

而不是（我想要的）：

svg|标签........

有什么想法吗？

更新

Label label = new Label();

SvgCachedImage svgImage = new SvgCachedImage();
svgImage.HorizontalOptions = LayoutOptions.CenterAndExpand;
svgImage.VerticalOptions = LayoutOptions.CenterAndExpand;

Grid grid = new Grid();
grid.Children.Add( svgImage );
grid.Children.Add( label );

RowDefinition row = new RowDefinition();
ColumnDefinition column1 = new ColumnDefinition();
ColumnDefinition column2 = new ColumnDefinition();

row.Height = GridLength.Star;
grid.RowDefinitions = new RowDefinitionCollection { row1 };
column1.Width = GridLength.Auto;
column2.Width = GridLength.Star;
grid.ColumnDefinitions = new ColumnDefinitionCollection { column1, column2 };

更新 2

抱歉，它不是 Fill，而是 CenterAndExpand

Answer 1

我得到了答案。我只需要将 svg 的高度设置为其 widthRequest：

 svgImage.WidthRequest = svgImage.Height;
 column1.Width = GridLength.Auto;
 column2.Width = GridLength.Star;
 grid.Children.Add( svgImage, 0, 0 );
 grid.Children.Add( label, 1, 0 );

Answer 2

嗯，实际上它非常简单，其背后的原因是 GridLength.Auto 你有所有你需要做的就是将 Grid 列定义更改为这样的：

XAML

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="1*"/> // svg
  <ColumnDefinition Width="4*"/> // label
</Grid.CoulmnDefinitions>

C#

Grid grid= new Grid
{
    ColumnDefinitions = 
            {
               new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }, 
               new RowDefinition { Height = new GridLength(4, GridUnitType.Star) },
            }
}

grid.Children.Add(svgImage, 0, 0);
grid.Children.Add(label, 0, 1);

Answer 3

移动：

grid.Children.Add( svgImage );
grid.Children.Add( label );

设置好行/列定义后，更改为：

grid.Children.Add(svgImage, 0, 0);
grid.Children.Add(label, 0, 1);

您基本上必须告诉网格放置元素的行/列。通过在初始化列定义之前将它们添加到网格中，ColumnDefinitions 已默认为 GridLength.Star。

---

我已经整理了您的代码。请注意，我已经更改了 Height 的分配。

Label label = new Label()
{
   Text = "Some text" // Just some placeholder text
};

SvgCachedImage svgImage = new SvgCachedImage()
{
    HorizontalOptions = LayoutOptions.CenterAndExpand,
    VerticalOptions = LayoutOptions.CenterAndExpand
};

Grid grid = new Grid();

// NOTE: use GridLength class to set the Height/Width of rows/columns
RowDefinition row = new RowDefinition()
{
    Height = new GridLength(1, GridUnitType.Star)
}
ColumnDefinition column1 = new ColumnDefinition()
{
    Width = new GridLength(1, GridUnitType.Auto)
}
ColumnDefinition column2 = new ColumnDefinition()
{
    Width = new GridLength(1, GridUnitType.Star)
}

// Use existing instances of the definitions
grid.RowDefinitions.Add(row1);
grid.ColumnDefinitions.Add(column1);
grid.ColumnDefinitions.Add(column2);

grid.Children.Add(svgImage, 0, 0);
grid.Children.Add(label, 1, 0);

当我输入此内容时，我注意到您只是将Width 属性设置为GridLength.Star/Auto。根据docs，您应该使用GridLength 类，而不是枚举。