Introduction
Every app has a settings screen, which includes all of your tiny preferences, program version information, open-source license information, Fingerprint authentication in the app, etc. I’ve never given my app’s settings screen a lot of thought. My goal was to always put something together as quickly as possible while avoiding design considerations. So, when I first released my Cadence for iOS and Android, I used the built-in Xamarin for the settings panel.
TableView
TableView is a view that displays scrollable lists of data or options with rows that do not share the same template. TableView, unlike ListView, does not have an ItemsSource, hence items must be manually added as children.
Use Cases
When you need to use TableView, you should:
- display a menu of options
- obtain information in the form of a questionnaire, or
- display data in a variety of formats from one row to the next (e.g. numbers, percentages, and images).
TableView takes care of scrolling and arranging rows into appealing portions, which is a common requirement in the cases above. When accessible, the TableView control uses the underlying corresponding view for each platform, giving it a native look.
Structure
A TableView’s elements are divided into sections. TableRoot is the root of the TableView and is the parent of one or more TableSection instances. A heading and one or more ViewCell instances are included in each TableSection:
<TableView Intent=”Settings”>
<TableRoot>
<TableSection Title=”Ring”>
<SwitchCell Text=”New Voice Mail” />
<SwitchCell Text=”New Mail” On=”true” />
</TableSection>
</TableRoot>
</TableView>
Appearance
The Intent property in TableView can be set to any member of the TableIntent enumeration:
- Data: Data is a type of data that can be used to display entries in a database. For scrolling lists of data, ListView might be a better choice.
- Form: When the TableView is used as a Form, the Form property is used.
- Menu: For providing a menu of options, use the menu tag.
- Settings: When presenting a list of configuration options, utilize the settings property.
The TableIntent value you select may have an impact on how the TableView looks on different platforms. Even if there aren’t any obvious changes, it’s advisable to choose the TableIntent that best reflects how you plan to utilize the table.
Additionally, by setting the TextColor property to a Color, the color of the text displayed for each TableSection can be modified.
Default Template Cell
To make our development easier, we’ve been given some pre-made templates. We can develop an image cell (a cell that contains a picture), a Text cell (a cell that contains text and details), an entry cell (a cell that contains an entry to accept user input), and so on. Let’s put some default cell templates in place.
<TableView>
<TableRoot>
<TableSection Title=”Basic Information”>
<TextCell Text=”Name” Detail=”Umair Hassan” ></TextCell>
<EntryCell Label=”Title” Placeholder=”(this is label)”></EntryCell>
<SwitchCell Text=”Notifications” On=”True”></SwitchCell>
</TableSection>
<TableSection Title=”Settings”>
</TableSection>
</TableRoot>
</TableView>
Built-In Cell
Xamarin is a cross-platform development environment. Cells are built-in to Forms and can be used to collect and show data. Although both ListView and TableView can use the same cells, TableView’s SwitchCell and EntryCell are the most important.
TextCell and ImageCell are described in full in ListView Cell Appearance.
Switch Cell
SwitchCell is the control to utilize when you want to exhibit and capture a true/false or on/off state. It specifies the following characteristics:
Text – the text that will be shown next to the switch.
On – indicates whether the switch is turned on or off.
OnColor –When the switch is in the on position, the color of the switch is called OnColor.
Example Of Switch cell
using System;
using Xamarin.Forms;
namespace FormsGallery
{
class SwitchCellDemoPage : ContentPage
{
public SwitchCellDemoPage()
{
Label header = new Label
{
Text = “SwitchCell”,
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center
};
TableView tableView = new TableView
{
Intent = TableIntent.Form,
Root = new TableRoot
{
new TableSection
{
new SwitchCell
{
Text = “SwitchCell:”
}}}};
// Accomodate iPhone status bar.
this.Padding = new Thickness(10, Device.OnPlatform(20, 1, 0), 10, 5);
// Build the page.
this.Content = new StackLayout
{
Children =
{
header,
tableView
}};
}}}
Entry Cell
When you need to display text data that the user can change, EntryCell comes in handy. It specifies the following characteristics:
- Keyboard: The keyboard that will be displayed while editing. There are options for numeric quantities, email, and phone numbers, among other things. See the API documentation for further information.
- Label: The text that will appear to the left of the text entry field as a label.
- LabelColor: This is the color of the text on the label.
- Placeholder: When the entry field is null or empty, the placeholder text is displayed. When you start typing, this text vanishes.
- Text: The text in the entry area is called text.
- HorizontalTextAlignment: The text’s horizontal alignment. The values are oriented to the center, left, or right. See the API documentation for further information.
- VerticalTextAlignment: The text’s vertical alignment. Start, Center, or End are the possible values.
The Completed event is also exposed by EntryCell, which is triggered when the user presses the ‘done’ button on the keyboard while editing text.
Custom Cell
Custom cells can be used to present and record data in a way that makes sense for your app when the built-in cells aren’t enough. For instance, you might want to show a slider so that a user can adjust the opacity of a picture.
All custom cells must be derived from ViewCell, which is the same base class as the built-in cell kinds.
Example Of Custom Cell
XAML File:
<?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=”DemoTableView.TablePage”
Title=”TableView”>
<TableView Intent=”Settings”>
<TableRoot>
<TableSection Title=”Getting Started”>
<ViewCell>
<StackLayout Orientation=”Horizontal”>
<Image Source=”bulb.png” />
<Label Text=”left”
TextColor=”#f35e20″ />
<Label Text=”right”
HorizontalOptions=”EndAndExpand”
TextColor=”#503026″ />
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</ContentPage>
C# Code:
var table = new TableView();
table.Intent = TableIntent.Settings;
var layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
layout.Children.Add (new Image() { Source = “bulb.png”});
layout.Children.Add (new Label()
{
Text = “left”,
TextColor = Color.FromHex(“#f35e20”),
VerticalOptions = LayoutOptions.Center
});
layout.Children.Add (new Label ()
{
Text = “right”,
TextColor = Color.FromHex (“#503026”),
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.EndAndExpand
});
table.Root = new TableRoot ()
{
new TableSection(“Getting Started”)
{
new ViewCell() {View = layout}
}
};
Content = table;
Conclusion
We will learn about Table View in Xamarin in this tutorial. We’ll create a table view in Xamarin Forms and see how it looks on Android and Windows desktop apps and iOS application. We also learned how to create a good-looking screen using Tableview.
Author Bio: Vinod Satapara – Technical Director, iFour Technolab Pvt. Ltd.
Technocrat and entrepreneur with years of experience building large scale enterprise web, cloud and mobile applications using latest technologies like ASP.NET, CORE, .NET MVC, Angular and Blockchain. Keen interest in addressing business problems using latest technologies and help organization to achieve goals.
Hire Asp.net developers from iFour Technolab to get your requirements done.