Category Archives: Xamarin Forms

Xamarin Forms: ListView with SQLite

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.

Xamarin Forms Local Storage with SQLite

In the process of rewriting the rental property cashflow calculator app from Android and Java to Xamarin, I have gotten to the point where the calculator part is working pretty much how I want and already has some improvements over the Java version.

Today I added the ability to save the properties to a local SQLite database.

Add a NuGet Package

Since this is a Xamarin Forms application, I am trying to write as little platform specific code as possible. The SQLite-net PCL NuGet package helps significantly in this regard.

You will end up adding it to your main Forms project as well as to each of the platform specific projects that you want to build for.

FileHelper Interface and Implementation

The only thing you end up needing platform specific code for when using this package is for implementing the interface to find where the SQLite file is stored on the device.

In the Forms project, add a new interface called IFileHelper that looks like this:


    public interface IFileHelper
    {
        String GetLocalFilePath(string filename);
    }

Then in your YourAppName.Droid project, you would create a new class that implements this interface. It would look something like this:


using System;
using System.IO;
using Xamarin.Forms;
using YourAppName.Droid;

[assembly: Dependency(typeof(FileHelper))]
namespace YourAppName.Droid
{
    public class FileHelper : IFileHelper
    {
        public string GetLocalFilePath(string filename)
        {
            string path = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
            return Path.Combine(path, filename);
        }
    }
}

Note the [assembly …] part of the code. This is a metadata attribute that registers this class as a FileHelper to the DependencyService. If you do not register your interface, the DependencyService will not be able to find it at run time and will throw an error.

Creating a Model

The easiest way of handling the data that goes in and out of your database is with a class that models all of the attributes of your SQLite table. In my case that is a property. Your model will be a basic class with a few fields. You will most likely want an ID field that auto increments. Here is the Property model I used for an example.


using SQLite;
namespace YourAppName
{
    public class Property
    {
        [PrimaryKey, AutoIncrement]
        public int ID { get; set; }
        public string Name { get; set; }
        public string Value { get; set; }
        public string Mortgage { get; set; }
        public string Rent { get; set; }
        public string Vacancy { get; set; }
        public string Repair { get; set; }
        public string Management { get; set; }
        public string Tax { get; set; }
    }
}

Creating Your Database Class

Now that you have your model and file helpers, you will most likely want a class to handle common operations for your Model like fetching multiple records, adding a new record, fetching a single record, and deleting a single record.

Here is an example of a class that handles these actions.


    public class PropertyDatabase
    {
        readonly SQLiteAsyncConnection database;

        public PropertyDatabase(string db_path)
        {
            database = new SQLiteAsyncConnection(db_path);
            database.CreateTableAsync().Wait();
        }

        public Task> GetPropertiesAsync()
        {
            return database.Table().ToListAsync();
        }

        public Task GetPropertyAsync(int id)
        {
            return database.Table().Where(p => p.ID == id).FirstOrDefaultAsync();
        }

        public Task SavePropertyAsync(Property property)
        {
            if (property.ID != 0)
            {
                return database.UpdateAsync(property);
            }
            else {
                return database.InsertAsync(property);
            }
        }

        public Task DeletePropertyAsync(Property property)
        {
            return database.DeleteAsync(property);
        }
    }

You may want to add the ability to get a specific set of records, for example all properties that have a value above or below a certain amount.

Also notice that we create an asynchronous database connection that is only designed to be opened once and left open waiting for commands during the lifecycle of the app. This avoids the overhead of creating a new database connection for every operation.

Setting It All Up

Now that we have a class set up to allow us to easily access the database, we need to create an instance of it and start performing some operations.


        static PropertyDatabase database;

        public static PropertyDatabase Database
        {
            get
            {
                if (database == null)
                {
                    database = new PropertyDatabase(DependencyService.Get().GetLocalFilePath("YourAppNameSQLite.db3"));
                }
                return database;
            }
        }

Here we use the DependencyService to ask for the platform specific FileHelper that we created earlier so we can access the SQLite database file.

Now you are all ready to start using the database instance. For an example, I created a Save Property button that calls the following method on the ‘Clicked’ event:


        void SaveProperty(object sender, EventArgs e)
        {
            var property = new Property();
            property.ID = property_id;
            property.Value = property_value.Text;
            property.Mortgage = mortgage.Text;
            property.Rent = monthly_rent_cash.Text;
            property.Vacancy = vacancy_cash.Text;
            property.Repair = repair_cash.Text;
            property.Management = property_management_cash.Text;
            property.Tax = property_tax_cash.Text;

            Database.SavePropertyAsync(property);
        }

My next step is to create a page for the app that lists the currently saved properties. This should be pretty straightforward with the PropertyDatabase class I created and a ListView.

Xamarin Tutorials and Documentation

If you get stuck, the tutorials on Xamarin’s Developer Center were very helpful for learning this and the source code for their ToDo app ended up being invaluable as well.

Also you can reach out to me at travis at evolvingdeveloper.com

Xamarin TextChanged Event on Two Fields That Change Each Other

In the new version of the Cashflow Calculator I am making with Xamarin, I wanted to create the ability to input most of the expenses as both exact money values if you knew them or percentages of the monthly rent. This is a very common method of estimating repairs, vacancies, and property management fees.

I Change You, You Change Me

The idea was to have the percentage get set whenever the cash value was changed and the cash value get set whenever the percentage was changed.

But if you just create a normal TextChanged event on both of them, as soon as you make a change to one, it fires its TextChanged event which changes the other field and fires the other field’s TextChanged event which sets the one you are working on.

This does not work.

Stop Listening For a Sec

The solution to this is to disconnect the field you are about to change from its TextChanged listener and reconnect it when you are done changing it. We will use the event for calculating our rent percentage from the price of the property as an example.


async void CalculateRentCash(object sender, TextChangedEventArgs e)
{
    monthly_rent_cash.TextChanged -= CalculateRentPercent;
    await Task.Yield();
    var percent_val = GetFloat(monthly_rent_percent.Text);
    var new_rent_cash = GetFloat(property_value.Text) * (percent_val/100.0);
    monthly_rent_cash.Text = new_rent_cash.ToString();
    monthly_rent_cash.TextChanged += CalculateRentPercent;
}

The important parts of this function are the async in the function definition and the await Task.Yield() after removing CalculateRentPercent from the monthly_rent_cash.TextChanged listener.

Without the await Task.Yield() the function would tell the app that it needs to remove the listener but it would not do it right away. The task would be queued up but put on hold until the current task finished. It would then proceed through the function and the monthly_rent_cash field would still fire CalculateRentPercent.

With the await Task.Yield() line, the app pauses its execution of the current function and lets the Task we just created to remove the TextChanged listener finish before it continues.

If you are new to C# or Xamarin, remember that anytime you have a line that uses await in your function definition, you need async as part of the function description.

There may be other solutions to this problem, but this is the easiest one I came across so far. If you know a better solution, email me at travis at evolvingdeveloper.com and let me know.

Found the solution on the Xamarin forums.

Xamarin Forms Entry

I am rewriting the Cashflow calculator app that I made last fall from Java to a Xamarin Forms app. If I ever decide to release to iOS this will make it much easier.

One of the workhorses for this app is the Entry form element. This is your standard input field from the keyboard.

There are two features that I want to talk about today. Setting the keyboard type and Completed and TextChanged events.

Setting the Keyboard

The Entry element lets you specify the keyboard type like you would expect. There is the Default – the standard keyboard on your device, Numeric – number only entry for things like calculators and money (the one I am using the most), also Telephone, Url, Email, and Chat.

If you have done any sort of UI programming before, you know that limiting the characters that your user can put in significantly reduces the number of potential errors.

XAML Example:


<Entry Keyboard="Numeric" />

The Completed Event

Whenever the user finishes filling out the field and hits the enter or next key, the Completed event gets fired. You can hook up your Entry field to call a function whenever this happens.

For me whenever the user changes one of the values in my form, I recalculate the cashflow value of the property they are putting in. This way they get instant feedback on what one value has to the overall calculation.

XAML Example:


<Entry Completed="CalculateCashflow" />

Where CalculateCashflow is a function in the XAML’s code behind file.

TextChanged Event

This allows you to call a function as soon as the text in a field gets changed, not just when you are done changing it. It might seem like an odd thing to have since we already have a Completed event, but I will give you an instance I plan on using it for.

A couple of my form fields will be connected and be different representations of the same value. For instance, when estimating cashflow of a property it is common to estimate the repair and vacancy costs as percents of the rent.

In this case I will have a pair of split fields that are related. A repair_cash Entry and a repair_percent Entry. Whenever one of them changes, I want the other one to be updated.

XAML Example:


<Entry x:Name="repair_cash" TextChanged="SetRepairPercent" />
<Entry x:Name="repair_percent" TextChanged="SetRepairCash" />

Where SetRepairPercent and SetRepairCash are functions in the XAML’s code behind file.

Note that the Completed event callback function takes a sender object and an EventArgs object while the TextChanged event callback function takes a sender object and a TextChangedEventArgs object.

Really enjoying Xamarin so far. Looking forward to releasing a couple apps with it this year.