Bug in horizontal alignment in a custom ViewCell in the ListView

AleksandrsVorobjovsAleksandrsVorobjovs USMember ✭✭
edited September 2015 in Xamarin.Forms

Hello,

I have a bug related with horizontal alignment in a custom ViewCell in the ListView. Or maybe I do something wrong.

I have a small and simple data model class:
public class DataItem { public string CustomerAssetNo { get; set; } public string AccountName { get; set; } public DateTime LocalPlannedAt { get; set; } }

And I have a list of these items in my MVVM page model (I use FreshMVVM, but it doesn't matter):
public List<DataItem> items = new List<DataItem>() { new DataItem() { CustomerAssetNo = "Ovi-178502", AccountName = "SSAB Europe Oy", LocalPlannedAt = new DateTime(2014, 1, 10) }, new DataItem() { CustomerAssetNo = "Kdi-531348", AccountName = "Konecranes Finland Oy / Hyvinkää Factory", LocalPlannedAt = new DateTime(2014, 1, 10) }, };

Finally I have a xaml page with this markup when I bind the items to the ListView and have a custom ViewCell:
`
<?xml version="1.0" encoding="utf-8" ?>


<ListView.ItemTemplate>

      <StackLayout Orientation="Horizontal">
        <Label Text="{Binding CustomerAssetNo}" LineBreakMode="NoWrap" />
        <Label Text="{Binding AccountName}" LineBreakMode="WordWrap" />
        <Label Text="{Binding LocalPlannedAt, StringFormat='{0:dd.MM.yyyy}'}" LineBreakMode="NoWrap" HorizontalOptions="EndAndExpand" />
      </StackLayout>

    </ViewCell>
  </DataTemplate>
</ListView.ItemTemplate>


`
P.S. The code syntax id working ugly in this forum engine. But trust me there is a full normal xaml markup

And problem is there. The first row is shown correctly. But the second row is broken. The first and last labels text is cut, If a text in the middle label is too long. See the screenshot at Adnroid:
image

How can I fix it? I want to show all text in all labels. The text in the middle label have to wrapped more instead of the first and the last labels were draw apart.

Posts

  • AleksandrsVorobjovsAleksandrsVorobjovs USMember ✭✭
    edited September 2015

    Sorry guys, my previous post can be a little knotty. So I rewrite an example as a simple Xamarin.Form page class, without xaml.


    using System;
    using System.Collections.Generic;
    using Xamarin.Forms;

    namespace MuApp.Pages
    {
    public class TestPage : ContentPage
    {
    public TestPage()
    {
    ListView myList = new ListView();
    myList.ItemTemplate = new DataTemplate(typeof(CustomCell));
    myList.ItemsSource = items;

            Content = myList;
        }
    
        public List<DataItem> items = new List<DataItem>()
        {
            new DataItem()
            {
                Number = "1234567890",
                Name = "ShortName",
                Date = "30.09.2015"
            },
            new DataItem()
            {
                Number = "1234567890",
                Name = "The very long name with several different words",
                Date = "30.09.2015"
            },
        };
    }
    
    public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            Label lblNumber = new Label() { LineBreakMode = LineBreakMode.NoWrap };
            lblNumber.SetBinding(Label.TextProperty, "Number");
    
            Label lblName = new Label() { LineBreakMode = LineBreakMode.WordWrap };
            lblName.SetBinding(Label.TextProperty, "Name");
    
            Label lblDate = new Label() { LineBreakMode = LineBreakMode.NoWrap, HorizontalOptions = LayoutOptions.EndAndExpand };
            lblDate.SetBinding(Label.TextProperty, "Date");
    
            StackLayout layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
            layout.Children.Add(lblNumber);
            layout.Children.Add(lblName);
            layout.Children.Add(lblDate);
    
            View = layout;
        }
    
    }
    
    public class DataItem
    {
        public string Number { get; set; }
        public string Name { get; set; }
        public string Date { get; set; }
    }
    

    }

    And there is the same result on Android:

    image

    As you can see on the screenshot the first row is shown good. You can see full text of all labels. It is because the Name is short.
    But the Name on the second row is long. And as a result the first and the last labels are cut.

    I really need to understand why and how can I fix it?
    Help me, please!

Sign In or Register to comment.