Why won't my Xamarin.Forms label wrap text?

Question

I am trying to make a label wrap inside of the Master page of a MasterDetail page. I thought it was the default behavior to wrap labels, but just in case I even made a custom renderer. I have confirmed that the custom renderer works (through debugging and adding a background to the label), so I assume there is something easy that I am missing. Can anybody take a look at my xaml and give me an idea why this label is not wrapping?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Pages.NavigationDrawer.NavigationMenuMasterPage"
             xmlns:statics="clr-namespace:MyApp.Statics;assembly=MyApp"
             xmlns:multi="clr-namespace:MyApp.Pages.NavigationDrawer;assembly=MyApp"
             Title="Navigation drawer"
             Icon="hamburger.png"
             BackgroundColor="White">
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="Center" Margin="0, 25, 0, 0">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                <Image x:Name="connectionStatusImage" />
                <Label x:Name="connectionStatusText"  Margin="16, 0, 16, 0" YAlign="Center" FontSize="Medium"/>
            </StackLayout>
            <Label x:Name="changeConnectionStatusButton" TextColor="{x:Static statics:Palette.Orange}" XAlign="Center" FontAttributes="Bold" >
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="ChangeConnectionStatusClicked" NumberOfTapsRequired="1" />
                </Label.GestureRecognizers>
            </Label>
            <StackLayout x:Name="SyncStatusStack" Orientation="Horizontal" Margin="0, 16, 16, 0" VerticalOptions="Center" >
                <multi:MultiLineLabel x:Name="syncStatusText" MinimumWidthRequest="0" Margin="16, 0, 0, 0" Text="I want to write a really long string to see if it wraps" />
                <Label x:Name="syncButton" MinimumWidthRequest="40" Text="SYNC" FontAttributes="Bold" YAlign="Center" HorizontalOptions="End" >
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer x:Name="SyncGestureRecognizer" NumberOfTapsRequired="1" />
                    </Label.GestureRecognizers>
                </Label>
            </StackLayout>
            <StackLayout x:Name="SyncStack" Orientation="Vertical" HorizontalOptions="Center" Margin="0, 16, 0, 0">
                <ActivityIndicator x:Name="syncingIndicator"  Margin="16, 0, 32, 0"/>
                <Label x:Name="syncingText" />
            </StackLayout>
            <ListView x:Name="menuListView" VerticalOptions="FillAndExpand" SeparatorVisibility="None" Margin="0, 16, 0, 0">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding Title}" TextColor="{x:Static statics:Palette.PrimaryText}" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

And my (most likely unnecessary) custom label renderer:

using MyApp.iOS.Renderers;
using MyApp.Pages.NavigationDrawer;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MultiLineLabel), typeof(MultiLineLabeliOSRenderer))]
namespace MyApp.iOS.Renderers
{
    public class MultiLineLabeliOSRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            if (Control == null) return;

            Control.LineBreakMode = UIKit.UILineBreakMode.WordWrap;
            Control.Lines = 0;            
        }
    }
}

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Hmm not sure why, but you are correct setting lines to 0 and using word wrap should do the trick ( Multiple lines of text in UILabel )

I recently also implemented this with a custom renderer ( http://depblog.weblogs.us/2016/06/27/xamarin-forms-multi-line-label-custom-renderer-gotcha/ ) and used a number to indicate the exact amount of lines I would like to have. That is being set into the Lines property and then the wrapping works.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 23 '16 at 12:01

Depechie

6,102
24
46

1

I have done some experiments with putting Labels in different places, and putting Labels inside of horizontal StackLayouts in different places (even on a new page with a basic ListView.) It seems like Labels inside of a horizontal StackLayout will not wrap on iOS if there is a ListView on the same page. If there is not a ListView, everything works as expected. And it all works fine on Android. So I am assuming this must be a bug. I had the same behavior with a Grid. So I just changed my Layout a bit and made the StackLayout vertical. Not exactly what I wanted, but it works :) – Jason Toms Nov 23 '16 at 12:17
1

Best posting a repo on BugZilla that way it will be tracked! – Depechie Nov 23 '16 at 12:19
@JasonToms is right - I just hit this ... what a waste of time. If you want to keep your layout, you could tinker with LineBreakMode. – thinice Jul 27 '17 at 16:55

Why won't my Xamarin.Forms label wrap text?

1 Answers1