A layout which can wrap contents of a collection which is inside a Listview

Question

I am trying to implement a list of employees working in departments. There are several departments and several employees in a department. Following is my code and I have difficulty in scrolling and wrapping contents (Employee image and Name). As for wrapping the contents, if a row does not have enough space, I want the contents (image and employee's first name) to be displayed in a new line.

So far, I have tried several options but to no avail. I'm using ItemsControl I also tried adding a StackLayout instead of the WrapLayout.

Can anyone please tell me how to fix the scrolling issue and content wrapping issue? Are there any workarounds or any other layouts I can use? Thank you.

XAML

<ListView ItemsSource="{Binding Departments}" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Margin="20,20,20,20">
                        <Label Text="{Binding DepartmentName}" />
                        <Label Text="{Binding DepartmentId}" />

                        <local:ItemsControl ItemsSource="{Binding Employees}">
                            <local:ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                            <local:WrapLayout>
                                                <Image Source="{Binding ImageUrl}"
                                                       WidthRequest="60"
                                                       HeightRequest="60"/>
                                                <Label
                                                       Text="{Binding FirstName}"
                                                       HorizontalTextAlignment="Center"
                                                       VerticalTextAlignment="Center"
                                                    LineBreakMode="WordWrap"/>
                                            </local:WrapLayout>
                                    </Grid>
                                </DataTemplate>
                            </local:ItemsControl.ItemTemplate>
                        </local:ItemsControl>

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

Update 1:

Classes

Department.cs

public class Department
{
    public int DepartmentID { get; set; }
    public string DepartmentName { get; set; }
    // and several other properties

    public List<Employee> Employees { get; set; }
}

Employee.cs

public class Employee
{
    public int EmployeeID { get; set; }
    public string FirstName { get; set; }
    public string ImageUrl{ get; set; }

    // and several other properties
}  

Update 2

Seems like the scrolling does not happen in only one of my testing devices. But still need a layout which is capable of wrapping controls.

Update 3
I want the data to be displayed as in the image below. But right now, with the above code, the contents in the WrapLayout are not wrapped but they are resized in order to fit into one line. I want them to be wrapped if there's no space in the first line.

Answer 1

When you mention WrapLayout, I am assuming you mean this one as defined here.

Also, as you are already using ItemsControl, I would recommend tweaking it to support WrapLayout instead of StackLayout. For example:

public class ItemsControl : WrapLayout
{
    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
        "ItemsSource", typeof(IList), typeof(ItemsControl), propertyChanging: OnItemsSourceChanged);

    /// <summary>
    /// Gets or sets the items source - can be any collection of elements.
    /// </summary>
    /// <value>The items source.</value>
    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(
        "ItemTemplate", typeof(DataTemplate), typeof(ItemsControl));

    /// <summary>
    /// Gets or sets the item template used to generate the visuals for a single item.
    /// </summary>
    /// <value>The item template.</value>
    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    public ItemsControl()
    {
        Padding = new Thickness(0);
        Margin = new Thickness(0);
    }

    static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((ItemsControl)bindable).OnItemsSourceChangedImpl((IList)oldValue, (IList)newValue);
    }

    void OnItemsSourceChangedImpl(IList oldValue, IList newValue)
    {
        // Unsubscribe from the old collection
        if (oldValue != null)
        {
            INotifyCollectionChanged ncc = oldValue as INotifyCollectionChanged;
            if (ncc != null)
                ncc.CollectionChanged -= OnCollectionChanged;
        }

        if (newValue == null)
        {
            Children.Clear();
        }
        else
        {
            FillContainer(newValue);
            INotifyCollectionChanged ncc = newValue as INotifyCollectionChanged;
            if (ncc != null)
                ncc.CollectionChanged += OnCollectionChanged;
        }
    }

    /// <summary>
    /// This method takes our items source and generates visuals for
    /// each item in the collection; it can reuse visuals which were created
    /// previously and simply changes the binding context.
    /// </summary>
    /// <param name="newValue">New items to display</param>
    /// <exception cref="T:System.ArgumentNullException"></exception>
    void FillContainer(IList newValue)
    {
        var template = ItemTemplate;
        var visuals = Children;

        if (template == null)
            throw new NotSupportedException("ItemTemplate must be specified!");

        var newVisuals = new List<View>(Children); //using a list to avoid multiple layout refresh
        Children.Clear();

        for (int i = 0; i < newVisuals.Count; i++)
        {
            newVisuals[i].IsVisible = i < newValue.Count;
        }

        for (int i = 0; i < newValue.Count; i++)
        {
            var dataItem = newValue[i];

            if (visuals.Count > i)
            {
                if (template != null)
                {
                    var visualItem = visuals[i];
                    visualItem.BindingContext = dataItem;
                }
            }
            else
            {
                if (template != null)
                {
                    // Pull real template from selector if necessary.
                    var dSelector = template as DataTemplateSelector;
                    if (dSelector != null)
                        template = dSelector.SelectTemplate(dataItem, this);

                    var view = template.CreateContent() as View;
                    if (view != null)
                    {
                        view.BindingContext = dataItem;
                        newVisuals.Add(view);
                    }
                }
            }
        }

        foreach (var child in newVisuals) //wish they had a nice AddRange method here
            if(child.IsVisible)
                Children.Add(child);
    }

    /// <summary>
    /// This is called when the data source collection implements
    /// collection change notifications and the data has changed.
    /// This is not optimized - it simply replaces all the data.
    /// </summary>
    /// <param name="sender">Sender.</param>
    /// <param name="e">E.</param>
    void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        FillContainer((IList)sender);
    }
}

And then change your XAML to:

<ListView ItemsSource="{Binding Departments}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Margin="20,20,20,20">
                    <Label Text="{Binding DepartmentName}" />
                    <Label Text="{Binding DepartmentId}" />

                    <local:ItemsControl ItemsSource="{Binding Employees}">
                        <local:ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackLayout Orientation="Horizontal">
                                    <Image Source="{Binding ImageUrl}"
                                                   WidthRequest="60"
                                                   HeightRequest="60"/>
                                    <Label Text="{Binding FirstName}"
                                           HorizontalTextAlignment="Center"
                                           VerticalTextAlignment="Center" />
                                </StackLayout>
                            </DataTemplate>
                        </local:ItemsControl.ItemTemplate>
                    </local:ItemsControl>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>