未填充父级堆栈布局

huangapple go评论73阅读模式
英文:

Entry not Filling Parent Stack Layout

问题

我正在构建一个包含标题列和值列的输入表单。标题列包含一个标签,而值列包含一个HorizontalStackLayout,它可能包含一个输入框和一个紧挨着的搜索按钮。我已经将HorizontalStackLayout设置为FILL,它可以正常工作。但我已经将输入框也设置为FILL,但它不能填充满?

//如果这是一个文本字段
if (cv.GetType() == typeof(Entry)) { ((Entry) cv).HorizontalOptions = LayoutOptions.Fill;
}

//设置控件的动态可见性
cv.IsVisible = visible;

//如果这个字段是只读的
if (trx.is_field_readonly(c)) {
  cv.IsEnabled = false;
}

//将标题添加到网格中
grid.Add(caption, 0, c);

//使用StackLayout以防需要添加搜索按钮
HorizontalStackLayout hz = new HorizontalStackLayout();
hz.BackgroundColor = Colors.LightGoldenrodYellow;
hz.HorizontalOptions = LayoutOptions.Fill;
hz.Add(cv);

//将控件添加到网格中
if (trx.is_field_lookup_field(trx.data_field_list[c])) {
  ImageButton search_button = new ImageButton();
  search_button.WidthRequest = 32;
  search_button.HeightRequest = 32;
  search_button.HorizontalOptions = LayoutOptions.Start;
  search_button.Source = "Resources/Images/search.png";
  search_button.BackgroundColor = Colors.LightGray;
  search_button.Padding = 5;
  hz.Add(search_button);
}

//添加控件的StackLayout
grid.Add(hz, 1, c);

外观如下:

未填充父级堆栈布局

有关如何使输入框填充HorizontalStackLayout的想法吗?

提前感谢您的回答。

英文:

I am building an entry form with a caption column and a value column. The caption column contains a label and the value columns contains a HorizontalStackLayout which might have an Entry and a search button right next to it. I have the HorizontalStackLayout set to FILL which it does fine. I have the Entry also set to FILL which it does NOT?

//IF THIS IS  A TEXT FIELD
if (cv.GetType() == typeof(Entry)) { ((Entry) cv).HorizontalOptions = LayoutOptions.Fill;
}

//SET CONTROL'S DYNAMIC VIS SETTING
cv.IsVisible = visible;

//IF THIS FIELD IS READONLY
if (trx.is_field_readonly(c)) {
  cv.IsEnabled = false;
}

//ADD CAPTION TO GRID
grid.Add(caption, 0, c);

//USING STACK LAYOUT IN CASE WE NEED TO ADD A SEARCH BUTTON
HorizontalStackLayout hz = new HorizontalStackLayout();
hz.BackgroundColor = Colors.LightGoldenrodYellow;
hz.HorizontalOptions = LayoutOptions.Fill;
hz.Add(cv);

//ADD CONTROL TO GRID
if (trx.is_field_lookup_field(trx.data_field_list[c])) {
  ImageButton search_button = new ImageButton();
  search_button.WidthRequest = 32;
  search_button.HeightRequest = 32;
  search_button.HorizontalOptions = LayoutOptions.Start;
  search_button.Source = "Resources/Images/search.png";
  search_button.BackgroundColor = Colors.LightGray;
  search_button.Padding = 5;
  hz.Add(search_button);
}

//ADD STACKLAYOUT FOR CONTROL(S)
grid.Add(hz, 1, c);

The appearance is this:

未填充父级堆栈布局

Any thoughts on how to get the Entries to fill the HorizontalStackLayout?

Thanks in advance

答案1

得分: 2

Fill 不会按您的预期工作,当它在 StackLayout 内部时。

已弃用的 FillAndExpand 会按预期工作。请参见 Maui 讨论 LayoutOptions.EndAndExpand 已弃用。尽管它是关于 End 上的 ..AndExpand,但在 Fill 上也存在类似的问题。

要么:

  • 使用 FillAndExpand(尽管它已弃用)。
    要么:
  • 使用 Grid 替代(不要使用 StackLayout)。这允许您通过 ColumnDefinition 的 *Auto 来控制扩展。在您的情况下,根据行是否同时具有 Entry 和 Image,您会以不同的方式定义列。

由于您已经在一个 Grid 中,[我认为] 最高性能的解决方案是添加第三列,然后在希望 Entry 填充 Image 将要使用的空间时使用 ColumnSpan=2

var grid = new Grid()
{
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },  // 或者您现在有的任何宽度。
        new ColumnDefinition { Width = GridLength.Star },
        new ColumnDefinition { Width = GridLength.Auto }
    }
};

...

bool hasImageButton = trx.is_field_lookup_field(trx.data_field_list[c]);
grid.Children.Add(cv, 1, c);
if (!hasImageButton)
    Grid.SetColumnSpan(cv, 2);
if (hasImageButton)
{
    ...
    grid.Children.Add(search_button, 2, c);
}
英文:

Fill doesn't do what you expect, when inside a StackLayout.

The Obsolete FillAndExpand does. See Maui discussion LayoutOptions.EndAndExpand is obsolete. Though that is talking about ..AndExpand on End, its a similar issue on Fill.

Either:

  • use FillAndExpand (even though it is obsolete).
    Or:
  • Use a Grid instead (no stacklayout). This lets you control expansion by ColumnDefinition * vs. Auto. In your case, you'll define the columns differently, depending on whether the row has BOTH Entry AND Image.

Since you are already in a Grid, [I think] the most performant solution, because it avoids nesting layouts, is to add a third column, then use ColumnSpan=2 when you want Entry to fill the space that would be used by Image:

var grid = new Grid()
{
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },  // or whatever you have now.
        new ColumnDefinition { Width = GridLength.Star },
        new ColumnDefinition { Width = GridLength.Auto }
    }
};

...

bool hasImageButton = trx.is_field_lookup_field(trx.data_field_list[c]);
grid.Children.Add(cv, 1, c);
if (!hasImageButton)
    Grid.SetColumnSpan(cv, 2);
if (hasImageButton)
{
    ...
    grid.Children.Add(search_button, 2, c);
}

huangapple
  • 本文由 发表于 2023年6月19日 22:54:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76507815.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定