Simple ListView with Xamarin.Forms

Hello today were gonna talk about the new Xamarin.Forms framework that allows to create a sharable UI over Android, iOS and Windows Phone you can create it by PCL or Shared Projects projects.

In this post you can see all the power of this framework creating a simple list view and a detail page with only a few lines of code using the MVVM Pattern.

First you need the New 5.0 Xamarin Studio or Visual Studio 2010-2013 U2.

Add a new project in the "Mobile Apps" section, you can find 3 kinds of projects:

• Blank App (Xamarin.Forms Protable): A blank project of Xamarin.Forms with a PCL.
• Blank App (Xamarin.Forms Shared): A blank project with a Shared Project.
• Class Library (Xamarin.Forms Portable): A PCL for Xamarin.Forms.

For this example we use the first one "Blank App (Xamarin.Forms Protable)":

Now you have a solution with 3 Projects Xamarin Studio:

• PCL
• Android App
• iOS App

4 Projects on Visual Studio:

• PCL
• Android App
• iOS App
• Windows Phone App

 Now in the PCL project add this three folders:

• Models
• ViewModels
• Views

Add a new file "City.cs" with this code into Models folder:

using System;

namespace SimpleListViewXamarinForms
{
 public class City
 {
  public string Name{ get; set; }
  public string Country{ get; set; }
  public string Image { get; set; }
 }
}

Add a new file "CityViewModel.cs" into ViewModels folder:

using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace SimpleListViewXamarinForms
{
 public class CityViewModel
 {
  public ObservableCollection<city> Cities;
  public CityViewModel ()
  {
   Cities = new ObservableCollection<city> ();
   Cities.Add (new City{
    Name = "Guadalajara",
    Country = "Mexico",
    Image = "Gdl.jpg"
   });
   Cities.Add(new City{
    Name = "Austin",
    Country = "USA",
    Image = "Aus.jpg"
   });
   Cities.Add(new City{
    Name = "Tokio",
    Country = "Japan",
    Image = "Tok.jpg"
   });
  }
 }
}

Add two new files "Cities.cs" and "DetailPage.cs" into ViewModels folder:

Cities.cs Code

using System;
using Xamarin.Forms;

namespace SimpleListViewXamarinForms
{
 public class CitiesPage:ContentPage
 {
  public CitiesPage ()
  {
   Title = "Cities";
   var viewmodel = new CityViewModel ();
   var list = new ListView ();
   list.ItemsSource = viewmodel.Cities;
   var cell = new DataTemplate(typeof(ImageCell));
   cell.SetBinding (ImageCell.ImageSourceProperty, "Image");
   cell.SetBinding (ImageCell.TextProperty, "Name");
   cell.SetBinding (ImageCell.DetailProperty, "Country");
   list.ItemTemplate = cell;
   list.ItemTapped += (sender, args) =>
   {
    var city = args.Item as City;
    if (city == null)
     return;
    Navigation.PushAsync(new DetailPage(city));
    list.SelectedItem = null;
   };
   Content = list;
  }
 }
}

DetailPage.cs Code

using System;
using Xamarin.Forms;

namespace SimpleListViewXamarinForms
{
 public class DetailPage:ContentPage
 {
  public DetailPage (City city)
  {
   this.Title = city.Name;
   var image = new Image{
    Source = city.Image
   };
   var detailText = new Label{
    Text = city.Country
   };
   Content = new ScrollView
   {
    Padding = 10,
    Content = new StackLayout{
     Children = {image,detailText} 
    }
   };
  }
 }
}

Now modify the App.cs file and return a NavigationPage with a root "CitiesPage" instance:

using System;
using Xamarin.Forms;

namespace SimpleListViewXamarinForms
{
 public class App
 {
  public static Page GetMainPage ()
  { 
   var cities = new CitiesPage ();
   return new NavigationPage (cities);
  }
 }
}

Thats all now you can run the app a see the results on each platform:

 

Important Check the configuration for each platform

Android:

public class MainActivity : AndroidActivity
 {
  protected override void OnCreate (Bundle bundle)
  {
   base.OnCreate (bundle);

   Xamarin.Forms.Forms.Init (this, bundle);

   SetPage (App.GetMainPage ());
  }
 }

iOS:

public partial class AppDelegate : UIApplicationDelegate
 {
  UIWindow window;

  public override bool FinishedLaunching (UIApplication app, NSDictionary options)
  {
   Forms.Init ();

   window = new UIWindow (UIScreen.MainScreen.Bounds);
   
   window.RootViewController = App.GetMainPage ().CreateViewController ();
   window.MakeKeyAndVisible ();
   
   return true;
  }
 }

Windows Phone:

    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();

            Forms.Init();
            Content = App.GetMainPage().ConvertPageToUIElement(this);
        }
    }

Now you have a simple listview with detail view app in less than 15 minutes if you need to check another features of this framework look at Xamarin's documentation on this link:

https://xamarin.com/forms

Look the full example on my github:

https://github.com/AlejandroRuiz/Mono/tree/master/SimpleListViewXamarinForms

if you have a question about it you can write a comment, now take a beer and enjoy the world cup ;)