Previously we stored our entry in a SQLite database. Now we want to be able to look at a list of the things we previously saved.
ListView
When you want to display a list of objects, your best option is most likely the aptly named ListView. The ListView binds to a dataset and then displays each item according to a template in a scrollable list.
This is exactly what we want to use to view our saved properties for the cashflow calculator.
Getting the Data
There are several ways to get the data out of the SQLite database and into the ListView. Two of the most common ways are returning the result to a List or creating a CursorAdapter.
I chose to use the List method as it is simple and worked well with how I have set up the database calls to be asynchronous.
A New Page
We need to create a SavedProperties Page and set up our ListView there.
In the XAML file, we need to create our ListView and our template for each item. For now I just want to display the property name and its value.
<?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="SimpleCashflowCalculator.SavedPropertiesPage">
<ListView x:Name="saved_properties_list">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Margin="20, 10, 20, 0" >
<Label Text="{Binding Name}" HorizontalOptions="StartAndExpand" />
<Label Text="{Binding Value}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
This creates a ListView called saved_properties_list and gives it an item template with 2 text labels. It is now expecting a Name field and a Value field for whatever objects are bound to this ListView.
Setting the ItemSource
The way to actually tell the ListView which dataset to use is by setting its ItemSource. We want to refresh this view every time we switch to it so that it always has the latest data. To do that we are going to set the ItemSource in the OnAppearing event.
protected override async void OnAppearing()
{
base.OnAppearing();
saved_properties_list.ItemsSource = await SimpleCashflowCalculatorPage.Database.GetPropertiesAsync();
}
This is a parent class method so we override it and then call what is often called the super method or the parent method before adding our changes.
From the previous post we added this method to our Database class.
public Task> GetPropertiesAsync()
{
return database.Table().ToListAsync();
}
We use this to set the ItemSource of the ListView to be all of our Properties in the database.
The next thing we want to add is a click event listener so that when a ListView Item is clicked, it will go to the edit page for that Property and pass its database ID to allow it to be edited.