Skip to the content

Xamarin.Forms - ListView

In this article, we are going to setup the initial the article list page and set this up as our application's main page.

Cleaning up

Before we get started, let's remove the default page that Visual Studio setup for us.

Configure Project

Creating a new page

Right click on the "FormsTutor" project and select "Forms ContentPage Xaml".
Configure Project

Once the new page is created we'll need to set it as the default page for our application. To do this find the App.xaml.cs file and modify the code as per example:

public App()
{
  InitializeComponent();
  MainPage = new ArticlesPage();
}

Adding a ListView

To add a list view to our new ArticlesPage open the ArticlesPage.xaml file and add a ListView as per below example:

<?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="FormsTutor.ArticlesPage">
	<ContentPage.Content>
		<ListView x:Name="Articles">
			<ListView.ItemsSource>
				<x:Array Type="{x:Type x:String}">
					<x:String>First Article</x:String>
					<x:String>Second Article</x:String>
					<x:String>Third Article</x:String>
				</x:Array>
			</ListView.ItemsSource>
		</ListView>
	</ContentPage.Content>
</ContentPage>

For demonstration purposes, you'll see that we've added in some static content to the list. We've done this by setting the ListView's ItemsSource property to a new string array with some predefined values added to it.

Configure Project

Summary

This is a very trivial example of how to add a List View. In future articles we will be work through binding real data to the list, and adding more functionality to the list items.

In the next post, we'll explore how to setup your first ReactiveUI View Model and bind it to a List View.

Full source code for this post can be found here:
https://github.com/jamilgeor/FormsTutor/tree/master/Lesson02

About the author

Jamil Geor

Jamil Geor

Jamil is the co-founder and CTO of Pattern. 

How can we help?

If you have a problem that needs software to solve, don't hesitate to get in touch.