Screen Setting Styles in Xamarin Forms

Every app has a setting screen, here we can create a custom setting screen. We can create a setting screen using the controls like a label, box, drop-down menu, toggle button, progress bar, etc.

In Xamarin Forms, we can create a setting screen using TableView. TableView can display scro llable lists of data. In TableView, we need to add items manually as a child because the table view is not considered ItemsSource.

In TableView, all elements are arranged in their sections. The TableRoot is the root of the TableView. TableRoot is the parent of TableSection instances. Each TableSection has a ViewCell and every TableSection consist of a heading.

We can create a table view in XAML and code-behind both the ways. Let’s see the structure of the table view.

Using Xaml

Using code-behind

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ScreenSetting
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            Content = new TableView
            {
                Root = new TableRoot
            {
                new TableSection("Sound")
                {
                    new SwitchCell { Text = "Phone Call Sound" },
                    new SwitchCell { Text = "New Call Arrives", On = true }
                }
            },
                Intent = TableIntent.Settings
            };
        }
    }
}

Intent property of the Table View is used to set any of the TableIntent enumeration members:

1. Data: This property is used when displaying data entries.
2. Form: This property is used when the table view act as a Form.
3. Menu: This property is used when presenting a menu of a selection.
4. Settings: This property is used when displaying a list of configuration settings.

We can see how we can use TableView in Xaml and code-behind. Now let’s took a simple example with steps.

Step: 1

Open Visual Studio and select Xamarin project.

Image: Create a Xamarin project

Then give it to the name and select Blank App for Android and iOS platforms.

Image: Select template and platform

Step: 2

After that, we can create a design you can create your design or copy the below code and paste it into your Xaml file.

MainPage.Xaml

In this Xaml file, we can add three Table Sections for different purposes. In this XAML, we can create an app setting using TextCell, EntryCell, SwitchCell, and ImageCell. TextCell is working like a button they provide a Tapped event. EntryCell is used for entering the data on run time. SwitchCell is working as a toggle button (ON/OFF). ImageCell is used to display images in the design.

Step: 3

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ScreenSetting
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void textcell2_Tapped(object sender, EventArgs e)
        {
            await App.Current.MainPage.DisplayAlert("Message", "Sensor Setup Succesfully.", "Ok");
        }

        private async void textcell3_Tapped(object sender, EventArgs e)
        {
            await App.Current.MainPage.DisplayAlert("Message", "Buy Camera Sensor.", "Ok");
        }
    }
}

Here we can use the Tapped event for TextCell, on click of TextCell, we can display a simple alert box you can create what you want on button click event.

Output:

Image: TableView example

Now, let’s we can modify this.

Using the content page, we can create a design like a phone setting. We can also create some common styles in the App.Xaml file so we can access it anywhere in the project. You can also add more frames to the design.

App.Xaml

Output:

Image: Custom Screen Settings

Conclusion

In this blog, we have learned how to create a custom screen setting using the Table View and the Content Page. And we also saw how to make the screen setting look fantastic.