Bug 21936 - Labels inside of a ListView do not WordWrap
Summary: Labels inside of a ListView do not WordWrap
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.2.2
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2014-08-07 17:41 UTC by Mitch Milam
Modified: 2015-02-05 05:13 UTC (History)
7 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:


Attachments
Screen shot of results (WinPhone) (33.41 KB, image/png)
2014-08-07 17:41 UTC, Mitch Milam
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description Mitch Milam 2014-08-07 17:41:56 UTC
Created attachment 7628 [details]
Screen shot of results (WinPhone)

Here is a ListView with a DataTemplate containing a Switch and a Label.

Should the label exceed the width of the View, it is not wrapped, no matter which of the following is modified:

o The LineBreakMode
o The configuration of Horizontal and Vertical orientations for the StackLayout
o Any propery on the ListView


Sample code (basically a replacement for the ListViewDemo class in the FormsGallery demo:
=========================================================================================


    class ListViewDemoPage : ContentPage
    {
        class Person
        {
            public Person(string name, bool isSubscriped)
            {
                Name = name;
                IsSubscriped = isSubscriped;
            }

            public string Name { private set; get; }
            public bool IsSubscriped { get; set; }
        };

        public ListViewDemoPage()
        {
            var header = new Label
            {
                Text = "ListView",
                Font = Font.BoldSystemFontOfSize(NamedSize.Medium),
                HorizontalOptions = LayoutOptions.Center,
            };

            var people = new List<Person>
            {
                new Person("this is a very long message aaaa bbb ccc ddd eee ", true),
                new Person("this is a very long message aa bb cc dd ee ff gg hh ii jj kk", true),
                new Person("this is a very long message", false),
                new Person("this is a very long message", true),
                new Person("this is a very long message", false),
                new Person("this is a very long message", true),
                new Person("this is a very long message", false),
                new Person("this is a very long message", true),
            };

            var listView = new ListView
            {
                HasUnevenRows = true,
                RowHeight = 100,
                
                ItemsSource = people,
                ItemTemplate = new DataTemplate(() =>
                {
                    var label = new Label()
                    {
                        HorizontalOptions = LayoutOptions.Start,
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                        LineBreakMode = LineBreakMode.CharacterWrap,
                        Font = Font.SystemFontOfSize(20),
                        TextColor = Color.White
                    };

                    var switcher = new Switch
                       {
                           HorizontalOptions = LayoutOptions.Start,
                           VerticalOptions = LayoutOptions.CenterAndExpand
                       };

                    label.SetBinding(Label.TextProperty, "Name");
                    switcher.SetBinding(Switch.IsToggledProperty, "IsSubscriped");

                    return new ViewCell
                    {
                        View = new StackLayout
                        {
                            Padding = new Thickness(0, 5),
                            Orientation = StackOrientation.Horizontal,

                            Children =
                                {
                                    switcher,
                                    label,
                                }
                        }
                    };
                })
            };

            Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);

            Content = new StackLayout
            {
                Children = 
                {
                    header,
                    listView
                }
            };
        }
    }
Comment 1 Mitch Milam 2014-08-07 17:42:38 UTC
Forgot to mention. If the Switch is removed from the StackLayout, wrapping happens as expected.
Comment 2 Arpit Jha 2014-08-21 02:41:29 UTC
I have checked this issue and able to reproduce it.

Steps to reproduce this issue.

1. Create a Xamarin Forms PCL Application.
2.Add a class (.xaml) , add above code and did some modification in it.
3.Run the Application.

I observed that Listview having label in this demo .first and second label  width crossed the width of screen ,complete text of first label not able to see but second label text shifted to another line.

I checked on Emulator API18

ScreenCast: http://screencast.com/t/Lmf4uM6v

Environment Info: 
XVS 3.3.47.0

Xamarin Forms Version : 1.2.2.6243
Comment 3 Jason Smith [MSFT] 2015-02-05 05:13:03 UTC
This is fixed by 1.3.0