Design time data & ListView.IsGroupingEnabled - UXDivers/Gorilla-Player-Support GitHub Wiki

Gorilla supports specifying grouped data in the DesignTimeData.json as required by a ListView with IsGroupingEnabled set to true. In order to do so you must:

  • add an * at the end of name of the property that holds the list of groups
  • each group must have an list property called Items that contains the items in each group

Consider the following ListView, defined within a page called GroupedListView.xaml.

<ListView 
  HasUnevenRows="true" 
  IsGroupingEnabled="true" 
  GroupDisplayBinding="{Binding Name}"
  ItemsSource="{Binding Departments}" CachingStrategy="RecycleElement">

  <ListView.GroupHeaderTemplate>
    <DataTemplate>
      <ViewCell>
        <StackLayout Orientation="Horizontal" Padding="17,4">
          <Label Text="{Binding Name}" 
                 VerticalOptions="Center" 
                 FontAttributes="Bold" />
        </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.GroupHeaderTemplate>

  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ContentView>
          <StackLayout Orientation="Horizontal" Padding="17,4">
            <Image Source="{Binding Photo}" />
            <Label Text="{Binding FirstName}" 
                   VerticalOptions="Center" 
                   FontAttributes="Bold" />
          </StackLayout>
        </ContentView>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

The XAML expects groups data to be in a property called Departments. In the group header we want to display the name of the group and for each item we want to display the employ's photo and first name.

The design time data to represents this structure would be as follows:

"GroupedListView.xaml" : {
   "Departments*" : 
   [
     {  
        "Name":"Sales",
        "Items": [
          { "FirstName": "John", "Photo": "friend_thumbnail_27.jpg" },
          { "FirstName": "Cassy", "Photo": "friend_thumbnail_93.jpg" }
        ]
     }, 
     {  
        "Name":"Accounts",
        "Items": [
          { "FirstName": "Susan", "Photo": "friend_thumbnail_75.jpg" },
          { "FirstName": "Pam", "Photo": "friend_thumbnail_31.jpg" }
        ]
     },
     {  
        "Name":"All",
        "Items": [
          { "FirstName": "John", "Photo": "friend_thumbnail_27.jpg" },
          { "FirstName": "Pam", "Photo": "friend_thumbnail_31.jpg" },
          { "FirstName": "Cassy", "Photo": "friend_thumbnail_93.jpg" },
          { "FirstName": "Sussan", "Photo": "friend_thumbnail_75.jpg" }
        ]
     },
   ]
}

The * at the end of Departments specified that this property contains groups. Also notice that each department has an Items collection with the employees.

Note 1: You can specify GroupDisplayBinding instead of specifying the GroupHeaderTemplate. In the example above you could remove the group header template and set GroupDisplayBinding="{Binding Name}" to get a similar result.

Note 2: If you specify the GroupShortNameBinding property, make sure the bound property exists on each group and it is not null, otherwise Gorilla will crash.

⚠️ **GitHub.com Fallback** ⚠️