title: A layout which can wrap contents of a collection which is inside a Listview
body: <p>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.</p>
  
  <p>So far, I have tried several options but to no avail. I'm using <a href="https://github.com/xamarinhq/xamu-infrastructure/blob/master/src/XamU.Infrastructure/Controls/ItemsControl.cs" rel="nofollow noreferrer"><code>ItemsControl</code></a> I also tried adding a <code>StackLayout</code> instead of the <a href="https://github.com/xamarin/xamarin-forms-samples/blob/master/UserInterface/CustomLayout/WrapLayout/ImageWrapLayout/Layout/WrapLayout.cs" rel="nofollow noreferrer"><code>WrapLayout</code></a>. </p>
  
  <p>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.</p>
  
  <p><strong>XAML</strong>  </p>
  
  <pre><code>&lt;ListView ItemsSource="{Binding Departments}" HasUnevenRows="True"&gt;
          &lt;ListView.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;ViewCell&gt;
                      &lt;StackLayout Margin="20,20,20,20"&gt;
                          &lt;Label Text="{Binding DepartmentName}" /&gt;
                          &lt;Label Text="{Binding DepartmentId}" /&gt;
  
                          &lt;local:ItemsControl ItemsSource="{Binding Employees}"&gt;
                              &lt;local:ItemsControl.ItemTemplate&gt;
                                  &lt;DataTemplate&gt;
                                      &lt;Grid&gt;
                                              &lt;local:WrapLayout&gt;
                                                  &lt;Image Source="{Binding ImageUrl}"
                                                         WidthRequest="60"
                                                         HeightRequest="60"/&gt;
                                                  &lt;Label
                                                         Text="{Binding FirstName}"
                                                         HorizontalTextAlignment="Center"
                                                         VerticalTextAlignment="Center"
                                                      LineBreakMode="WordWrap"/&gt;
                                              &lt;/local:WrapLayout&gt;
                                      &lt;/Grid&gt;
                                  &lt;/DataTemplate&gt;
                              &lt;/local:ItemsControl.ItemTemplate&gt;
                          &lt;/local:ItemsControl&gt;
  
                      &lt;/StackLayout&gt;
                  &lt;/ViewCell&gt;
              &lt;/DataTemplate&gt;
          &lt;/ListView.ItemTemplate&gt;
      &lt;/ListView&gt;  
  </code></pre>
  
  <p><br/>
  <strong>Update 1:</strong>  </p>
  
  <p><strong>Classes</strong>  </p>
  
  <p><em>Department.cs</em></p>
  
  <pre><code>public class Department
  {
      public int DepartmentID { get; set; }
      public string DepartmentName { get; set; }
      // and several other properties
  
      public List&lt;Employee&gt; Employees { get; set; }
  }
  </code></pre>
  
  <p><em>Employee.cs</em>  </p>
  
  <pre><code>public class Employee
  {
      public int EmployeeID { get; set; }
      public string FirstName { get; set; }
      public string ImageUrl{ get; set; }
  
      // and several other properties
  }  
  </code></pre>
  
  <p><strong>Update 2</strong>  </p>
  
  <p>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. </p>
  
  <p><strong>Update 3</strong><br>
  I want the data to be displayed as in the image below. But right now, with the above code, the contents in the <code>WrapLayout</code> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/al6oV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/al6oV.png" alt="enter image description here"></a></p>