Zebble | ListView & Grid classes

ListView & Grid classes

In this lesson, you will learn about:

How to use the ListView component to render a list of items with any template.
How to use Lazy loading, slide-in buttons and empty text features.
How to use the Grid class to render items with multiple columns.

listView:

ListView allows you to render a data source vertically based on a Template class.

To use this component, install the Zebble.ListView nuget package.
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

Example 1:

If you want to show the user's contact list, you should create a ListView that the z-base is ListViewItem[Contact]:

MarkUp:

<z-place inside="Body">
    <ListView z-of="Contact, Row" DataSource="Items," Id="List" >
      <z-Component z-type="Row" z-base="ListViewItem[Contact]" >
        <Stack>
          <TextView Id="Name" Text="@Item.Name" />
        </Stack>
      </z-Component>
    </ListView>
</z-place>C#:partial class ListViewSample
    {
   public List<Contact> Items;
        public override async Task OnInitializing()
        {
            Items = GetSource().ToList();
            await base.OnInitializing();
            await InitializeComponents();
        }
Enumerable<Contact> GetSource() => Database.GetList<Contact>();
        public async Task ReloadButtonTapped() => await Reload();
        public async Task Reload() => await List.UpdateSource(Items = GetSource().ToList());
}

Example 2:

For example if you have a data source (e.g. List<Customer>) you can then define a template class as a view sub-class (e.g. CustomerRowItem) that will take an item as input (e.g. Customer) and visualise that using other sub-views.

Internally it inherits from Stack (vertical).

Markup:

C#:

var list = new ListView<Contact, ItemTemplate> { DataSource=... };
await Add(list);

Pull to Refresh

The Page class has a method named OnRefreshRequested which accepts a Func<Task> argument as a handler. It enables the pull to refresh effect on the page's BodyScroller (which is expected to be a ScrollView). When the user scrolls to the top, and then some, then the provided method will be invoked.

Page Markup
To use pull to refresh, you need to set EnablePullToRefresh on the page to true. Then upon showing of the page, it will look for a scroll view component on the page and configure it. If there is no scroll view on the page, it will log an error on the Visual Studio output window and exit.

<z-Component z-type="MyPage" .... EnablePullToRefresh="true">
...
</z-Component>

Module code behind
When you use a list view component, it's either directly used on a page, or used inside a module which is then hosted on the page. In any case, you will need a method to pull the latest data source and update the list view. For example let's say you have a method named Reload() to do this:

// In the code behind class of where your ListView instance is defined.
...
// Pull the latest source
public async Task Reload()
{
Items = await GetSource(); // Usually from a remote data source such as a Web Api.
await MyListView.UpdateSource(Items);
}All that is remaining is to make the Reload() method called when the user pulls to refresh:...
public override async Task OnInitializing()
{
.....
Page.PulledToRefresh.Handle(Reload); // Attaches Reload() to the PulledToRefresh event of the page
}

Events:

on-Flashed: Raised when the object is flashed.
on-Initialized: Raised when the object object is created and rendered.
on-Initializing: Raised when the object object is being created and rendered.
on-LongPressed: Raised when user clicked on the object for a long time.
on-PanFinished: Raised when user panned on the object .
on-Panning: Raised when user starts to pan on the object .
on-PreRendered: Raised when the object object is not started to rendered before rendering.
on-Swiped: Raised when user swiped on the object .
on-Tapped: Raised when user tapped on the object .

Grid:

A Grid is similar to ListView but instead of a single column it allows you to set the Columns (int) property.

To use this component, install the Zebble.Grid nuget package.
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

The items in the data source will be rendered using the provided Template class. Each row will be filled first before moving to the next row.

When you add a child to a Grid, it will be added to its "current horizontal stack", until there are as many items in it as the "Columns" of the grid. Once reached, if you try to add another child view, it will first create a new row and then add the child to that row.

A grid is essentially a vertical stack of horizontal stacks.

<Grid Id="MyGrid" Width="200" Height="250" Columns="2">
<TextView Text="Row 1, left cell" />
<TextView Text="Row 1, right cell" />
<TextView Text="Row 2, left cell" />
<TextView Text="Row 2, right cell" />
<TextView Text="Row 3, left cell" />
<TextView Text="Row 3, right cell" />
...
</Grid>The child objects within the grid can be anything. Also the width of each object can be different. In that sense the Zebble Grid is different from a HTML table.

Ensure full columns:

If the number of items in the last row is less than the columns, it adds empty canvas cells to fill it up. This is useful for when you want to benefit from the automatic width allocation.

MyGrid.EnsureFullColumns();Grid<TSource, TCellTemplate>

Just like ListView, Grid also comes in a generic form that is suitable for data binding scenarios. You can specify a data source and also an item templte so it can create the items for you automatically.