CODEWITHSUNDEEP
c#xamarinxamarin.formslabel
Igor Strekha
Igor Strekha

Reputation: 194

How to make two labels consecutively? Second label correctly show new line?

How to make two labels consecutively, so that the second end of the label at the screen moved the remainder of the text on a new line?

Example. First label - "I got it. Take me to the" Second label - "Home Screen"

enter image description here

Upvotes: 2

Views: 1421

Answers (3)

Igor Strekha
Igor Strekha

Reputation: 194

<Grid Padding="0, 10, -10, 10" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding OpenHomePageCommand}"/>
            </Grid.GestureRecognizers>
            <controls:ExtendedLabel x:Name="SimpleLabel"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    FontFamily="OpenSans-Semibold"
                                    FontSize="16.4"
                                    InputTransparent="True"
                                    Text="I got it. Take me to the "
                                    TextColor="{StaticResource Onahau}"
                                    VerticalOptions="EndAndExpand" />

            <controls:ExtendedLabel x:Name="UnderlineLabel"
                                    Grid.Row="0"
                                    Grid.RowSpan="2"
                                    Grid.Column="0"
                                    FontFamily="OpenSans-Semibold"
                                    FontSize="16.4"
                                    InputTransparent="True"
                                    IsUnderline="True"
                                    Text="Home Screen"
                                    TextColor="{StaticResource Onahau}"
                                    VerticalOptions="EndAndExpand" />
        </Grid>

Upvotes: 1

Stephane Delcroix
Stephane Delcroix

Reputation: 16222

You won't be able to have 2 Labels next to each other with Wrapping working like in your sample, that require non-rectangular bounding boxes and Xamarin.Forms (or any other UIKit I know) does not supports it.

But you can use a single Label with multiple Spans:

var formattedString = new FormattedString ();
formattedString.Spans.Add (new Span { BackgroundColor = Color.Red, ForegroundColor = Color.Olive, Text = "I got it. Take me to the " });
formattedString.Spans.Add (new Span { BackgroundColor = Color.Black, ForegroundColor = Color.White, Text = "Home Screen.", FontAttributes=FontAttributes.Bold });

var label = new Label {
    FormattedText = formattedString
};

Upvotes: 1

hvaughan3
hvaughan3

Reputation: 11105

Like @Quantic said you can simply add a new line to the text like:

Label.Text = "I got it. Take me to the" + Environment.NewLine + "Home Screen";

Which is the same as doing:

Label.Text = "I got it. Take me to the\nHome Screen";

Or use a StackLayout:

StackLayout layout = new StackLayout {
    Orientation = StackOrientation.Horizontal,
    Children    = {
        new Label { Text = "I got it. Take me to the" },
        new Label { Text = "Home Screen" },
    }
}

All that being said, you might not want to do that since different screens will have different widths so you need to take that into account. Different devices can also change the text size in your app so that would also effect the size.

*Edit: If you want the tail end of the Label to truncate the text, then you would set the LineBreakMode of the Label like so:

Label.LineBreakMode = LineBreakMode.TailTruncation

Sometimes this does not work depending on the type of layout that your Label is contained in, so if it does not work, please let me know what kind of layout you are storing the Label in.

So if you have the Label in a StackLayout the truncation may not work right on Android. Try putting the Label in a Grid instead. See this post for others who ran into this.

Upvotes: 1

Related Questions