Как установить автоматическое заполнение на ширину столбца сетки

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

Перемещение:

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

после того, как вы настроили определения строк / столбцов, а затем измените на:

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

В основном вы должны указать сетке, какая строка/ колонка для размещения ваших элементов.Добавив их в таблицу перед инициализацией определений столбцов, ColumnDefinition по умолчанию установили в 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.Согласно документам , вы должны использовать GridLength класс , а не Enum.

Answer 2

Я получил ответ.Мне просто нужно установить высоту 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 3

Ну, на самом деле это очень просто, причина в том, что у вас есть GridLength.Auto, все, что вам нужно сделать, это изменить определения столбцов таблицы на что-то вроде этого:

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