[Xamarin Design] ListView with items are in Frame

  1. Home
  2. /
  3. Technologies
  4. /
  5. [Xamarin Design] ListView with items are in Frame

[Xamarin Design] ListView with items are in Frame

Posted in : Technologies on by : zquanghoangz Comments:

Many mobile app in modern design have list of tile that show in screen like below pictures. That is target of this post to help you create it using Xamarin Form.

Pre-condition:

– Visual Studio 2015, Xamarin for VS are installed

So these are what we’re looking for:

mobile_pic01  mobile_pic02

The idea is using ListView to load all item from source and display 2 items each row.

To do that, we prepare model and ViewModel classes call: Person and PersonViewModel. The key here is using Tuple, the new feature of C#7, see the code below:

public class Person { public string Code { get; set; } public string Name { get; set; } public string Address { get; set; } public bool IsVisible { get; set; } public Person() { this.Code = DateTime.Now.ToString("hhmmssffffff"); this.Name = "Mr. A"; this.Address = "Singapore"; this.IsVisible = true; } } public class PeoplePair : Tuple<Person, Person> { public PeoplePair(Person item1, Person item2) : base(item1, item2 ?? CreateEmptyModel()) { } private static Person CreateEmptyModel() { return new Person { IsVisible = false }; } } public class PersonViewModel : INotifyPropertyChanged { public PersonViewModel() { //Create mock data People = new List<PeoplePair> { new PeoplePair(new Person(), new Person()), new PeoplePair(new Person(), new Person()), new PeoplePair(new Person(), new Person()), new PeoplePair(new Person(), null) }; //Add an empty data } public List<PeoplePair> People { get; set; } public event PropertyChangedEventHandler PropertyChanged; [NotifyPropertyChangedInvocator] protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
ListView with items are in Frame - Code 1

– The Person class is a simple model which have properties and the constructor to quick create object.

– The PersonPair class to push 2 people in one, that will have 2 properties Item1, Item2. Please see more about Tuple here

– The PersonViewModel class is all about create list People to binding to the view. I added INotifyPropertyChanged interface but not use, for real application, we should raise change to the view.

Now, in the view, we will use frame to make item well form and have shadow:

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ListviewDemo.MainPage"> <Grid Padding="10"> <ListView SeparatorVisibility="None" ItemsSource="{Binding People}" HasUnevenRows="True"> <ListView.ItemTemplate> <DataTemplate> <ViewCell > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="0"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Frame BindingContext="{Binding Item1}" Padding="1" BackgroundColor="#31b0d5" HasShadow="True" OutlineColor="#bbb"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Frame BackgroundColor="White" Padding="5" HasShadow="False"> <Image Source="no_photo.png" Aspect="AspectFill" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="80"/> </Frame> <StackLayout Grid.Row="1" Padding="5,0,5,5" Spacing="1"> <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" FontSize="16" LineBreakMode="TailTruncation" TextColor="White" FontAttributes="Bold"/> <Label Text="{Binding Code}" HorizontalOptions="Center" VerticalOptions="Center" FontSize="12" LineBreakMode="TailTruncation" TextColor="White"/> <Label Text="{Binding Address}" FontSize="12" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" LineBreakMode="TailTruncation"/> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Grid.Column="1" Text="Detail" VerticalOptions="Center" BorderRadius="16" FontSize="10" HeightRequest="34" BorderWidth="0"/> </Grid> </StackLayout> </Grid> </Frame> <Frame Grid.Column="2" IsVisible="{Binding IsVisible}" BindingContext="{Binding Item2}" Padding="1" BackgroundColor="#31b0d5" HasShadow="True" OutlineColor="#bbb"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Frame BackgroundColor="White" Padding="5" HasShadow="False"> <Image Source="no_photo.png" Aspect="AspectFill" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="80"/> </Frame> <StackLayout Grid.Row="1" Padding="5,0,5,5" Spacing="1"> <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" FontSize="16" LineBreakMode="TailTruncation" TextColor="White" FontAttributes="Bold"/> <Label Text="{Binding Code}" HorizontalOptions="Center" VerticalOptions="Center" FontSize="12" LineBreakMode="TailTruncation" TextColor="White"/> <Label Text="{Binding Address}" FontSize="12" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" LineBreakMode="TailTruncation"/> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Grid.Column="1" Text="Detail" VerticalOptions="Center" BorderRadius="16" FontSize="10" HeightRequest="34" BorderWidth="0"/> </Grid> </StackLayout> </Grid> </Frame> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> </ContentPage>
ListView with items are in Frame - Code 2

We have a frame binding to Item1 and another binding to Item2. The frame 2 sometime don’t have because number of item in list is odd. All design inside the frame is exactly the same (I just design for 1 and copy/paste).

* Note: ListView should set HasUnevenRows=”True” to make row height is auto expand.

Something about the performance, when I apply this for my application, load a lot of profile images will make the page load slow and scroll really lag. To fix that issue we will use CachedImage, that you found here

My demo full source code download here.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *