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:
- Data: This property is used when displaying data entries.
- Form: This property is used when the table view act as a Form.
- Menu: This property is used when presenting a menu of a selection.
- Settings: This property is used when displaying a list of configuration settings.
Read More: Introducing C# Mark-up For Xamarin.forms
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
Looking to hire Xamarin App Development Company ?
Your Search ends here.
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.