How to prevent truncation of a label in the form of a stack layout

Question

I have two tags next to each other. The first is quite long and should be truncated if necessary. The second should be displayed in full - no matter what.

This is my code:

MainPage = new ContentPage { Content = new StackLayout { Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.CenterAndExpand, BackgroundColor = Color.Orange, Padding = 10, Children = { new Label { Text = "The answer to life the universe and everything", HorizontalOptions = LayoutOptions.Start, LineBreakMode = LineBreakMode.TailTruncation, BackgroundColor = Color.Yellow, }, new Label { Text = "42", HorizontalOptions = LayoutOptions.EndAndExpand, LineBreakMode = LineBreakMode.NoWrap, BackgroundColor = Color.Yellow, }, }, }, }; 

This is what I get:

My question is: How can I prevent the "42" trimming?

Explanation of the current result: I think I know why the second shortcut is too small. The size of both labels is matched before the first text is truncated. Therefore, both labels should be slightly reduced, although the first label can handle it better.

Idea 1: I experimented with relative layout (instead of stack layout). However, this is a rather complicated approach, and I get different results on iOS and Android. Therefore, I hope for a simpler fix.

Idea 2: Should I redefine one way to match layout or size? Perhaps the layout "42" may provide the desired width.

Idea 3: Maybe we can create custom shortcut renderers for iOS and Android that handle size matching as expected.

---

Update

"42" is just an example. In my last application, this will change dynamically and may be a string of different lengths. Therefore, setting the MinimumWidthRequest does not help, not knowing the width of the displayed string.

Answer 1

How can I prevent the "circumcision" 42?

You can set the MinimumWidthRequest to a "42" Label so that it is not disabled.

For more information about MinimumWidthRequest see the notes section of the document .

Code example:

 MainPage = new ContentPage { Content = new StackLayout { Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.CenterAndExpand, BackgroundColor = Color.Orange, Padding = 10, Children = { new Label { Text = "The answer to life the universe and everything The answer to life the universe and everything", HorizontalOptions = LayoutOptions.Start, LineBreakMode = LineBreakMode.TailTruncation, BackgroundColor = Color.Yellow, }, new Label { MinimumWidthRequest = 50, Text = "42", HorizontalOptions = LayoutOptions.EndAndExpand, LineBreakMode = LineBreakMode.NoWrap, BackgroundColor = Color.Yellow, }, }, }, }; 

Here is the result:

Answer 2

Here you can use Grid instead of StackLayout . This will solve your problem.

Grid:

 var grid = new Grid(); grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });