StackLauout Label text alignment in xamarin forms

Question

This is My sample code

How to fix label2 excessive text below the label1 as per mentioned in the screenshot

var label1 = new Label() { Text = "Message:", MinimumWidthRequest = 100, TextColor = Color.Red, HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.StartAndExpand };

        var Label2 = new Label()
        {
            Text = "Message message message message message",
            TextColor = Color.Gray,
            HorizontalOptions = LayoutOptions.StartAndExpand,
            VerticalOptions = LayoutOptions.StartAndExpand,
            LineBreakMode = LineBreakMode.WordWrap
        };

        var stack = new StackLayout()
        {
            Margin = new Thickness(20, 5, 20, 5),
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.StartAndExpand,

            Children =
            {
                label1, Label2
            }

        };

        var mainStack = new StackLayout()
        {
            Spacing = 0,
            Children =
            {
                stack
            }
        };

my application designings are fully C# not Xaml. Any suggestion for this issue? @Idris Stack — Yogeshwaran

Ziyad Godil Ziyad Godil · Accepted Answer · 2017-11-02T06:25:26

You can only one way to accomplished this using Formatted text. You needed only one label to do like this:

var label1 = new Label ();
var fs = new FormattedString ();
fs.Spans.Add (new Span { Text="Message:", ForegroundColor = Color.Red});
fs.Spans.Add (new Span { Text="Message message message message message", ForegroundColor = Color. Gray });

label1.FormattedText = fs;

Now you add this label in your stack layout

StackLauout Label text alignment in xamarin forms

1 Answers