Telerik blogs

Let's Put Some Makeup on the Telerik ListView for Xamarin

Rosita Topchiyska by Rositsa Topchiyska
October 19, 2015 Mobile, Xamarin 0 Comments


There are millions of apps out there, but many of them are just clones of one another in terms of functionality. It's the UI and the UX that really make a first impression on your end-user and eventually can win them to your side. This is why we are building our components stacked with features and with extensibility in mind. 

Today, we will demonstrate how you can change the look and the behavior of the Telerik ListView for Xamarin.Forms by employing the following features:
  • Ability to customize the template of the items
  • Predefined layouts
  • Support for swipe content
To demonstrate these features, let's say we have a scenario with a list view control that should visualize a playlist of songs. Users can mark a song as a favorite or delete it from the playlist.

Here is what the final result should like on iOS and Android: 

iOS:
ListView for Xamarin.Forms.iOS Normal
 ListView for Xamarin.Forms.iOS Fav
 ListView for Xamarin.Forms.iOS Del


Android:
ListView for Xamarin.Forms.And Normal
 ListView for Xamarin.Forms.And Fav
 ListView for Xamarin.Forms.And Del

Now let’s get the job done!

Data Class

To start, here is a simple data class that will hold some information about a song: 

using Telerik.XamarinForms.Common;
 
namespace CustomizableListView
{
    public class Song : NotifyPropertyChangedBase
    {
        private bool isFavourite;
  
        public string Title { get; set; }
 
        public string Author { get; set; }
 
        public string Album { get; set; }
 
        public string AlbumArt { get; set; }
 
        public bool IsFavourite
        {
            get
            {
                return this.isFavourite;
            }
            set
            {
                if (this.isFavourite != value)
                {
                    this.isFavourite = value;
                    this.RaisePropertyCanged();
                }
            }
        }
    }
}
And a view model class that will be the binding context of our list view:

using System;
using System.Collections.ObjectModel;
using Telerik.XamarinForms.Common;
 
namespace CustomizableListView
{
    public class ViewModel : NotifyPropertyChangedBase
    {
        private ObservableCollection<Song> songs;
 
        public ViewModel()
        {
            this.Songs = this.GetData();
        }
 
        public ObservableCollection<Song> Songs
        {
            get
            {
                return this.songs;
            }
            set
            {
                if (this.songs != value)
                {
                    this.songs = value;
                    this.RaisePropertyCanged();
                }
            }
        }
 
        public void ReloadData()
        {
            this.Songs = this.GetData();
        }
 
        private ObservableCollection<Song> GetData()
        {
            // get songs data
        }
    }
}

Item Template

This is the template of the elements in the ListView that we're after: 

ListView for Xamarin.Forms Item Template

We'll use the ListViewTemplateCell to set a custom data template for the cells. Here is how we organize the elements and layouts in the cell template: 

<telerikDataControls:RadListView.ItemTemplate>
  <DataTemplate>
    <telerikListView:ListViewTemplateCell>
      <telerikListView:ListViewTemplateCell.View>
        <Grid Padding="10">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="90"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Image Source="{Binding AlbumArt}"/>
          <StackLayout Padding="10,0,0,0" Grid.Column="1">
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>
              <Label Text="{Binding Title}" TextColor="#694A00" LineBreakMode="TailTruncation" FontSize="Large"/>
              <Image Source="{Binding IsFavourite, Converter={StaticResource FavouriteImageConverter}}" Grid.Column="1"/>
            </Grid>
            <StackLayout Orientation="Horizontal" Padding="5,0,0,0">
              <Label TextColor="#806015" Text="by" FontAttributes="Italic" FontSize="Medium"/>
              <Label TextColor="#806015" Text="{Binding Author}" LineBreakMode="TailTruncation" FontSize="Medium"/>
            </StackLayout>
            <StackLayout Orientation="Horizontal" Padding="15,0,0,0">
              <Label TextColor="#A0967D" Text="{Binding Album}" LineBreakMode="TailTruncation" FontSize="Small"/>
            </StackLayout>
          </StackLayout>
        </Grid>
      </telerikListView:ListViewTemplateCell.View>
    </telerikListView:ListViewTemplateCell>
  </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

Items State 

Next come the item states. The ListView items are always in one of these states: selected, pressed or normal. There are style properties that customize the item's background and borders for each state.

<telerikDataControls:RadListView.SelectedItemStyle>
  <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SelectedBackgroundColor}" BorderLocation="Bottom" BorderColor="#A0967D" BorderWidth="2"/>
</telerikDataControls:RadListView.SelectedItemStyle>
<telerikDataControls:RadListView.ItemStyle>
  <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource BackgroundColor}" BorderLocation="Bottom" BorderColor="#A0967D" BorderWidth="2"/>
</telerikDataControls:RadListView.ItemStyle>
<telerikDataControls:RadListView.PressedItemStyle>
  <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource BackgroundColor}" BorderLocation="Bottom" BorderColor="#A0967D" BorderWidth="2"/>
</telerikDataControls:RadListView.PressedItemStyle>

Layout 

The items can be arranged in different layouts, and each layout has properties that specify the length of the items and the distance between them. In this example we use a linear layout: 

<telerikDataControls:RadListView.LayoutDefinition>
  <telerikListView:ListViewLinearLayout ItemLength="100" />
</telerikDataControls:RadListView.LayoutDefinition>

Swipe Content 

We also want to add a button at each side of the item that is revealed as the user swipes—one to mark the song as favorite and one to delete the song from the playlist. 

We have to enable the swipe gestures and specify the swipe distance. 

<telerikDataControls:RadListView x:Name="listView" IsItemSwipeEnabled="True" SwipeOffset="50,0,50,0" ...>
The ItemSwipeContentTemplate is used to create the content that appears below the item when the user swipes. For this scenario we add a grid with two buttons. 
 
<telerikDataControls:RadListView.ItemSwipeContentTemplate>
  <DataTemplate>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <Grid BackgroundColor="#33FFFFFF" Grid.Column="0">
        <Button Image="{Binding IsFavourite, Converter={StaticResource FavouriteButtonConverter}}" Style="{StaticResource ButtonStyle}" Clicked="LoveButtonClick"/>
      </Grid>
      <Grid BackgroundColor="#33FF0000" Grid.Column="2">
        <Button Image="trash.png" Style="{StaticResource ButtonStyle}" Clicked="DeleteButtonClick"/>
      </Grid>
    </Grid>
  </DataTemplate>
</telerikDataControls:RadListView.ItemSwipeContentTemplate>
private void LoveButtonClick(object sender, EventArgs e)
{
    var song = (sender as Button).BindingContext as Song;
    song.IsFavourite = !song.IsFavourite;
}
 
private void DeleteButtonClick(object sender, EventArgs e)
{
    var song = (sender as Button).BindingContext as Song;
    this.viewModel.Songs.Remove(song);
}
That's it! Now the ListView is not just styled, but it allows for right and left item swipe behavior with actionable content underneath. Here is how this looks on iPhone:

listview-xamarin-fav-del

You can get the complete source code of the application from our GitHub repo. Of course, you will need UI for Xamarin to run the app. Get a free trial here. 
 

Happy coding!

Update: Check out the newly released Telerik Tagit, a cross-platform native mobile Xamarin app. We give you source code and a six-part walkthrough of how it was created. Check out how we implemented the ListView control in that app, right here! 

C#, ListView, Xamarin
Rosita Topchiyska
About the Author

Rositsa Topchiyska

Rosy started her career at Telerik as a junior support officer and changed her track to development. She is now a software developer and works on multiple products: Telerik UI for Windows Phone, Telerik UI for Windows Universal and Telerik UI for Xamarin Forms. 

Related Posts

Mobile .NET MAUI

Sands of MAUI: Issue #110

Mobile .NET MAUI

Sands of MAUI: Issue #109

Mobile Xamarin .NET MAUI

Microsoft Build Recap: Upgrading from Xamarin to .NET MAUI

Comments

Comments are disabled in preview mode.