I'd like to be able to accommodate potentially large strings (especially due to localization) by having my grid row height grow past a set minimum. Setting the RowDefinition to GridUnitType.Auto will expand, but it will also squish smaller labels unless I have a height request for the labels. But setting a height request for the labels doesn't allow for expansion of the row - hence some of the text may not be visible.
Does anyone know of a solution?
The first attachment is a screenshot with HeightRequest set for the labels so that my rows are at least a certain height, but the row height will not expand, leaving the long string not entirely visible.
The second attachment is a screenshot with HeightRequest removed for the labels, which expands the row height with the large string, but squishes the row height for the smaller string, which I don't want.
Here is my code.
public class GridSamplePage : ContentPage
{
protected static Style MyLabelStyle = new Style(typeof(Label)) {
Setters = {
new Setter { Property = Label.HeightRequestProperty, Value = 48 },
new Setter { Property = Label.VerticalOptionsProperty, Value = LayoutOptions.FillAndExpand },
new Setter { Property = Label.FontSizeProperty, Value = 16 },
new Setter { Property = Label.VerticalTextAlignmentProperty, Value = TextAlignment.Center },
new Setter { Property = Label.TextColorProperty, Value = Color.Black }
}
};
protected readonly Label ShortLabel1 = new Label {
Style = MyLabelStyle,
HorizontalTextAlignment = TextAlignment.End,
Text = "1st short string",
};
protected readonly Label LongLabel = new Label {
Style = MyLabelStyle,
HorizontalTextAlignment = TextAlignment.End,
Text = "Really, really, very, mucho long string that will wrap a bunch",
};
protected readonly Label ShortLabel2 = new Label {
Style = MyLabelStyle,
HorizontalTextAlignment = TextAlignment.Start,
Text = "2nd short string",
};
protected readonly Label ShortLabel3 = new Label {
Style = MyLabelStyle,
HorizontalTextAlignment = TextAlignment.Start,
Text = "3rd short string",
};
public class ListSeparator : BoxView
{
public ListSeparator()
{
BackgroundColor = Color.Gray;
HeightRequest = 1;
HorizontalOptions = LayoutOptions.FillAndExpand;
}
}
public GridSamplePage()
{
var grid = new Grid {
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.White,
ColumnSpacing = 12,
RowSpacing = 0,
ColumnDefinitions = {
new ColumnDefinition { Width = new GridLength(0, GridUnitType.Absolute) }, // Left side margin
new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) }, // Left label
new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) }, // Right label
new ColumnDefinition { Width = new GridLength(0, GridUnitType.Absolute) }, // Right side margin
},
RowDefinitions = {
new RowDefinition { Height = new GridLength(1, GridUnitType.Absolute) }, // Line
new RowDefinition { Height = new GridLength(48, GridUnitType.Auto) }, // First content row
new RowDefinition { Height = new GridLength(1, GridUnitType.Absolute) }, // Line
new RowDefinition { Height = new GridLength(48, GridUnitType.Auto) }, // Second content row
new RowDefinition { Height = new GridLength(1, GridUnitType.Absolute) }, // Line
}
};
grid.Children.Add(new ListSeparator(), left: 0, right: 4, top: 0, bottom: 1);
grid.Children.Add(ShortLabel1, left: 1, top: 1);
grid.Children.Add(ShortLabel2, left: 2, top: 1);
grid.Children.Add(new ListSeparator(), left: 0, right: 4, top: 2, bottom: 3);
grid.Children.Add(LongLabel, left: 1, top: 3);
grid.Children.Add(ShortLabel3, left: 2, top: 3);
grid.Children.Add(new ListSeparator(), left: 0, right: 4, top: 4, bottom: 5);
Content = grid;
}
}
Thanks!