In this lesson, you will learn about:
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:
<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>
{
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:
<z-Component z-type="Row“ z-base="ListViewItem[Product]“>
<!-- TEM TEMPLATE -->
<TextView Id="Name" Text="@Item.ToString()" />
<ImageView Id="ViewButton" …/>
</z-Component>
</ListView>
C#:
await Add(list);
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>
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:
...
// 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);
}
public override async Task OnInitializing()
{
.....
Page.PulledToRefresh.Handle(Reload); // Attaches Reload() to the PulledToRefresh event of the page
}
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.
<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>
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.
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.