Learn About User Settings In Xamarin.Forms

Introduction 

This article will explain how to save specific properties directly to each platform's native setting APIs (NSUserDefaults, SharedPreferences, etc.) using Xam.Plugins.Settings plugin in Xamarin.Forms. This plugin ensures the fastest, most secure, and reliable creation and editing settings per application. Additionally, it works with any Xamarin application, not just Xamarin.Forms.

Requirements

• This article's source code is prepared by using Visual Studio. And it is better to install the latest Visual Studio updates from here.
• This article is prepared on a MAC machine.
• This sample project is Xamarin.Forms PCL project.
• This sample app is targeted for Android, iOS. And, tested for Android & iOS.

Description

Let's start.

Step 1:

First, follow the below steps to create the new Xamarin.Forms project.

• Open Visual Studio for Mac.
• Click on the File menu, and select New Solution.
• In the left pane of the dialog, let's select the type of templates to display. Multiplatform > App > Xamarin.Forms > Blank Forms App and click on Next.
• Next, enter your app name (Ex: AppSettingsDemo). At the bottom, select target platforms to Android & iOS and shared code to Portable Class Library and click the "Next" button.
• Then, choose project location with the help of Browse button and click on create.

Now, project structure will be created like below.

• AppSettingsDemo is for shared code.
• AppSettingsDemo.Droid is for Android.
• AppSettingsDemo.iOS is for iOS.

Step 2:

Now, we need to add Xam.Plugins.Settings plugin on all platforms through NuGet.

Right, click on Packages --> AddPackages.

Now, search the plugin with the name of Xam.Plugins.Settings, like below.

Step 3:

After adding Xam.Plugins.Settings automatically, it will create Helpers folder with Settings.cs class and change the name into UserSettings and we need to declare whatever properties we want to save in App Settings. The below class added 4 fields like UserName, MobileNumber, Email, Password.

UserSettings.cs

// Helpers/Settings.cs
using Plugin.Settings;
using Plugin.Settings.Abstractions;
namespace AppSettingsDemo.Helpers {
    /// <summary>
    /// This is the Settings static class that can be used in your Core solution or in any
    /// of your client applications. All settings are laid out the same exact way with getters
    /// and setters.
    /// </summary>
    public static class UserSettings {
        static ISettings AppSettings {
            get {
                return CrossSettings.Current;
            }
        }
        public static string UserName {
            get => AppSettings.GetValueOrDefault(nameof(UserName), string.Empty);
            set => AppSettings.AddOrUpdateValue(nameof(UserName), value);
        }
        public static string MobileNumber {
            get => AppSettings.GetValueOrDefault(nameof(MobileNumber), string.Empty);
            set => AppSettings.AddOrUpdateValue(nameof(MobileNumber), value);
        }
        public static string Email {
            get => AppSettings.GetValueOrDefault(nameof(Email), string.Empty);
            set => AppSettings.AddOrUpdateValue(nameof(Email), value);
        }
        public static string Password {
            get => AppSettings.GetValueOrDefault(nameof(Password), string.Empty);
            set => AppSettings.AddOrUpdateValue(nameof(Password), value);
        }
        public static void ClearAllData() {
            AppSettings.Clear();
        }
    }
}

Step 4:

The below View Model will be helpful to store/read string values (UserName, MobileNumber, Email, Password). And we are maintaining common properties for UserLogicViewModel, DetailsPageViewModel by Inheriting BasePageViewModel.

BasePageViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;
using AppSettingsDemo.Helpers;
using Xamarin.Forms;
namespace AppSettingsDemo.ViewModels {
    public class BasePageViewModel: INotifyPropertyChanged {
        public INavigation _navigation;
        public string UserName {
            get => UserSettings.UserName;
            set {
                UserSettings.UserName = value;
                NotifyPropertyChanged("UserName");
            }
        }
        public string MobileNumber {
            get => UserSettings.MobileNumber;
            set {
                 UserSettings.MobileNumber = value;
                NotifyPropertyChanged("MobileNumber");
            }
        }
        public string Email {
            get => UserSettings.Email;
            set {
                 UserSettings.Email = value;
                NotifyPropertyChanged("Email");
            }
        }
        public string Password {
            get => UserSettings.Password;
            set {
                 UserSettings.Password = value;
                NotifyPropertyChanged("Password");
            }
        }
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

Step 5:

Create your own XAML page named UserLogin.xaml for user login. And here, we are binding the values like UserName, Mobilenumber, Email, Password from BaseViewModel and LoginCommand is for navigate to DetailsPage.

UserLogin.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
BackgroundColor="#EEEEEE"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppSettingsDemo.Views.UserLogin">
    <ContentPage.Content>
        <StackLayout Padding="30,80,30,0">
            <Label Text="User Settings" TextColor="#533F95" FontSize="25" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" />
            <StackLayout Spacing="15" VerticalOptions="CenterAndExpand">
                <Entry Placeholder="User Name" Text="{Binding UserName}" HorizontalOptions="FillAndExpand" HeightRequest="40" />
                <Entry Placeholder="Mobile Number" Keyboard="Numeric" Text="{Binding MobileNumber}" HorizontalOptions="FillAndExpand" HeightRequest="40" />
                <Entry Placeholder="Email Address" Keyboard="Email" Text="{Binding Email}" HorizontalOptions="FillAndExpand" HeightRequest="40" />
                <Entry Placeholder="Password" IsPassword="true" Text="{Binding Password}" HorizontalOptions="FillAndExpand" HeightRequest="40" />
                <Button Text="Login" TextColor="White" BackgroundColor="#533F95" FontAttributes="Bold" BorderColor="White" BorderWidth="0.5" BorderRadius="10" HorizontalOptions="FillAndExpand" Command="{Binding LoginCommand}" /> </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Make BindingContext in code behind with UserLoginPageViewModel.

UserLogin.xaml.cs

using AppSettingsDemo.ViewModels;
using Xamarin.Forms;
namespace AppSettingsDemo.Views {
    public partial class UserLogin: ContentPage {
        public UserLogin() {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
            BindingContext = new UserLoginPageViewModel(Navigation);
        }
    }
}

The following ViewModel will be helpful to store string values (UserName, Password, MobileNumber) and also for user login.

UserLoginPageViewModel.cs

using System.Windows.Input;
using Xamarin.Forms;
namespace AppSettingsDemo.ViewModels {
    public class UserLoginPageViewModel: BasePageViewModel {
        public ICommand LoginCommand {
            get;
            private set;
        }
        public UserLoginPageViewModel(INavigation navigation) {
            _navigation = navigation;
            LoginCommand = new Command(() => UpdateUserInfo());
        }
        void UpdateUserInfo() {
            _navigation.PushAsync(new Views.DetailsPage());
        }
    }
}

Step 6:

Create your own XAML page named DetailsPage.xaml for showing the user login values and also for user logout. And here, we are binding the values from BaseViewModel like UserName, Mobilenumber, Email, Password, LogoutCommand.

DetailsPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
BackgroundColor="#EEEEEE"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppSettingsDemo.Views.DetailsPage">
    <ContentPage.Content>
        <StackLayout Padding="40" Spacing="30">
            <Label Text="User Details" TextColor="#533F95" FontSize="25" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" />
            <StackLayout Spacing="25">
                <StackLayout>
                    <Label Text="User Name:" Font="18" TextColor="Black" HorizontalOptions="FillAndExpand" />
                    <Label Text="{Binding UserName}" HorizontalOptions="FillAndExpand" TextColor="Gray" /> </StackLayout>
                <StackLayout>
                    <Label Text="Mobile Number:" Font="18" HorizontalOptions="FillAndExpand" TextColor="Black" />
                    <Label Text="{Binding MobileNumber}" HorizontalOptions="FillAndExpand" TextColor="Gray" /> </StackLayout>
                <StackLayout>
                    <Label Text="Email Address:" Font="18" HorizontalOptions="FillAndExpand" TextColor="Black" />
                    <Label Text="{Binding Email}" HorizontalOptions="FillAndExpand" TextColor="Gray" /> </StackLayout>
            </StackLayout>
            <Button Text="Logout" TextColor="#533F95" BackgroundColor="Transparent" WidthRequest="100" FontAttributes="Bold" BorderColor="#533F95" BorderWidth="1" BorderRadius="10" HorizontalOptions="EndAndExpand" Command="{Binding LogoutCommand}" /> </StackLayout>
    </ContentPage.Content>
</ContentPage>

Make BindingContext in code behind with DetailsPageViewModel.

DetailsPage.xaml.cs

using AppSettingsDemo.ViewModels;
using Xamarin.Forms;
namespace AppSettingsDemo.Views {
    public partial class DetailsPage: ContentPage {
        public DetailsPage() {
            InitializeComponent();
            BindingContext = new DetailsPageViewModel(Navigation);
        }
    }
}

Below ViewModel will be helpful to read string values (UserName, Password, MobileNumber) from app settings.

DetailsPageViewModel.cs

using System.Windows.Input;
using AppSettinsDemo.Helpers;
using AppSettinsDemo.Views;
using Xamarin.Forms;
namespace AppSettinsDemo.ViewModels {
    public class DetailsPageViewModel: BasePageViewModel {
        public ICommand LogoutCommand {
            get;
            private set;
        }
        public DetailsPageViewModel(INavigation navigation) {
            _navigation = navigation;
            LogoutCommand = new Command(() => ResetUserInfo());
        }
        void ResetUserInfo() {
            _navigation.PushAsync(new UserLogin());
            UserSettings.ClearAllData();
        }
    }
}

In LogoutCommand, we are navigating to UserLogin page and calling UserSettings.ClearAllData() it will clear all the data whatever we are storing in app settings.

Output:

 

Please download the sample from here.