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:
Here is what the final result should like on iOS and Android:
iOS:
Android:
Now let’s get the job done!
And a view model class that will be the binding context of our list view:
![ListView for Xamarin.Forms Item Template]( "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:
We have to enable the swipe gestures and specify the swipe distance.
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.
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]( "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!![]()
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
Here is what the final result should like on iOS and Android:
iOS:
 |  |  |
Android:
 |  |  |
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:usingTelerik.XamarinForms.Common;namespaceCustomizableListView{ publicclassSong : NotifyPropertyChangedBase { privateboolisFavourite; publicstringTitle { get; set; } publicstringAuthor { get; set; } publicstringAlbum { get; set; } publicstringAlbumArt { get; set; } publicboolIsFavourite { get { returnthis.isFavourite; } set { if(this.isFavourite != value) { this.isFavourite = value; this.RaisePropertyCanged(); } } } }}usingSystem;usingSystem.Collections.ObjectModel;usingTelerik.XamarinForms.Common;namespaceCustomizableListView{ publicclassViewModel : NotifyPropertyChangedBase { privateObservableCollection<Song> songs; publicViewModel() { this.Songs = this.GetData(); } publicObservableCollection<Song> Songs { get { returnthis.songs; } set { if(this.songs != value) { this.songs = value; this.RaisePropertyCanged(); } } } publicvoidReloadData() { this.Songs = this.GetData(); } privateObservableCollection<Song> GetData() { // get songs data } }}Item Template
This is the template of the elements in the ListView that we're after:
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> <GridPadding="10"> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="90"/> <ColumnDefinitionWidth="*"/> </Grid.ColumnDefinitions> <ImageSource="{Binding AlbumArt}"/> <StackLayoutPadding="10,0,0,0"Grid.Column="1"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="*"/> <ColumnDefinitionWidth="Auto"/> </Grid.ColumnDefinitions> <LabelText="{Binding Title}"TextColor="#694A00"LineBreakMode="TailTruncation"FontSize="Large"/> <ImageSource="{Binding IsFavourite, Converter={StaticResource FavouriteImageConverter}}"Grid.Column="1"/> </Grid> <StackLayoutOrientation="Horizontal"Padding="5,0,0,0"> <LabelTextColor="#806015"Text="by"FontAttributes="Italic"FontSize="Medium"/> <LabelTextColor="#806015"Text="{Binding Author}"LineBreakMode="TailTruncation"FontSize="Medium"/> </StackLayout> <StackLayoutOrientation="Horizontal"Padding="15,0,0,0"> <LabelTextColor="#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:ListViewItemStyleBackgroundColor="{StaticResource SelectedBackgroundColor}"BorderLocation="Bottom"BorderColor="#A0967D"BorderWidth="2"/></telerikDataControls:RadListView.SelectedItemStyle><telerikDataControls:RadListView.ItemStyle> <telerikListView:ListViewItemStyleBackgroundColor="{StaticResource BackgroundColor}"BorderLocation="Bottom"BorderColor="#A0967D"BorderWidth="2"/></telerikDataControls:RadListView.ItemStyle><telerikDataControls:RadListView.PressedItemStyle> <telerikListView:ListViewItemStyleBackgroundColor="{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:ListViewLinearLayoutItemLength="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:RadListViewx:Name="listView"IsItemSwipeEnabled="True"SwipeOffset="50,0,50,0"...><telerikDataControls:RadListView.ItemSwipeContentTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="Auto"/> <ColumnDefinitionWidth="*"/> <ColumnDefinitionWidth="Auto"/> </Grid.ColumnDefinitions> <GridBackgroundColor="#33FFFFFF"Grid.Column="0"> <ButtonImage="{Binding IsFavourite, Converter={StaticResource FavouriteButtonConverter}}"Style="{StaticResource ButtonStyle}"Clicked="LoveButtonClick"/> </Grid> <GridBackgroundColor="#33FF0000"Grid.Column="2"> <ButtonImage="trash.png"Style="{StaticResource ButtonStyle}"Clicked="DeleteButtonClick"/> </Grid> </Grid> </DataTemplate></telerikDataControls:RadListView.ItemSwipeContentTemplate>privatevoidLoveButtonClick(objectsender, EventArgs e){ var song = (sender asButton).BindingContext asSong; song.IsFavourite = !song.IsFavourite;}privatevoidDeleteButtonClick(objectsender, EventArgs e){ var song = (sender asButton).BindingContext asSong; this.viewModel.Songs.Remove(song);}
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!
