Xamarin Forms label does not wrap on WPF platform

Question

In my Xamarin Forms app I have a simple ListView, bound to a collection. Each collection item consists of two strings that I display in Labels. The strings may not fit on one line, in which case they should wrap and take multiple lines.

I cut down the code to the bare minimum to post here:

<ScrollView Orientation="Vertical">
    <ListView x:Name="lv" ItemsSource="{Binding MessageItems}" HasUnevenRows="True" Margin="10,10,30,10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasShadow="True" BorderColor="#0A2966" Margin="10,10,10,10">
                        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                            <Label x:Name="ShortText" LineBreakMode="NoWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                Short Text
                            </Label>
                            <Label x:Name="LongText" LineBreakMode="WordWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="{Binding MessageText}">
                                This is a long message. It is so long it is going to wrap to the next line. It goes on and on and on to demonstrate word wrapping.
                            </Label>
                        </StackLayout>
                    </Frame>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

This all works as expected in UWP:

But in WPF, it just displays each label on one line, cutting off the text if it does not fit:

I have specified LineBreakMode="WordWrap" in XAML, even though it's the default value, but the text still does not wrap.

There appears to be multiple discussions of labels not wrapping in Xamarin forums, for example this one https://forums.xamarin.com/discussion/79278/word-wrap-on-label-doesnt-appear-to-be-working, but they didn't provide and answer for me.

There is a bug on Github that seems to describe exactly my issue (https://github.com/xamarin/Xamarin.Forms/issues/3558), but it was marked resolved and the fix has been merged a while back. I assume it would already be incorporated in the latest release of Xamarin Forms, but I am not sure how to check.

I am using Xamarin Forms 4.8.0.1534 (the latest version), and I also tried several different 4.8.x and 4.7.x builds without success.

Xamarin.Forms WPF is in beta. I didn't even know it existed until a couple of weeks ago. There is only one problem in all of these cross-platform shiny new technologies: they have a lot of bugs. — user14090664

George George · Accepted Answer · 2020-10-14T02:20:22

The culprit here is the <Frame> element. I determined this by simplifying your sample code, removing one part or another. Placing <StackLayout> directly inside <ViewCell> (without the intervening <Frame>) fixes the layout and makes Label text wrap as it's supposed to.

Of course, if you do this, you also lose the nice visual border around your labels. Not to worry. We can draw another border and give it the right size and position, so that it looks like it wraps your content. The trick here is to use a Grid and place both the <Frame> and the <StackLayout> into Grid row 0 column 0.

After the above two changes we end up with this:

<ScrollView Orientation="Vertical">
    <ListView x:Name="lv" ItemsSource="{Binding MessageItems}" HasUnevenRows="True" Margin="10,10,30,10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="10,10,10,10">
                        <Frame VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasShadow="True" BorderColor="#0A2966"/>
                        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="20">
                            <Label x:Name="ShortText" LineBreakMode="NoWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                Short Text
                            </Label>
                            <Label x:Name="LongText" LineBreakMode="WordWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="{Binding MessageText}">
                                This is a long message. It is so long it is going to wrap to the next line. It goes on and on and on.
                            </Label>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

Now Labels wrap as expected in both WPF and UWP and the border still shows.

Xamarin Forms label does not wrap on WPF platform

2 Answers