英文:
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论