Zebble
  • About Zebble
  • Compare
  • Documentation
  • Themes
  • Plug-ins
  • Contact Us

    • What is Zebble?
    • Structure of a Zebble solution
    • Zebble Designer (UWP)
    • Installing - Introduction
    • Change log
    • Introduction
    • ViewModel development
    • VM.EXE
    • View development
    • Dialogs
    • Lists and Collections
    • Tips and shortcuts
    • List views
    • ViewModel testing
    • Automatic Views
    • View development process
    • Hello World - Core Concepts
    • Layout: Sizing & Positioning
    • Event handling
    • Navigation
    • Alerts, Dialog, Prompt and toast
    • View lifecycle
    • Managing Files & Resources
    • Config & Debugging
    • Forms
    • Page templates
    • Device API
    • Animations
    • Web Api - Part 1 (reading data)
    • Web Api - Part 2 (post and delete)
    • Web Api - Part 3 (server vs client domain model)
    • Gesture events
    • View class
    • Zebble Markup (.zbl files)
    • Data Binding and MVVM
    • Stack class
    • Sizing and positioning
    • Layout examples
    • ScrollView class
    • Page class
    • Styling in Zebble
    • CSS property mapping to Zebble
    • Supported selectors
    • Zebble CSS: Under the hood
    • Inline styling
    • CSS real-time updates
    • Dynamic expressions in CSS
    • Gradient background colours
    • CSS Pseudo-classes support
    • Using Bold and Light Fonts in Zebble
    • Rotation in Zebble
    • Using custom fonts in Zebble
    • Flashing on tap using AutoFlash
    • Button
    • Carousel class
    • Checkbox class
    • DatePicker
    • Drawing class
    • FilePicker class
    • Grid class
    • IconButton class
    • ImageView
    • ItemPicker class
    • ListView & Grid classes
    • OptionsList
    • SearchInput class
    • Slider class
    • Switch class
    • Tabs Class
    • TextInput class
    • TextView
    • TimePicker
    • TreeView
    • Waiting Indicator
    • WebView class (displaying html)
    • C# Methods and Properties Of UI Components
    • Nav.Forward() vs Nav.Go()
    • Passing parameters to the destination page
    • Going Back
    • Showing Popup pages
    • Waiting class
    • Hardware Back button (e.g. Android)
    • NavigationBar class
    • Tabs class
    • Caching (pages)
    • Navigation without event handler
    • Use the Windows version
    • Logging messages for Debugging
    • Debugging Zebble/Plugin
    • Exception handling in Zebble
    • Debugging layout and styles
    • Zebble Device API
    • Device.Screen and orientation (landscape | portrait)
    • Code that should run on a specific platform
    • Using Lamp (aka Flash, LED and Torch)
    • Using Compass (Smooth compass)
    • Using Accelerometer (device angle)
    • Using Gyroscope (device motion speed)
    • How to Vibrate the device?
    • Launching the device browser
    • Finding device model and manufacturer
    • Responding to System events
    • Handling device shake event
    • Permissions
    • Permissions declaration (manifest files)
    • Sharing
    • Prompt for rating the app
    • Finding if Internet connection is available
    • Device messaging (Make a phone call, send SMS or Email)
    • Showing a local notification
    • Copying to Clipboard
    • Accessing device contacts
    • Reading and writing into Gallery (albums)
    • Playing & Recording Audio
    • Cache and temp files and folders
    • C# async / await
    • Understanding Zebble Threading
    • Debugging - the StackTrace problem
    • Not awaiting (running in parallel)
    • Timer (interval / scheduled running)
    • Post-render changes to the UI (dynamic)
    • Introduction of Geo location
    • Map & Location Services
    • Launch directions to a location (external)
    • Getting current Location
    • Tracking user location
    • Device.Media: Taking and picking photos
    • Playing an audio file
    • VideoPlayer class
    • Augmented reality
    • Recording audio
    • Virtual Reality
    • Speech Recognition
    • Recording or picking video
    • Playing remote videos in iOS
    • Text to speech
    • Introduction to the importance of Mobile Testing
    • Why and what to test
    • Testing mobile apps on different devices
    • Testing mobile apps
    • Xamarin Profiler
    • Performance optimization
    • Moving a view to another container at run-time
    • Attaching custom data (tag) to objects
    • Saving a view as image
    • Naming best practices
    • Fastest way to update your nuget package
    • Tips for Clean and Brief code
    • Splash screen and icon generation
    • Advice for passing Approval
    • Options for iOS app distribution
    • Test Release (internal and UAT)
    • Application Icons in IOS
    • Submitting to App Store
    • Releasing to App Store
    • Crash reporting
    • Optimized Release Build
    • Android - Generating an APK for manual installation
    • Payment (subscriptions & in-app purchases)
    • Introduction to push notifications
    • Registration process (App)
    • Push notification setup - iOS
    • Push notification setup - Android
    • Push notification setup - Windows
    • Sending a push message from the web app
    • Introduction
    • Connecting Zebble to Web API
    • Installation
    • Creating an API class
    • GET APIs
    • Calling a GET API (in the mobile app)
    • POST, PUT, PATCH and DELETE APIs
    • Domain Model
    • Web API and Authentication
    • Versioning
    • Uniquely identifying installations (token)
    • Settings file: config.xml
    • Standard Zebble settings
    • Login/Register with Facebook
    • Creating a composite component / plugin
    • Creating a Zebble component using Html and Javascript
    • CustomRenderedView: Third-party native components / plugins
    • Mapbox
    • Naming considerations
    • Random problems?
    • Display Keyboard for Visual Studio Android Emulator
    • iOS goes mad?
    • Configuring a Windows phone for ad-hoc testing
    • Fixing Error DEP0001 : Unexpected Error: -2147009287 while deploying Windows UWP app on device
    • Fixing Error DEP0001 : Unexpected Error: -1988945906 while deploying Windows UWP app on device
    • Unable tp Connect to the Mac agent from Visual Studio
    • Can't connect to the Mac agent from Visual Studio?
    • Choosing the CPU architecture
    • Zebble CLI
    • How to add a Device API to Zebble source?
    • About Automated UI testing
    • What should we test in mobile applications?
    • Creating an Automated UI Test in Zebble



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.

Download this video directly

 


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:

<ListView z-of=“Product, Row“  DataSource="…">
    <z-Component z-type="Row“  z-base="ListViewItem[Product]“>
      <!-- TEM TEMPLATE -->
      <TextView Id="Name" Text="@Item.ToString()" />
      <ImageView Id="ViewButton" …/>
    </z-Component>
</ListView>

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.




‹
Zebble is a product of Geeks Ltd , a software house based in London, UK. All rights are reserved.

Telephone: +44 (0)845 643 6229

Email: hello@zebble.net

Address: 66a London Road, Morden

Greater London, United Kingdom, SM4 5BE

Privacy Statement
Terms & Conditions
Contact Us