Introduction of Settings View for Xamarin.Forms
Tags: xamarinforms, xamarin, tableview, settings
Published: 2018-04-06 02:55:59

---
title: Introduction of Settings View for Xamarin.Forms
published: true
description: 
tags: xamarin.forms,xamarin,tableview,Settings
---

Though Xamarin.Forms TableView is useful, there aren't enough built-in cells. So I always use a ViewCell, but which makes app performance worse.

In order to solve that, I made some custom native cells and a custom TableView which works these cells effectively.

This library named AiForms.SettingsView is available on NuGet.

## Source

[https://github.com/muak/AiForms.Renderers](https://github.com/muak/AiForms.Renderers)

## Nuget

[https://www.nuget.org/packages/AiForms.SettingsView/](https://www.nuget.org/packages/AiForms.SettingsView/)

## What SettingsView can do.

### General

* To set separator color.
* To set selected cell color.
* To scroll to screen top and bottom.

### Sections

* To set IsVisible each section.
* To set section a footer.
* To set various options of a header and  a footer.
* To use DataTemplate and DataTemplateSelector in a section.
* To reorder items by drag and drop in a section.

### Cells

* To set options of all the cells as SettingsView options at once.
* To set indivisual cell options. (indivisual cell options  is superior to SettingsView options.)
* To set a cell HintText.
* To use an icon  cached in memory at all cells.
* To change corner radius of an icon.
* To use various defined cells.
* To use Xamarin.Forms.ViewCell and the others.

For more information about SettingsView, see [ReadMe.md](https://github.com/muak/AiForms.Renderers/blob/master/README.md).

![](https://thepracticaldev.s3.amazonaws.com/i/1xildlb0rxjqpn28467t.png)

{% youtube FTMOqNILxBE %}

## Built-in Cells

* LabelCell - a cell showing read only text.
* CommandCell - a LabelCell invoked an action.
* ButtonCell - a simple cell invoked an action like a button.
* SwitchCell - a LabelCell equipped a switch
* CheckboxCell - a LabelCell equipped a checkbox.
* NumberPickerCell - a LabelCell calling a number picker.
* TimePickerCell - a LabelCell calling a time picker.
* DatePickerCell - a LabelCell calling a date picker.
* TextPickerCell - a LabelCell calling a text picker.
* PickerCell - a LabelCell calling a multiple select picker.
* EntryCell -  a cell inputing some text.

For more information about built-in Cells, see [ReadMe.md](https://github.com/muak/AiForms.Renderers/blob/master/README.md#cells-1).

## Installation

```sh
Install-Package AiForms.SettingsView
```

You need to install this nuget package to PCL/.NETStandard project and each platform project.

### For iOS project

To use by iOS, you need to write some code in AppDelegate.cs.

```cs
public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Renderers.iOS.SettingsViewInit.Init(); //need to write here

    LoadApplication(new App(new iOSInitializer()));

    return base.FinishedLaunching(app, options);
}
```

## How to write with xaml

```xml
<ContentPage 
	xmlns="http://xamarin.com/schemas/2014/forms" 
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
	xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
	x:Class="Sample.Views.SettingsViewPage">
    
<sv:SettingsView HasUnevenRows="true">
    
    <sv:Section Title="Header1" FooterText="Footer1">
        <sv:CommandCell IconSource="icon.png" IconSize="60,60" IconRadius="30"
            Title="Xam Xamarin" Description="hoge@fuga.com"
            Command="{Binding ToProfileCommand}" CommandParameter="{Binding Parameter}"
            KeepSelectedUntilBack="true"            
        />
        <sv:ButtonCell Title="Toggle Section" TitleColor="{StaticResource TitleTextColor}"
             TitleAlignment="Center" Command="{Binding SectionToggleCommand}" />
        <sv:LabelCell Title="Label" ValueText="value" />
        <sv:SwitchCell Title="Switch" On="true" 
            Description="This is description." />
        <sv:CheckboxCell Title="Checkbox" Checked="true" />
    </sv:Section>

    <sv:Section Title="Header2" FooterText="Footer2" IsVisible="{Binding SctionIsVisible}">
        <sv:PickerCell Title="Favorites" ItemsSource="{Binding ItemsSource}" DisplayMember="Name" MaxSelectedNumber="3" 
        SelectedItems="{Binding SelectedItems}" KeepSelectedUntilBack="true" PageTitle="select 3 items" />
        <sv:NumberPickerCell Title="NumberPicker" Min="0" Max="99" Number="15" PickerTitle="Select number" />
        <sv:TimePickerCell Title="TimePicker" Format="HH:mm" Time="15:30" PickerTitle="Select time" />
        <sv:DatePickerCell Title="DatePicker" Format="yyyy/MM/dd (ddd)" Date="2017/11/11" MinimumDate="2015/1/1" MaximumDate="2018/12/15" TodayText="Today's date"/>
        <sv:EntryCell Title="EntryCell" ValueText="{Binding InputText.Value}" Placeholder="Input text" Keyboard="Email" TextAlignment="End" HintText="{Binding InputError.Value}" />
    </sv:Section>
    
</sv:SettingsView>
</ContentPage>
```

SettingsView properties settings may as well be witten in App.xaml. 
For example...

```xml
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
             x:Class="Sample.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="AccentColor">#FFBF00</Color>
            <Color x:Key="DisabledColor">#E6DAB9</Color>
            <Color x:Key="TitleTextColor">#CC9900</Color>
            <Color x:Key="PaleBackColorPrimary">#F2EFE6</Color>
            <Color x:Key="PaleBackColorSecondary">#F2EDDA</Color>
            <Color x:Key="DeepTextColor">#555555</Color>
            <Color x:Key="NormalTextColor">#666666</Color>
            <Color x:Key="PaleTextColor">#999999</Color>
            <x:Double x:Key="BaseFontSize">12</x:Double>
            <x:Double x:Key="BaseFontSize+">14</x:Double>
            <x:Double x:Key="BaseFontSize++">17</x:Double>
            <x:Double x:Key="BaseFontSize-">11</x:Double>

            <Style TargetType="sv:SettingsView">
                <Setter Property="SeparatorColor" Value="{StaticResource DisabledColor}" />
                <Setter Property="BackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
                <Setter Property="HeaderBackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
                <Setter Property="CellBackgroundColor" Value="{StaticResource AppBackground}" />
                <Setter Property="CellTitleColor" Value="{StaticResource DeepTextColor}" />
                <Setter Property="CellValueTextColor" Value="{StaticResource NormalTextColor}" />
                <Setter Property="CellTitleFontSize" Value="{StaticResource BaseFontSize++}" />
                <Setter Property="CellValueTextFontSize" Value="{StaticResource BaseFontSize}" />
                <Setter Property="CellDescriptionColor" Value="{StaticResource NormalTextColor}" />
                <Setter Property="CellDescriptionFontSize" Value="{StaticResource BaseFontSize-}" />
                <Setter Property="CellAccentColor" Value="{StaticResource AccentColor}" />
                <Setter Property="SelectedColor" Value="#50FFBF00" />
                <Setter Property="HeaderTextColor" Value="{StaticResource TitleTextColor}" />
                <Setter Property="FooterFontSize" Value="{StaticResource BaseFontSize-}" />
                <Setter Property="FooterTextColor" Value="{StaticResource PaleTextColor}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

```
Whereby any SettingsView in App will become the same property setttings.

## Concluding

I would be grateful if you could use this library.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter (@muak_x).

Thank you.