Xamarin Forms Offline Storage And Sync Techniques Complete Guide

1. Creating a simple Xamarin.Forms application.
2. Implementing offline storage using SQLite.
3. Syncing data when the application is back online.

Prerequisites:

• Basic knowledge of Xamarin.Forms and C#.
• Visual Studio installed with Xamarin tools.
• Internet connectivity to simulate on/offline scenarios.

Step 1: Create a New Xamarin.Forms Project

1. Open Visual Studio.
2. Go to File > New > Project.
3. Select Mobile App (Xamarin.Forms) and click Next.
4. Enter a project name, e.g., XamarinOfflineSync.
5. Select Blanks and Shared project or XAML for UI (depending on your preference).
6. Check Use .NET Standard.
7. Click Create.

Step 2: Add SQLite NuGet Package

SQLite will be used for offline storage.

2. In Solution Explorer, right-click on the XamarinOfflineSync solution.
3. Select Manage NuGet Packages for Solution....
4. Search for sqlite-net-pcl.
5. Install sqlite-net-pcl on all projects (Portable/Library, Android, iOS).

Step 3: Create Model Classes

Create a simple Item model class which will be stored offline.

// Models/Item.cs
using SQLite;
namespace XamarinOfflineSync.Models
{
    [Table("items")]
    public class Item
    {
        [PrimaryKey, AutoIncrement]
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public bool IsSynced { get; set; }
    }
}

Step 4: Implement SQLite Database Helper

Create a helper class that handles all database operations.

// Helpers/DatabaseHelper.cs
using SQLite;
using XamarinOfflineSync.Models;
using System.Collections.Generic;
using System.Linq;

namespace XamarinOfflineSync.Helpers
{
    public class DatabaseHelper
    {
        private SQLiteConnection db;

        public DatabaseHelper(string dbPath)
        {
            db = new SQLiteConnection(dbPath);
            db.CreateTable<Item>();
        }

        public List<Item> GetAllItems()
        {
            return db.Table<Item>().ToList();
        }

        public int SaveItem(Item item)
        {
            if (item.Id == 0)
            {
                db.Insert(item);
                return item.Id;
            }
            else
            {
                db.Update(item);
                return item.Id;
            }
        }

        public int DeleteItem(Item item)
        {
            return db.Delete(item);
        }

        public List<Item> GetUnsyncedItems()
        {
            return db.Table<Item>().Where(i => !i.IsSynced).ToList();
        }
    }
}

Step 5: Implement UI

Implement the UI for displaying and adding items.

MainPage.xaml

<?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="XamarinOfflineSync.MainPage">
    <StackLayout Padding="20">
        <Entry x:Name="NameEntry" Placeholder="Name" />
        <Entry x:Name="DescriptionEntry" Placeholder="Description" />
        <Button Text="Add Item" Clicked="AddItem_Clicked" />
        <ListView x:Name="ItemsListView" ItemsSource="{Binding Items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Description}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs

using XamarinOfflineSync.Models;
using XamarinOfflineSync.Helpers;
using System.Collections.Generic;
using Xamarin.Forms;

namespace XamarinOfflineSync
{
    public partial class MainPage : ContentPage
    {
        private DatabaseHelper dbHelper;

        public List<Item> Items { get; set; }

        public MainPage()
        {
            InitializeComponent();

            dbHelper = new DatabaseHelper(DependencyService.Get<IFileHelper>().GetLocalFilePath("items.db3"));

            LoadItems();
            BindingContext = this;
        }

        private void LoadItems()
        {
            Items = dbHelper.GetAllItems();
            OnPropertyChanged(nameof(Items));
        }

        private async void AddItem_Clicked(object sender, System.EventArgs e)
        {
            if (string.IsNullOrWhiteSpace(NameEntry.Text) || string.IsNullOrWhiteSpace(DescriptionEntry.Text))
            {
                await DisplayAlert("Error", "Name and Description are required", "OK");
                return;
            }

            var item = new Item
            {
                Name = NameEntry.Text,
                Description = DescriptionEntry.Text,
                IsSynced = false
            };

            dbHelper.SaveItem(item);
            LoadItems();

            NameEntry.Text = string.Empty;
            DescriptionEntry.Text = string.Empty;
        }
    }
}

Step 6: Implement Sync Logic

When the app is back online, we'll sync unsynced items to a remote database.

DependencyService Interface and Implementation

1. Define Interface

// Services/IInternetConnection.cs
namespace XamarinOfflineSync.Services
{
    public interface IInternetConnection
    {
        bool IsConnected();
    }
}

2. Implement for Android

// Android/Services/InternetConnectionAndroid.cs
using XamarinOfflineSync.Services;
using Android.Net;
using Android;
using Android.App;
using Xamarin.Forms;

[assembly: Dependency(typeof(InternetConnectionAndroid))]
namespace XamarinOfflineSync.Droid.Services
{
    public class InternetConnectionAndroid : IInternetConnection
    {
        public bool IsConnected()
        {
            var connectivity = (ConnectivityManager)Android.App.Application.Context.GetSystemService(Context.ConnectivityService);
            var networkInfo = connectivity.ActiveNetworkInfo;
            return networkInfo != null && networkInfo.IsConnectedOrConnecting;
        }
    }
}

3. Implement for iOS

// iOS/Services/InternetConnectioniOS.cs
using XamarinOfflineSync.Services;
using System;
using Xamarin.Forms;

[assembly: Dependency(typeof(InternetConnectioniOS))]
namespace XamarinOfflineSync.iOS.Services
{
    public class InternetConnectioniOS : IInternetConnection
    {
        public bool IsConnected()
        {
            return true; // For iOS, we need a more accurate check, but this is a simplified example.
        }
    }
}

4. Sync Method

Add the sync function in MainPage.xaml.cs.