This section contains getting started tutorials that provide a quick overview for working with our components. The goal is to get you up and running as soon as possible.

Grid

DataGrid For iOS

Data Visualization

Chart

SunburstChart

Sparkline

DateTime RangeNavigator

Schedule

Kanban For Xamarin

Kanban For Android

Layout

File Format

PDF Viewer For Forms (Preview)

PDF Viewer For iOS (Preview)

PDF Viewer For Android (Preview)

Notification

Editors

Image Editor (Preview)

Navigation

Carousel

Rotator

NavigationDrawer

RadialMenu For iOS

Miscellaneous

DataSource

DataSource For Android

DataSource For iOS

Calculate

#DataGrid

This section provides a quick overview for working with Essential DataGrid for Xamarin.Forms. We will walk through the entire process of creating a real world datagrid.

This is how the final output will look like on iOS, Android and Windows Phone devices. You can also download the entire source code of this demo from here.

Getting started

This section provides a quick overview of the working with Essential DataGrid for Xamarin.Forms.

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the respective projects as follows:

PCL project

pcl\Syncfusion.Data.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfDataGrid.XForms.dll
pcl\Syncfusion.SfNumericTextBox.XForms.dll

Android project

pcl\Syncfusion.Data.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfDataGrid.XForms.dll
pcl\Syncfusion.SfNumericTextBox.XForms.dll
android\Syncfusion.SfDataGrid.XForms.Android.dll
android\Syncfusion.SfNumericTextBox.Android.dll
android\Syncfusion.SfNumericTextBox.XForms.Android.dll

iOS project

pcl\Syncfusion.Data.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfDataGrid.XForms.dlll
pcl\Syncfusion.SfNumericTextBox.XForms.dll
ios\Syncfusion.SfDataGrid.XForms.iOS.dll
ios\Syncfusion.SfNumericTextBox.iOS.dll
ios\Syncfusion.SfNumericTextBox.XForms.iOS.dll

UWP project

pcl\Syncfusion.Data.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfDataGrid.XForms.dll
pcl\Syncfusion.SfNumericTextBox.XForms.dll
uwp\Syncfusion.SfDataGrid.XForms.UWP.dll
uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfNumericTextBox.XForms.UWP.dll

Currently an additional step is required for UWP and iOS projects. We need to initialize the DataGrid renderer as shown below.

Call the SfDataGridRenderer.Init() in MainPage constructor of the UWP project as shown below

public MainPage()
{
    …
    SfDataGridRenderer.Init();
    …
}

Call the SfDataGridRenderer.Init() in the FinishedLaunching overridden method of the AppDelegate class in the iOS project as follows.

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    …
    SfDataGridRenderer.Init();
    …
}

Create your first DataGrid in Xamarin.Forms

The DataGrid control can be configured entirely in C# code or by using XAML markup.

1.Create new BlankApp (Xamarin.Forms.Portable) application in Xamarin Studio or Visual Studio.

2.Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as OrderInfo.cs file.

public class OrderInfo
{
    private int orderID;
    private string customerID;
    private string customer;
    private string shipCity;
    private string shipCountry;

    public int OrderID {
        get { return orderID; }
        set { this.orderID = value; }
    }

    public string CustomerID {
        get { return customerID; }
        set { this.customerID = value; }
    }

    public string ShipCountry {
        get { return shipCountry; }
        set { this.shipCountry = value; }
    }

    public string Customer {
        get { return this.customer; }
        set { this.customer = value; }
    }

    public string ShipCity {
        get { return shipCity; }
        set { this.shipCity = value; }
    }

    public OrderInfo (int orderId, string customerId, string country, string customer, string shipCity)
    {
        this.OrderID = orderId;
        this.CustomerID = customerId;
        this.Customer = customer;
        this.ShipCountry = country;
        this.ShipCity = shipCity;
    }
}

3.Add the following code example in a newly created class file and save it as OrderInfoRepository.cs file.

public class OrderInfoRepository
{
    private ObservableCollection<OrderInfo> orderInfo;
    public ObservableCollection<OrderInfo> OrderInfoCollection {
        get { return orderInfo; }
        set { this.orderInfo = value; }
    }
	
    public OrderInfoRepository ()
    {
        orderInfo = new ObservableCollection<OrderInfo> ();
        this.GenerateOrders ();
    }
	
    private void GenerateOrders ()
    {
        orderInfo.Add (new OrderInfo (1001, "Maria Anders", "Germany", "ALFKI", "Berlin"));
        orderInfo.Add (new OrderInfo (1002, "Ana Trujilo", "Mexico", "ANATR", "México D.F."));
        orderInfo.Add (new OrderInfo (1003, "Ant Fuller", "Mexico", "ANTON", "México D.F."));
        orderInfo.Add (new OrderInfo (1004, "Thomas Hardy", "UK", "AROUT", "London"));
        orderInfo.Add (new OrderInfo (1005, "Tim Adams", "Sweden", "BERGS", "Luleå"));
        orderInfo.Add (new OrderInfo (1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim"));
        orderInfo.Add (new OrderInfo (1007, "Andrew Fuller", "France", "BLONP", "Strasbourg"));
        orderInfo.Add (new OrderInfo (1008, "Martin King", "Spain", "BOLID", "Madrid"));
        orderInfo.Add (new OrderInfo (1009, "Lenny Lin", "France", "BONAP", "Marseille"));
        orderInfo.Add (new OrderInfo (1010, "John Carter", "Canada", "BOTTM", "Tsawassen"));
        orderInfo.Add (new OrderInfo (1011, "Lauro King", "UK", "AROUT", "London"));
        orderInfo.Add (new OrderInfo (1012, "Anne Wilson", "Germany", "BLAUS", "Mannheim"));
		orderInfo.Add (new OrderInfo (1013, "Alfki Kyle", "France", "BLONP", "Strasbourg"));
        orderInfo.Add (new OrderInfo (1014, "Gina Irene", "UK", "AROUT", "London"));
    }
}

4.You can set the data source of the DataGrid by using the SfDataGrid.ItemsSource property as follows.

[C#]

public class App : Application
{
    SfDataGrid sfGrid;
    public App()
    {
        sfGrid = new SfDataGrid();
        sfGrid.ItemsSource = new OrderInfoRepository().OrderInfoCollection;
        MainPage = new ContentPage { Content = sfGrid; };
    }
}

[XAML]

<xmlns:sfgrid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"

<sfgrid:SfDataGrid x:Name="dataGrid"
                   ItemsSource="{Binding OrderInfoCollection}" />

5.By default, Essential DataGrid for Xamarin.Forms automatically creates columns for all the properties in the data source. 6.Execute the application to render the following output.

7.You can also define the columns manually by setting the SfDataGrid.AutoGenerateColumns property to false and by adding the GridColumn objects to the SfDataGrid.Columns collection. The following code example illustrates this.

[C#]

sfGrid.AutoGenerateColumns = false;

GridTextColumn orderIdColumn = new GridTextColumn ();
orderIdColumn.MappingName = "OrderID";
orderIdColumn.HeaderText = "Order ID";

GridTextColumn customerIdColumn = new GridTextColumn ();
customerIdColumn.MappingName = "CustomerID";
customerIdColumn.HeaderText = "Customer ID";

GridTextColumn customerColumn = new GridTextColumn ();
customerColumn.MappingName = "Customer";
customerColumn.HeaderText = "Customer";

GridTextColumn countryColumn = new GridTextColumn ();
countryColumn.MappingName = "ShipCountry";
countryColumn.HeaderText = "Ship Country";

sfGrid.Columns.Add (orderIdColumn);
sfGrid.Columns.Add (customerIdColumn);
sfGrid.Columns.Add (customerColumn);
sfGrid.Columns.Add (countryColumn);

[XAML]

<sfgrid:SfDataGrid.Columns x:TypeArguments="sfgrid:Columns">

    <sfgrid:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />
    <sfgrid:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID" />
    <sfgrid:GridTextColumn MappingName="Customer" />
    <sfgrid:GridTextColumn HeaderText="Ship Country" MappingName="ShipCountry" />

</sfgrid:SfDataGrid.Columns>

8.Essential DataGrid for Xamarin.Forms allows you to apply sorting on its data by setting AllowSorting to true. The following code illustrates this.

[C#]

sfGrid.AllowSorting = true;

[XAML]

<sfgrid:SfDataGrid AllowSorting="True" />

9.Execute the application and touch the header cell to sort the data and the following output is displayed

10.You can also specify the column to be sorted from the code behind by adding the column to the SfDataGrid.SortColumnDescriptions collection. The following code illustrates this.

[C#]

sfGrid.SortColumnDescriptions.Add (new SortColumnDescription () { ColumnName = "CustomerID" });

[XAML]

<sfgrid:SfDataGrid.SortColumnDescriptions>
    <sfgrid:SortColumnDescription ColumnName="CustomerID" />
</sfgrid:SfDataGrid.SortColumnDescriptions>

11.You can group a column by adding the column to the SfDataGrid.GroupColumnDescriptions collection. Following code example illustrates this.

[C#]

sfGrid.GroupColumnDescriptions.Add (new GroupColumnDescription (){ ColumnName = "ShipCountry" });

[XAML]

<sfgrid:SfDataGrid.GroupColumnDescriptions>
    <sfgrid:GroupColumnDescription ColumnName="ShipCountry" />
</sfgrid:SfDataGrid.GroupColumnDescriptions>

12.Execute the application to render the following output.

13.You can filter the records in the view by using the SfDataGrid.View.Filter property. You have to call SfDataGrid.View.RefreshFilter() method after assigning the Filter property for the records to get filtered in view. The following code example illustrates this.

[C#]

//Create a SearchBar in the layout and assign its text to a property. When the property gets changed, run the below code for filtering the view.

if (sfGrid.View != null) {
    this.sfGrid.View.Filter = viewModel.FilerRecords;
    this.sfGrid.View.RefreshFilter ();
} 

//create a method FilterRecords in the viewModel

public bool FilerRecords (object orderInfo)
{
    //your code

    //For Example
    var order = orderInfo as OrderInfo;
    if (order.CustomerID.Contains ("An"))
        return true;
    false;
}

#DataGrid for Xamarin.Android

This section provides a quick overview for working with Essential DataGrid for Xamarin.Android. We will walk through the entire process of creating a real world datagrid.

This is how the final output will look like on Android devices. You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

This topic describes about the assembly that is required in your Android application when you use SfDataGrid. After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders.

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Syncfusion.Linq.Android.dll
Syncfusion.SfDataGrid.Android.dll
Syncfusion.GridCommon.Portable.dll

Create your first DataGrid in Xamarin Android

1.Create a new Android application in Xamarin Studio.

2.Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as OrderInfo.cs file.

public class OrderInfo
{
    private int orderID;
    private string customerID;
    private string customer;
    private string shipCity;
    private string shipCountry;

    public int OrderID {
        get { return orderID; }
        set { this.orderID = value; }
    }

    public string CustomerID {
        get { return customerID; }
        set { this.customerID = value; }
    }

    public string ShipCountry {
        get { return shipCountry; }
        set { this.shipCountry = value; }
    }

    public string Customer {
        get { return this.customer; }
        set { this.customer = value; }
    }

    public string ShipCity {
        get { return shipCity; }
        set { this.shipCity = value; }
    }

    public OrderInfo (int orderId, string customerId, string country, string customer, string shipCity)
    {
        this.OrderID = orderId;
        this.CustomerID = customerId;
        this.Customer = customer;
        this.ShipCountry = country;
        this.ShipCity = shipCity;
    }
}

3.Add the following code example in a newly created class file and save it as OrderInfoRepository.cs file

public class OrderInfoRepository
{
    private ObservableCollection<OrderInfo> orderInfo;
    public ObservableCollection<OrderInfo> OrderInfoCollection {
        get { return orderInfo; }
        set { this.orderInfo = value; }
    }
    public OrderInfoRepository ()
    {
        orderInfo = new ObservableCollection<OrderInfo> ();
        this.GenerateOrders ();
    }
    private void GenerateOrders ()
    {
        orderInfo.Add (new OrderInfo (1001, "Maria Anders", "Germany", "ALFKI", "Berlin"));
        orderInfo.Add (new OrderInfo (1002, "Ana Trujilo", "Mexico", "ANATR", "México D.F."));
        orderInfo.Add (new OrderInfo (1003, "Ant Fuller", "Mexico", "ANTON", "México D.F."));
        orderInfo.Add (new OrderInfo (1004, "Thomas Hardy", "UK", "AROUT", "London"));
        orderInfo.Add (new OrderInfo (1005, "Tim Adams", "Sweden", "BERGS", "Luleå"));
        orderInfo.Add (new OrderInfo (1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim"));
        orderInfo.Add (new OrderInfo (1007, "Andrew Fuller", "France", "BLONP", "Strasbourg"));
        orderInfo.Add (new OrderInfo (1008, "Martin King", "Spain", "BOLID", "Madrid"));
        orderInfo.Add (new OrderInfo (1009, "Lenny Lin", "France", "BONAP", "Marseille"));
        orderInfo.Add (new OrderInfo (1010, "John Carter", "Canada", "BOTTM", "Tsawassen"));
        orderInfo.Add (new OrderInfo (1011, "Lauro King", "UK", "AROUT", "London"));
        orderInfo.Add (new OrderInfo (1012, "Anne Wilson", "Germany", "BLAUS", "Mannheim"));
    }
}

4.You can set the data source of the DataGrid by using the SfDataGrid.ItemsSource property as follows.

[Activity (Label = "GettingStarted", MainLauncher = true)]
public class MainActivity : Activity
{
    SfDataGrid sfGrid;
    protected override void OnCreate (Bundle bundle)
    {
        base.OnCreate (bundle);
        SetContentView (Resource.Layout.Main);
        RelativeLayout layout = (RelativeLayout)FindViewById (Resource.Id.Relative);
        sfGrid = new SfDataGrid (BaseContext);
        sfGrid.ItemsSource = (new OrderInfoRepository ().OrderInfoCollection);
        layout.AddView (sfGrid);
    }
}

5.By default, the Essential DataGrid for Android automatically creates columns for all properties in the data source.

6.Run the application to render the following output.

7.You can also define the columns manually by setting the SfDataGrid.AutoGenerateColumns property to false and add the GridColumn objects to the SfDataGrid.Columns collection. The following code example illustrates this.

sfGrid.AutoGenerateColumns = false;

GridTextColumn orderIdColumn = new GridTextColumn ();
orderIdColumn.MappingName = "OrderID";
orderIdColumn.HeaderText = "Order ID";

GridTextColumn customerIdColumn = new GridTextColumn ();
customerIdColumn.MappingName = "CustomerID";
customerIdColumn.HeaderText = "Customer ID";

GridTextColumn customerColumn = new GridTextColumn ();
customerColumn.MappingName = "Customer";
customerColumn.HeaderText = "Customer";

GridTextColumn countryColumn = new GridTextColumn ();
countryColumn.MappingName = "ShipCountry";
countryColumn.HeaderText = "Ship Country";

sfGrid.Columns.Add (orderIdColumn);
sfGrid.Columns.Add (customerIdColumn);
sfGrid.Columns.Add (customerColumn);
sfGrid.Columns.Add (countryColumn);

8.Essential DataGrid for Android allows you to apply sorting on its data by setting AllowSorting to true. The following code illustrates this.

sfGrid.AllowSorting = true;

9.Run the application and touch the header cell to sort the data and the following output is displayed.

10.You can also specify the column to be sorted from the code behind by adding the column to the SfDataGrid.SortColumnDescriptions collection. The following code illustrates this.

sfGrid.SortColumnDescriptions.Add (new SortColumnDescription () { ColumnName = "OrderID" });

11.Essential DataGrid for Android allows you to group a column by adding the column to the SfDataGrid.GroupColumnDescriptions collection. The following code example illustrates this.

sfGrid.GroupColumnDescriptions.Add (new GroupColumnDescription (){ ColumnName = "ShipCountry" });

12.Run the application to render the following output.

13.Essential DataGrid for Android allows you to filter the records in the view by using the SfDataGrid.View.Filter property. You have to call SfDataGrid.View.RefreshFilter() method after assigning the Filter property for the records to get filtered in view. The following code example illustrates this.

//Create an EditText in the layout and assign its text to a property. When the property gets changed, run the below code for filtering the view.

if (sfGrid.View != null) {
    this.sfGrid.View.Filter = viewModel.FilerRecords;
    this.sfGrid.View.RefreshFilter ();
} 

//create a method FilterRecords in the viewModel

public bool FilerRecords (object orderInfo)
{
    //your code

    //For Example
    var order = orderInfo as OrderInfo;
    if (order.CustomerID.Contains ("An"))
        return true;
    false;
}

#DataGrid for Xamarin.iOS

This section provides a quick overview for working with Essential DataGrid for Xamarin.iOS. We will walk through the entire process of creating a real world datagrid.

This is how the final output will look like on iOS devices. You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

This topic describes about the assembly that is required in your iOS application, when you use SfDataGrid. After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Syncfusion.Linq.iOS.dll
Syncfusion.SfDataGrid.iOS.dll
Syncfusion.GridCommon.Portable.dll

Create your first DataGrid in Xamarin.iOS

1.Create new iOS application in Xamarin Studio.

2.Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as OrderInfo.cs file.

public class OrderInfo
{
    private int orderID;
    private string customerID;
    private string customer;
    private string shipCity;
    private string shipCountry;

    public int OrderID {
        get { return orderID; }
        set { this.orderID = value; }
    }

    public string CustomerID {
        get { return customerID; }
        set { this.customerID = value; }
    }

    public string ShipCountry {
        get { return shipCountry; }
        set { this.shipCountry = value; }
    }

    public string Customer {
        get { return this.customer; }
        set { this.customer = value; }
    }

    public string ShipCity {
        get { return shipCity; }
        set { this.shipCity = value; }
    }

    public OrderInfo (int orderId, string customerId, string country, string customer, string shipCity)
    {
        this.OrderID = orderId;
        this.CustomerID = customerId;
        this.Customer = customer;
        this.ShipCountry = country;
        this.ShipCity = shipCity;
    }
}

3.Add the following code example in a newly created class file and save it as OrderInfoRepository.cs file.

public class OrderInfoRepository
{
    private ObservableCollection<OrderInfo> orderInfo;
    public ObservableCollection<OrderInfo> OrderInfoCollection {
        get { return orderInfo; }
        set { this.orderInfo = value; }
    }
    public OrderInfoRepository ()
    {
        orderInfo = new ObservableCollection<OrderInfo> ();
        this.GenerateOrders ();
    }
    private void GenerateOrders ()
    {
        orderInfo.Add (new OrderInfo (1001, "Maria Anders", "Germany", "ALFKI", "Berlin"));
        orderInfo.Add (new OrderInfo (1002, "Ana Trujilo", "Mexico", "ANATR", "México D.F."));
        orderInfo.Add (new OrderInfo (1003, "Ant Fuller", "Mexico", "ANTON", "México D.F."));
        orderInfo.Add (new OrderInfo (1004, "Thomas Hardy", "UK", "AROUT", "London"));
        orderInfo.Add (new OrderInfo (1005, "Tim Adams", "Sweden", "BERGS", "Luleå"));
        orderInfo.Add (new OrderInfo (1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim"));
        orderInfo.Add (new OrderInfo (1007, "Andrew Fuller", "France", "BLONP", "Strasbourg"));
        orderInfo.Add (new OrderInfo (1008, "Martin King", "Spain", "BOLID", "Madrid"));
        orderInfo.Add (new OrderInfo (1009, "Lenny Lin", "France", "BONAP", "Marseille"));
        orderInfo.Add (new OrderInfo (1010, "John Carter", "Canada", "BOTTM", "Tsawassen"));
        orderInfo.Add (new OrderInfo (1011, "Lauro King", "UK", "AROUT", "London"));
        orderInfo.Add (new OrderInfo (1012, "Anne Wilson", "Germany", "BLAUS", "Mannheim"));
    }
}

4.You can set the data source of the DataGrid by using the SfDataGrid.ItemsSource property as follows.

public partial class GettingStartedViewController : UIViewController
{
    SfDataGrid sfGrid;

    static bool UserInterfaceIdiomIsPhone {
        get { return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone; }
    }

    public GettingStartedViewController ()
        : base (UserInterfaceIdiomIsPhone ? "GettingStartedViewController_iPhone" : "GettingStartedViewController_iPad", null)
    {
        sfGrid = new SfDataGrid ();
        sfGrid.ItemsSource = (new OrderInfoRepository ().OrderInfoCollection);
        sfGrid.HeaderRowHeight = 45;
        sfGrid.RowHeight = 45;
    }

    public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();
        sfGrid.Frame = new CGRect (0, 30, View.Frame.Width, View.Frame.Height);
        View.AddSubview (sfGrid);
    }
}

5.By default, the Essential DataGrid for iOS automatically creates columns for all the properties in the data source.

6.Run the application to render the following output.

sfGrid.AutoGenerateColumns = false;

GridTextColumn orderIdColumn = new GridTextColumn ();
orderIdColumn.MappingName = "OrderID";
orderIdColumn.HeaderText = "Order ID";

GridTextColumn customerIdColumn = new GridTextColumn ();
customerIdColumn.MappingName = "CustomerID";
customerIdColumn.HeaderText = "Customer ID";

GridTextColumn customerColumn = new GridTextColumn ();
customerColumn.MappingName = "Customer";
customerColumn.HeaderText = "Customer";

GridTextColumn countryColumn = new GridTextColumn ();
countryColumn.MappingName = "ShipCountry";
countryColumn.HeaderText = "Ship Country";

sfGrid.Columns.Add (orderIdColumn);
sfGrid.Columns.Add (customerIdColumn);
sfGrid.Columns.Add (customerColumn);
sfGrid.Columns.Add (countryColumn);

8.Essential DataGrid for iOS allows you to apply sorting on its data by setting AllowSorting to true. The following code illustrates this.

sfGrid.AllowSorting = true;

9.Run the application and touch the header cell to sort the data and the following output is displayed.

10.You can also specify the column to be sorted from the code behind by adding the column to the SfDataGrid.SortColumnDescriptions collection. The following code illustrates this.

sfGrid.SortColumnDescriptions.Add (new SortColumnDescription () { ColumnName = "OrderID" });

11.Essential DataGrid for iOS allows you to group a column by adding the column to the SfDataGrid.GroupColumnDescriptions collection. Following code example illustrates this.

sfGrid.GroupColumnDescriptions.Add (new GroupColumnDescription (){ ColumnName = "ShipCountry" });

12.Run the application to render the following output.

13.Essential DataGrid for iOS allows you to filter the records in the view by using the SfDataGrid.View.Filter property. You have to call SfDataGrid.View.RefreshFilter() method after assigning the Filter property for the records to get filtered in view. The following code example illustrates this.

//Create a UITextView in the layout and assign its text to a property. When the property gets changed, run the below code for filtering the view. 

if (sfGrid.View != null) {
    this.sfGrid.View.Filter = viewModel.FilerRecords;
    this.sfGrid.View.RefreshFilter ();
} 

//create a method FilterRecords in the viewModel

public bool FilerRecords (object orderInfo)
{
    //your code

    //For Example
    var order = orderInfo as OrderInfo;
    if (order.CustomerID.Contains ("An"))
        return true;
    false;
}

#ListView

This section provides a quick overview for working with Essential ListView for Xamarin.Forms. We will walk through the entire process of creating a real world ListView.

This is how the ListView will look like on iOS, Android and Windows devices.

Getting started

This section provides a quick overview of the working with Essential ListView for Xamarin.Forms.

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the respective projects as follows:

PCL project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.DataSource.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfListView.XForms.dll

Android project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.DataSource.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfListView.XForms.dll
android\Syncfusion.SfListView.XForms.Android.dll

iOS project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.DataSource.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfListView.XForms.dlll
ios\Syncfusion.SfListView.XForms.iOS.dll

UWP project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.DataSource.Portable.dll
pcl\Syncfusion.GridCommon.Portable.dll
pcl\Syncfusion.SfListView.XForms.dll
uwp\Syncfusion.SfListView.XForms.UWP.dll

Currently an additional step is required for iOS and UWP projects. We need to initialize the ListView renderer for iOS and UWP platforms as shown below.

iOS

Call the SfListViewRenderer.Init() in the FinishedLaunching overridden method of the AppDelegate class in the iOS project as follows.

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    …
    SfListViewRenderer.Init();
    …
}

Universal Windows Platform (UWP)

Call the SfListViewRenderer.Init() in the MainPage constructor before the LoadApplication is called, in the UWP project as follows.

public MainPage()
{
    …
    SfListViewRenderer.Init();
    LoadApplication (new App ());
    …
}

Create your first ListView in Xamarin.Forms

The ListView control can be configured entirely in C# code or by using XAML markup.

1.Create new BlankApp (Xamarin.Forms.Portable) application in Xamarin Studio or Visual Studio.

2.Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as BookInfo.cs file.

public class BookInfo : INotifyPropertyChanged
{
    private string bookName;
    private string bookDesc;

    public BookInfo()
    {

    }
	
    public string BookName
    {
        get { return bookName; }
        set
        {
            bookName = value;
            OnPropertyChanged("BookName");
        }
    }

    public string BookDescription
    {
        get { return bookDesc; }
        set
        {
            bookDesc = value;
            OnPropertyChanged("BookDescription");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string name)
    {
        if (this.PropertyChanged != null)
           this.PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
}

3.Add the following code example in a newly created class file and save it as BookInfoRepository.cs file.

public class BookInfoRepository
{
    private ObservableCollection<BookInfo> bookInfo;

    public ObservableCollection<BookInfo> BookInfo
    {
        get { return bookInfo; }
        set { this.bookInfo = value; }
    }

    public BookInfoRepository()
    {
        GenerateBookInfo();
    }

    internal void GenerateBookInfo()
    {
        bookInfo = new ObservableCollection<BookInfo>();
        bookInfo.Add(new BookInfo() { BookName = "Object-Oriented Programming in C#", BookDescription = "Object-oriented programming is the de facto programming paradigm" });
        bookInfo.Add(new BookInfo() { BookName = "C# Code Contracts", BookDescription = "Code Contracts provide a way to convey code assumptions" });
        bookInfo.Add(new BookInfo() { BookName = "Machine Learning Using C#", BookDescription = "You’ll learn several different approaches to applying machine learning" });
        bookInfo.Add(new BookInfo() { BookName = "Neural Networks Using C#", BookDescription = "Neural networks are an exciting field of software development" });
        bookInfo.Add(new BookInfo() { BookName = "Visual Studio Code", BookDescription = "It is a powerful tool for editing code and serves for end-to-end programming" });
        bookInfo.Add(new BookInfo() { BookName = "Android Programming", BookDescription = "It is provides a useful overview of the Android application lifecycle" });
        bookInfo.Add(new BookInfo() { BookName = "iOS Succinctly", BookDescription = "It is for developers looking to step into frightening world of iPhone" });
        bookInfo.Add(new BookInfo() { BookName = "Visual Studio 2015", BookDescription = "The new version of the widely-used integrated development environment" });
        bookInfo.Add(new BookInfo() { BookName = "Xamarin.Forms", BookDescription = "Its creates mappings from its C# classes and controls directly" });
        bookInfo.Add(new BookInfo() { BookName = "Windows Store Apps", BookDescription = "Windows Store apps present a radical shift in Windows development" });
        bookInfo.Add(new BookInfo() { BookName = "Agile Software Development", BookDescription = "Learning new development processes can be difficult" });
        bookInfo.Add(new BookInfo() { BookName = "Assembly Language", BookDescription = "Assembly language is as close to writing machine code" });
        bookInfo.Add(new BookInfo() { BookName = "Cryptography in .NET", BookDescription = "Cryptography is used throughout software to protect all kinds of information" });
        bookInfo.Add(new BookInfo() { BookName = "Entity Framework Code First", BookDescription = "Follow author Ricardo Peres as he introduces the newest development mode" });
        bookInfo.Add(new BookInfo() { BookName = "Localization for .NET", BookDescription = "Learn to write applications that support different languages and cultures" });
    }
}

4.You can initialize the SfListView and set the data source by using the SfListView.ItemsSource property as follows.

[XAML]

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:GettingStarted;assembly=GettingStarted"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="GettingStarted.Contentpage">

  <ContentPage.BindingContext>
    <local:BookInfoRepository />
  </ContentPage.BindingContext>

  <syncfusion:SfListView x:Name="listView" 
                   ItemsSource="{Binding BookInfo}"
                   ItemSize="100">
    <syncfusion:SfListView.ItemTemplate>
      <DataTemplate>
        <Grid Padding="10">
          <Grid.RowDefinitions>
            <RowDefinition Height="0.4*" />
            <RowDefinition Height="0.6*" />
          </Grid.RowDefinitions>
          <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="21" />
          <Label Grid.Row="1" Text="{Binding BookDescription}" FontSize="15"/>
        </Grid>
      </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
  </syncfusion:SfListView>
</ContentPage>

5.Execute the application to render the following output. You can also download the entire source code of this demo from here

#DataSource

Getting started

Assembly deployment

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the pcl project as follows:

PCL project

pcl\Syncfusion.DataSource.Portable.dll

Creating your first DataSource in Xamarin.Forms This is how the final output will look like on iOS, Android and Windows Phone devices. You can also download the entire source code of this demo from here.

Create new BlankApp (Xamarin.Forms.Portable) application in Xamarin Studio or Visual Studio.
Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as Contacts.cs file.

public class Contacts : INotifyPropertyChanged
{
    private string contactName;

    public Contacts(string name)
    {
        contactName = name;
    }

    public string ContactName
    {
        get { return contactName; }
        set
        {
            if (contactName != value)
            {
                contactName = value;
                this.RaisedOnPropertyChanged("ContactName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisedOnPropertyChanged(string _PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
        }
    }
}

4.Add the following code example in a newly created class file and save it as ContactList.cs file.

public class ContactsList : ObservableCollection<Contacts>, INotifyPropertyChanged
{
    public ContactsList()
    {
        foreach (var cusName in CustomerNames)
        {
            var contact = new Contacts(cusName);
            this.Add(contact);
        }
    }
    string[] CustomerNames = new string[] {
    "Kyle",
    "Gina",
    "Irene",
    "Katie",
    "Michael",
    "Oscar",
    "Ralph",
    "Torrey",
    "William",
    "Bill",
    "Daniel",
    "Frank",
    "Brenda",
    "Danielle",
    "Fiona",
    "Howard",
    "Jack",
    "Larry",
    };
}

5.You can set the source of the DataSource by using the DataSource.Source property as follows. Now you can bind the DataSource.DisplayItems as ItemsSource for any data bound control.

[C#]

public App()
{
    DataSource dataSource = new DataSource();
    dataSource.Source = new ContactsList();
}

Sorting

DataSource also allows to sort the bound source by using the DataSource.SortDescriptors property. You can create a SortDescriptor for the property to be sorted and add it in the DataSource.SortDescriptors collection. SortDescriptor object holds following three properties:

PropertyName: Name of the sorted property.
Direction: An object of type ListSortDirection defines the sorting direction.
Comparer: Comparer to be applied in when sorting take place

The following code illustrates this.

[C#]

dataSource.SortDescriptors.Add(new SortDescriptor("ContactName"));

Grouping

DataSource also allows to sort the bound source by using the DataSource.GroupDescriptors property. You can create a GroupDescriptor for the property to be grouped and add it in the DataSource.GroupDescriptors collection. GroupDescriptor object holds following two properties:

PropertyName: Name of the grouped property.
KeySelector: Sets the key selector for grouping
Comparer: Comparer to be applied in when sorting take place The following code example illustrates this without Key Selector.

[C#]

dataSource.GroupDescriptors.Add(new GroupDescriptor("ContactName"));

The following code example illustrates this with Key Selector.

[C#]

    dataSource.GroupDescriptors.Add(new GroupDescriptor() 
    {
        PropertyName = "ContactName",
        KeySelector = (object obj1) =>
        {
            var item = (obj1 as Contacts);
            return item.ContactName[0].ToString();
        }
    });

Binding DataSource to a ListView

Please refer the below code example that illustrates binding the created DataSource to a ListView control.

[C#]

public App()
{
    DataSource dataSource = new DataSource();
    dataSource.Source = new ContactsList();
    dataSource.SortDescriptors.Add(new SortDescriptor("ContactName"));
    dataSource.GroupDescriptors.Add(new GroupDescriptor() 
    {
        PropertyName = "ContactName",
        KeySelector = (object obj1) =>
        {
            var item = (obj1 as Contacts);
            return item.ContactName[0].ToString();
        }
    });

  StackLayout stack = new StackLayout();
    stack.Children.Add(new Label()
    {
        TextColor = Color.Black,
        FontSize = 14,
        HeightRequest = 50,
        Text ="Contact List",
        HorizontalTextAlignment = TextAlignment.Center,
        VerticalTextAlignment = TextAlignment.Center,
        BackgroundColor = Color.Gray
    });
           
    listView = new ListView();
    listView.ItemTemplate = new DataTemplate(() =>
    {
        var label = new Label()
        {
            TextColor = Color.Black,
            FontSize = 12,
            VerticalTextAlignment = TextAlignment.Center,
            BackgroundColor = Color.White,
        };
        label.SetBinding(Label.TextProperty, new Binding("ContactName"));
        var viewCell = new ViewCell() { View = label };
        viewCell.BindingContextChanged += ViewCell_BindingContextChanged;
        return viewCell;
    });
    listView.ItemsSource = dataSource.DisplayItems;
    stack.Children.Add(listView);
    MainPage = new ContentPage { Content = stack };
    Device.OnPlatform(iOS:() => MainPage.Padding = new Thickness(0, 20, 0, 0));
}

private void ViewCell_BindingContextChanged(object sender, EventArgs e)
{
    var viewCell = sender as ViewCell;
    if (viewCell.BindingContext is GroupResult)
    {
        var label = new Label()
        {
            TextColor = Color.Black,
            FontSize = 14,
            HeightRequest = 50,
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalTextAlignment = TextAlignment.Center,
            BackgroundColor = Color.Gray
        };
        label.SetBinding(Label.TextProperty, new Binding("Key"));
        viewCell.View = label;
    }
}

#DataSource for Xamarin.Android

Getting started

Assembly deployment

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the android project as follows:

PCL project

pcl\Syncfusion.DataSource.Portable.dll

Creating your first DataSource in Xamarin.Android This is how the final output will look like. You can also download the entire source code of this demo from here.

Create new BlankApp (Xamarin.Android) application in Xamarin Studio or Visual Studio.
Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as Contacts.cs file.

public class Contacts : INotifyPropertyChanged
{
    private string contactName;

    public Contacts(string name)
    {
        contactName = name;
    }

    public string ContactName
    {
        get { return contactName; }
        set
        {
            if (contactName != value)
            {
                contactName = value;
                this.RaisedOnPropertyChanged("ContactName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisedOnPropertyChanged(string _PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
        }
    }
}

4.Add the following code example in a newly created class file and save it as ContactList.cs file.

public class ContactsList : ObservableCollection<Contacts>, INotifyPropertyChanged
{
    public ContactsList()
    {
        foreach (var cusName in CustomerNames)
        {
            var contact = new Contacts(cusName);
            this.Add(contact);
        }
    }
    string[] CustomerNames = new string[] {
    "Kyle",
    "Gina",
    "Irene",
    "Katie",
    "Michael",
    "Oscar",
    "Ralph",
    "Torrey",
    "William",
    "Bill",
    "Daniel",
    "Frank",
    "Brenda",
    "Danielle",
    "Fiona",
    "Howard",
    "Jack",
    "Larry",
    };
}

5.You can set the source of the DataSource by using the DataSource.Source property as follows. Now you can bind the DataSource.DisplayItems as ItemsSource for any data bound control.

[C#]

public App()
{
    DataSource dataSource = new DataSource();
    dataSource.Source = new ContactsList();
}

Sorting

PropertyName: Name of the sorted property.
Direction: An object of type ListSortDirection defines the sorting direction.
Comparer: Comparer to be applied in when sorting take place

The following code illustrates this.

[C#]

dataSource.SortDescriptors.Add(new SortDescriptor("ContactName"));

Grouping

PropertyName: Name of the grouped property.
KeySelector: Sets the key selector for grouping
Comparer: Comparer to be applied in when sorting take place The following code example illustrates this without Key Selector.

[C#]

dataSource.GroupDescriptors.Add(new GroupDescriptor("ContactName"));

The following code example illustrates this with Key Selector.

[C#]

    dataSource.GroupDescriptors.Add(new GroupDescriptor() 
    {
        PropertyName = "ContactName",
        KeySelector = (object obj1) =>
        {
            var item = (obj1 as Contacts);
            return item.ContactName[0].ToString();
        }
    });

Binding DataSource to a ListView

Please refer the below code example that illustrates binding the created DataSource to a ListView control.

Add the following code example in a newly created class file and save it as ContactsAdapter.cs file.

[C#]

public class ContactsAdapter : BaseAdapter<object>
{
    DataSource DataSource;
    private Context context;
    public ContactsAdapter(DataSource dataSource, Context cntxt)
        : base()
    {
        this.DataSource = dataSource;
        this.DataSource.DisplayItems.CollectionChanged += DisplayItems_CollectionChanged;
        context = cntxt;
    }
    public override int Count
    {
        get
        {
            return DataSource.DisplayItems.Count;
        }
    }

    public override long GetItemId(int position)
    {
        return position;
    }

    public override object this[int index]
    {
        get { return this.DataSource.DisplayItems[index]; }
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        TextView view = convertView as TextView;
        if (view == null)
        {
            view = new TextView(this.context);
            view.SetMinimumHeight((int)(30 * context.Resources.DisplayMetrics.Density));
            view.SetTextColor(Color.Black);
        }
        var obj = this[position];
        if (this[position] is Contacts)
        {
            view.SetBackgroundColor(Color.Transparent);
            view.Gravity = GravityFlags.CenterVertical;
            view.TextSize = 12;
            view.Text = (obj as Contacts).ContactName;
            view.SetTypeface(Typeface.Default, TypefaceStyle.Normal);
        }
        else if (this[position] is GroupResult)
        {
            view.SetMinimumWidth(ListView.LayoutParams.MatchParent);
            GroupResult group = (GroupResult)this[position];

            view.SetBackgroundColor(Color.Gray);
            view.Gravity = GravityFlags.Center;
            view.TextSize = 14;
            view.SetTypeface(Typeface.DefaultBold, TypefaceStyle.Bold);
            view.Text = group.Key.ToString();
        }
        return view;
    }
    private void DisplayItems_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        this.NotifyDataSetChanged();
    }
}

Use below code in MainActivity.cs

[C#]

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    DataSource dataSource = new DataSource();
    dataSource.Source = new ContactsList();
    dataSource.SortDescriptors.Add(new SortDescriptor("ContactName"));
    dataSource.GroupDescriptors.Add(new GroupDescriptor()
    {
        PropertyName = "ContactName",
        KeySelector = (object obj1) =>
        {
            var item = (obj1 as Contacts);
            return item.ContactName[0].ToString();
        }
    });

    listView = new ListView(this);
    listView.Adapter = new ContactsAdapter(dataSource, this);
    listView.SetPadding(0, 5, 0, 0);
    listView.SetBackgroundColor(Color.White);
    var header = new TextView(this);
    header.SetMinimumHeight((int)(50 * this.Resources.DisplayMetrics.Density));
    header.SetBackgroundColor(Color.Gray);
    header.SetTextColor(Color.Black);
    header.Gravity = GravityFlags.Center;
    header.Text = "Contacts List";
    header.SetMinimumWidth(LinearLayout.LayoutParams.MatchParent);
    var linear = new LinearLayout(this) { Orientation = Orientation.Vertical};
    linear.AddView(header,LinearLayout.LayoutParams.MatchParent);
    linear.AddView(listView);
    SetContentView(linear);        
}

#DataSource for Xamarin.iOS

Getting started

Assembly deployment

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the iOS project as follows:

PCL project

pcl\Syncfusion.DataSource.Portable.dll

Creating your first DataSource in Xamarin.iOS This is how the final output will look like. You can also download the entire source code of this demo from here.

Create new BlankApp (Xamarin.iOS) application in Xamarin Studio or Visual Studio.
Now, create a simple data source as shown in the following code example. Add the following code example in a newly created class file and save it as Contacts.cs file.

public class Contacts : INotifyPropertyChanged
{
    private string contactName;

    public Contacts(string name)
    {
        contactName = name;
    }

    public string ContactName
    {
        get { return contactName; }
        set
        {
            if (contactName != value)
            {
                contactName = value;
                this.RaisedOnPropertyChanged("ContactName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisedOnPropertyChanged(string _PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
        }
    }
}

4.Add the following code example in a newly created class file and save it as ContactList.cs file.

public class ContactsList : ObservableCollection<Contacts>, INotifyPropertyChanged
{
    public ContactsList()
    {
        foreach (var cusName in CustomerNames)
        {
            var contact = new Contacts(cusName);
            this.Add(contact);
        }
    }
    string[] CustomerNames = new string[] {
    "Kyle",
    "Gina",
    "Irene",
    "Katie",
    "Michael",
    "Oscar",
    "Ralph",
    "Torrey",
    "William",
    "Bill",
    "Daniel",
    "Frank",
    "Brenda",
    "Danielle",
    "Fiona",
    "Howard",
    "Jack",
    "Larry",
    };
}

5.You can set the source of the DataSource by using the DataSource.Source property as follows. Now you can bind the DataSource.DisplayItems as ItemsSource for any data bound control.

[C#]

public App()
{
    DataSource dataSource = new DataSource();
    dataSource.Source = new ContactsList();
}

Sorting

PropertyName: Name of the sorted property.
Direction: An object of type ListSortDirection defines the sorting direction.
Comparer: Comparer to be applied in when sorting take place

The following code illustrates this.

[C#]

dataSource.SortDescriptors.Add(new SortDescriptor("ContactName"));

Grouping

PropertyName: Name of the grouped property.
KeySelector: Sets the key selector for grouping
Comparer: Comparer to be applied in when sorting take place The following code example illustrates this without Key Selector.

[C#]

dataSource.GroupDescriptors.Add(new GroupDescriptor("ContactName"));

The following code example illustrates this with Key Selector.

[C#]

    dataSource.GroupDescriptors.Add(new GroupDescriptor() 
    {
        PropertyName = "ContactName",
        KeySelector = (object obj1) =>
        {
            var item = (obj1 as Contacts);
            return item.ContactName[0].ToString();
        }
    });

Binding DataSource to a UITableView

Please refer the below code example that illustrates binding the created DataSource to a UITableView control.

Add the following code example in a newly created class file and save it as TableViewSource.cs file.

[C#]

public class TableViewSource : UITableViewSource
{

    #region Field

    DataSource dataSource;

    #endregion

    #region Constructor

    public TableViewSource(DataSource sfDataSource)
    {
        dataSource = sfDataSource;
    }

    #endregion

    #region implemented abstract members of UITableViewDataSource

    public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath)
    {
        var item = dataSource.DisplayItems[indexPath.Row]  ;
        UITableViewCell cell = tableView.DequeueReusableCell("TableCell") as UITableViewCell;
        if (cell == null)
            cell = new UITableViewCell();
        if (item is Contacts)
        {
            cell.TextLabel.MinimumFontSize = 12f;
            cell.TextLabel.Text = (item as Contacts).ContactName;
            cell.TextLabel.BackgroundColor = UIColor.Clear;
            cell.TextLabel.TextAlignment = UITextAlignment.Left;
        }
        else if (item is GroupResult)
        {
            var group = item as GroupResult;
            cell.TextLabel.Font = UIFont.BoldSystemFontOfSize(14);
            cell.TextLabel.Text = group.Key.ToString();
            cell.TextLabel.TextAlignment = UITextAlignment.Center;
            cell.BackgroundColor = UIColor.Gray;
        }
        return cell;
    }

    public override nint RowsInSection(UITableView tableView, nint section)
    {
        return (nint)dataSource.DisplayItems.Count;
    }

    #endregion
}

Use below code in SampleViewController.cs

[C#]

public SampleViewController()
{
    dataSource = new DataSource();
    dataSource.Source = new ContactsList();
    dataSource.SortDescriptors.Add(new SortDescriptor("ContactName"));
    dataSource.GroupDescriptors.Add(new GroupDescriptor()
    {
        PropertyName = "ContactName",
        KeySelector = (object obj1) =>
        {
            var item = (obj1 as Contacts);
            return item.ContactName[0].ToString();
        }
    });

    header = new UILabel();
    header.Text = "Contacts List ";
    header.BackgroundColor = UIColor.Gray;
    header.TextAlignment = UITextAlignment.Center;
    header.MinimumFontSize = 12f;


    tableView = new UITableView();
    tableView.AllowsSelection = false;
    tableView.SeparatorColor = UIColor.Clear;
    tableView.RowHeight = 30;
    tableView.EstimatedRowHeight = 30;
    tableView.Source = new TableViewSource(dataSource);
    View.BackgroundColor = UIColor.White;
    this.View.AddSubview(header);
    this.View.AddSubview(tableView);
}

public override void ViewDidLayoutSubviews()
{
    base.ViewDidLayoutSubviews();
    header.Frame = new CoreGraphics.CGRect(0, 20, this.View.Frame.Width, 50);
    tableView.Frame = new CoreGraphics.CGRect(0, 72, this.View.Frame.Width, this.View.Frame.Height - 72);
}

#Creating your first Chart in Xamarin.Forms

This section explains you the steps required to populate the Chart with data, title, add data labels and tooltips to the Chart. This section covers only the minimal features that you need to know to get started with the Chart.

Adding Chart Reference

Refer this article to know how to obtain and reference Essential Studio components in your solution; then refer this link to know about the assemblies required for adding Chart to your project.

Important: After adding the reference, currently, an additional step is required for iOS and UWP projects. We need to create an instance of the SfChartRenderer in iOS and UWP projects as shown in this KB article.

Important: For UWP alone, one more additional step is required if the project is built in release mode with .NET Native tool chain enabled. You can refer the KB article for more details.

Initialize Chart

Import the SfChart namespace as shown below in your respective Page,

[XAML]

xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"

[C#]

using Syncfusion.SfChart.XForms;

Then initialize an empty chart with two axes as shown below,

[XAML]

<chart:SfChart>

    <chart:SfChart.PrimaryAxis>
    
        <chart:CategoryAxis>
        
            <chart:CategoryAxis></chart:CategoryAxis>  
            
        </chart:CategoryAxis>
        
    </chart:SfChart.PrimaryAxis>

    <chart:SfChart.SecondaryAxis>
    
        <chart:NumericalAxis>
        
            <chart:NumericalAxis></chart:NumericalAxis>   
            
        </chart:NumericalAxis>
        
    </chart:SfChart.SecondaryAxis>
		  
</chart:SfChart>

[C#]

SfChart chart = new SfChart();

 //Initializing Primary Axis
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;

//Initializing Secondary Axis
NumericalAxis secondaryAxis  =  new NumericalAxis  ();
chart.SecondaryAxis = secondaryAxis;

this.Content = chart;

Run the project and check if you get following output to make sure you have configured your project properly to add SfChart.

Initialize view model

Now, let us define a simple data model that represents a data point in SfChart.

public class Model   
{   
    public string Name { get; set; }

    public double Height { get; set; }
}

Next, create a view model class and initialize a list of Model objects as shown below,

public class ViewModel  
{
      public List<Model> Data { get; set; }      

      public ViewModel()       
      {
            Data = new List<Model>()
            {
                new Model { Name = "David", Height = 180 },
                new Model { Name = "Michael", Height = 170 },
                new Model { Name = "Steve", Height = 160 },
                new Model { Name = "Joel", Height = 182 }
            }; 
       }
 }

Set the ViewModel instance as the BindingContext of your Page; this is done to bind properties of ViewModel to SfChart.

Note: Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.

[XAML]

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             
             x:Class="ChartDemo.MainPage"
             
             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
             
             xmlns:local="clr-namespace:ChartDemo"> 

<ContentPage.BindingContext>       

	<local:ViewModel></local:ViewModel>   
    
</ContentPage.BindingContext>
 
</ContentPage>

[C#]

this.BindingContext = new ViewModel();

Populate Chart with data

As we are going to visualize the comparison of heights in the data model, add ColumnSeries to SfChart.Series property, and then bind the Data property of the above ViewModel to the ColumnSeries.ItemsSource property as shown below.

Note: You need to set XBindingPath and YBindingPath properties, so that SfChart would fetch values from the respective properties in the data model to plot the series.

[XAML]

<chart:SfChart>   

   <chart:SfChart.PrimaryAxis>    
   
        <chart:CategoryAxis>
        
            <chart:CategoryAxis.Title>
            
                  <chart:ChartAxisTitle Text="Name"> </chart:ChartAxisTitle>
                  
            </chart:CategoryAxis.Title>
            
         </chart:CategoryAxis>   
         
   </chart:SfChart.PrimaryAxis>

   <chart:SfChart.SecondaryAxis>  
   
       <chart:NumericalAxis> 
       
           <chart:NumericalAxis.Title>   
           
                 <chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>  
                 
          </chart:NumericalAxis.Title> 
          
      </chart:NumericalAxis>
      
     </chart:SfChart.SecondaryAxis>
    
      <chart:SfChart.Series>              
      
         <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
         
		 </chart:ColumnSeries>    
         
      </chart:SfChart.Series>

 </chart:SfChart>

[C#]

//Initializing primary axis
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.Title.Text = "Name";
chart.PrimaryAxis = primaryAxis;

//Initializing secondary Axis
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Title.Text = "Height (in cm)";
chart.SecondaryAxis = secondaryAxis;

//Initializing column series
ColumnSeries series = new ColumnSeries();
series.SetBinding(ChartSeries.ItemsSourceProperty, "Data");
series.XBindingPath = "Name";
series.YBindingPath = "Height";

chart.Series.Add(series);

Add Title

You can add title to chart to provide quick information to the user about the data being plotted in the chart. You can set title using SfChart.Title property as shown below.

[XAML]

<chart:SfChart>
	...
   <chart:SfChart.Title>
   
        <chart:ChartTitle Text="Chart"/>  
        
   </chart:SfChart.Title>
	...
</chart:SfChart>

[C#]

chart.Title.Text = "Chart";

Refer this link to learn more about the options available in SfChart to customize chart title.

Enable data labels

You can add data labels to improve the readability of the chart. This can be achieved using ChartSeries.DataMarkers property as shown below.

[XAML]

<chart:SfChart>
	...
        <chart:ColumnSeries>
        
	         <chart:ColumnSeries.DataMarker>
         
		         <chart:ChartDataMarker/>
         
	         </chart:ColumnSeries.DataMarker>
         
       </chart:ColumnSeries>
	...
</chart:SfChart>

[C#]

series.DataMarker = new ChartDataMarker();

Refer this link to learn more about the options available in SfChart to customize data markers.

Enable legend

You can enable legend using SfChart.Legend property as shown below,

[XAML]

<chart:SfChart>
	...
    <chart:SfChart.Legend>
    
        <chart:ChartLegend/>
        
    </chart:SfChart.Legend>
    ...
</chart:SfChart>

[C#]

chart.Legend = new ChartLegend ();

Additionally, you need to set label for each series using ChartSeries.Label property, which will be displayed in corresponding legend.

<chart:SfChart>
	...
      <chart:SfChart.Series>              
      
         <chart:ColumnSeries Label="Heights" ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">	
         
		 </chart:ColumnSeries>         
         
       </chart:SfChart.Series>
	...
</chart:SfChart>

[C#]

series.Label = "Heights";

Refer this link to learn more about the options available in SfChart to customize legend.

Enable Tooltip

Tooltips are used to show information about the segment, when you tap on the segment. You can enable tooltip by setting ChartSeries.EnableTooltip property to true.

[XAML]

<chart:SfChart>
	...
   <chart:SfChart.Series>  
   
        <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" EnableTooltip ="True">	
        
		</chart:ColumnSeries>   
        
   </chart:SfChart.Series>
	...
 </chart:SfChart>

[C#]

series.EnableTooltip = true;

Refer this link to learn more about the options available in SfChart to customize tooltip.

You can find the complete getting started sample from this link.

#Create your first SfSunburstChart in Xamarin.Forms

This section explains you the steps required to populate the sunburst chart with data, data labels, legends and title. This section covers only the minimal features that you need to know to get started with the unburst chart.

Adding SunburstChart Reference

Refer this article to know how to obtain and reference Essential Studio components in your solution; then refer this link to know about the assemblies required for adding SfSunburstChart to your project.

Important: After adding the reference, currently, an additional step is required for iOS and UWP projects. We need to call Init method in the SfSunburstChartRenderer as shown in this KB article.

Important: For UWP alone, one more additional step is required if the project is built in release mode with .NET Native tool chain enabled. You can refer the KB article for more details.

Initialize SunburstChart

Import the SfSunburstChart namespace as shown below in your resceptive page,

[XAML]

xmlns:sunburst="clr-namespace:Syncfusion.SfSunburstChart.XForms;assembly=Syncfusion.SfSunburstChart.XForms"

[C#]

using Syncfusion.SfSunburstChart.XForms;

Then initialize an empty sunburstchart as shown below,

[XAML]

<sunburst:SfSunburstChart>
    
</sunburst:SfSunburstChart>

[C#]

SfSunburstChart sunburst = new SfSunbusrtChart();

this.Content = sunburst;

Initialize view model

Now, let us define a simple data model that represents a data point.

Now, let us define a data model that represents the above data in SfSunburstChart.

[C#]

public class Model   
{   
    public string Category { get; set; }
    public string Country { get; set; }
    public string JobDescription { get; set; }
    public string JobGroup { get; set; }
    public string JobRole { get; set; }
    public double EmployeesCount { get; set; }
}

Next, create a view model class and initialize a list of Model objects as shown below,

[C#]

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }
    public ViewModel()
    {
        Data = new ObservableCollection<Model>
        {
            new Model
            {
                Country = "America", JobDescription = "Sales",
                EmployeesCount = 70
            },
            new Model
            {
                Country = "America", JobDescription = "Technical",
                JobGroup = "Testers", EmployeesCount = 35
            },
            new Model
            {
                Country = "America", JobDescription = "Technical",
                JobGroup = "Developers", JobRole = "Windows", EmployeesCount = 105
            },
            new Model
            {
                Country = "America", JobDescription = "Technical",
                JobGroup = "Developers", JobRole = "Web", EmployeesCount = 40
            },
            new Model
            {
                Country = "America", JobDescription = "Management",
                EmployeesCount = 40
            },
            new Model
            {
                Country = "America", JobDescription = "Accounts",
                EmployeesCount = 60
            },
            new Model
            {
                Country = "India", JobDescription = "Technical",
                JobGroup = "Testers", EmployeesCount = 25
            },
            new Model
            {
                Country = "India", JobDescription = "Technical", JobGroup = "Developers",
            JobRole = "Windows", EmployeesCount = 155
            },
            new Model
            {
                Country = "India", JobDescription = "Technical", JobGroup = "Developers",
                JobRole = "Web", EmployeesCount = 60
            },
            new Model
            {
                Country = "Germany", JobDescription = "Sales", JobGroup = "Executive",
                EmployeesCount = 30
            },
            new Model
            {
                Country = "Germany", JobDescription = "Sales", JobGroup = "Analyst",
                EmployeesCount = 40
            },
            new Model
            {
                Country = "UK", JobDescription = "Technical", JobGroup = "Developers",
                JobRole = "Windows", EmployeesCount = 100
            },
            new Model
            {
                Country = "UK", JobDescription = "Technical", JobGroup = "Developers",
                JobRole = "Web", EmployeesCount = 30
            },
            new Model
            {
                Country = "UK", JobDescription = "HR Executives", EmployeesCount = 60
            },
            new Model
            {
                Country = "UK", JobDescription = "Marketing", EmployeesCount = 40
            }
        };
    }
}

Set the ViewModel instance as the BindingContext of your Page; this is done to bind properties of ViewModel to SfSunburstChart.

Note: Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.

[XAML]

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

            x:Class="Sunburst.SunburstPage"

            xmlns:sunburst="clr-namespace:Syncfusion.SfSunburstChart.XForms;assembly=Syncfusion.SfSunburstChart.XForms"

            xmlns:local="clr-namespace:Sunburst">    

	<ContentPage.BindingContext>       

		<local:ViewModel></local:ViewModel>  

	</ContentPage.BindingContext>
 
</ContentPage>

[C#]

this.BindingContext = new ViewModel();

Populate SunburstChart with data

Now, bind the Data property of the above ViewModel to the ItemsSource property. Add SunburstHierarchicalLevel to Levels property. Each hierarchy level is formed based on the property specified in GroupMemberPath property, and each arc segment size is calculated using ValueMemberPath.

[XAML]

<sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount">
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
    </sunburst:SfSunburstChart.Levels>
</sunburst:SfSunburstChart>

[C#]

SfSunburstChart sunburst = new SfSunburstChart();
sunburst.ValueMemberPath = "EmployeesCount";
sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "Country"});
sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "JobDescription"});
sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "JobGroup"});
sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "JobRole"});

Add Title

You can add title to sunburst chart to provide quick information to the user about the data being plotted in the chart. You can set title using SfSunburstChart.Title property as shown below.

[XAML]

<sunburst:SfSunburstChart>

    ...

    <sunburst:SfSunburstChart.Title>
        <sunburst:SunburstChartTitle Text="Employees Count"/>
    </sunburst:SfSunburstChart.Title>

    ...

</sunburst:SfSunburstChart >

[C#]

sunburst.Title=new SunburstChartTitle();
sunburst.Title.Text = "Employees Count";

Add legend

You can enable legend using SfSunburstChart.Legend property as shown below,

[XAML]

<sunburst:SfSunburstChart>

    ...
    
    <sunburst:SfSunburstChart.Legend>
        <sunburst:SunburstChartLegend/>
    </sunburst:SfSunburstChart.Legend>

    ...

</sunburst:SfSunburstChart>

[C#]

sunburst.Legend = new SunburstChartLegend ();

Add data labels

You can add data labels to improve the readability of the sunburst chart. This can be achieved using SfSunburstChart.DataLabel property as shown below.

[XAML]

<sunburst:SfSunburstChart>

    ...

    <sunburst:SfSunburstChart.DataLabel>
        <sunburst:SunburstChartDataLabel/>
	</sunburst:SfSunburstChart.DataLabel>

    ...

</sunburst:SfSunburstChart>

[C#]

sunburst.DataLabel = new SunburstChartDataLabel();

Following is the final output screenshot,

You can find the complete getting started sample from this link.

#Create your first SfSparkline in Xamarin.Forms

This section explains you the steps required to populate the Sparkline with data.

Adding Sparkline Reference

Refer this article to know how to obtain and reference Essential Studio components in your solution; then refer this link to know about the assemblies required for adding Sparkline to your project.

Important: After adding the reference, currently, an additional step is required for iOS and UWP projects. We need to create an instance of the SfSparklineRenderer in iOS and UWP projects as shown in this KB article.

Important: For UWP alone, one more additional step is required if the project is built in release mode with .NET Native tool chain enabled. You can refer the KB article for more details.

Initialize view model

Now, let us define a simple data model that represents a data point in SfSparkline.

public class Model   
{   
    public double Performance { get; set; }
}

Next, create a view model class and initialize a list of Model objects as shown below,

public class ViewModel  
{
      public List<Model> Data { get; set; }      

      public ViewModel()       
      {
            Data = new List<Model>()
            {
                new Model { Performance = 3000 },
                new Model { Performance = 5000 },
                new Model { Performance = -3000 },
                new Model { Performance = -4000 },
                new Model { Performance = 2000 },
                new Model { Performance = 3000 }
            }; 
       }
 }

Set the ViewModel instance as the BindingContext of your Page; this is done to bind properties of ViewModel to SfSparkline.

Note: Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.

[XAML]

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             
             x:Class=" SparklineDemo.MainPage"
             
             xmlns:sparkline="clr-namespace:Syncfusion.SfSparkline.XForms;assembly=Syncfusion.SfSparkline.XForms" 
             
             xmlns:local="clr-namespace:SparklineDemo">    

	<ContentPage.BindingContext>   
    
		<local:ViewModel></local:ViewModel> 
        
	</ContentPage.BindingContext>
 
</ContentPage>

[C#]

this.BindingContext = new ViewModel();

Populate Sparkline with data

Import the SfSparkline namespace as shown below in your respective page,

[XAML]

xmlns:sparkline="clr-namespace:Syncfusion.SfSparkline.XForms;assembly=Syncfusion.SfSparkline.XForms"

[C#]

using Syncfusion.SfSparkline.XForms;

Bind the Data property of the above ViewModel to the SfSparkline.ItemsSource property as shown below.

Note: You need to set YBindingPath property, so that SfSparkline would fetch values from the respective property in the data model to plot the Sparkline.

[XAML]

<sparkline:SfLineSparkline ItemsSource="{Binding Data}" YBindingPath="Performance"> 

</sparkline:SfLineSparkline >

[C#]

SfLineSparkline lineSparkline = new SfLineSparkline(); 

lineSparkline.YBindingPath = "Performance";

lineSparkline.SetBinding(SfSparklineBase.ItemsSourceProperty, "Data");

You can find the complete getting started sample from this link.

#Create your first SfDateTimeRangeNavigator in Xamarin.Forms

This section walks you through the steps required to add SfDateTimeRangeNavigator and populate it with data, and also explains how to respond to range selection performed in the control.

You can download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android and UWP projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder.

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Release Version}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

pcl\Syncfusion.SfChart.XForms.dll

Android project

android\Syncfusion.SfChart.Android.dll
android\Syncfusion.SfChart.XForms.Android.dll
android\Syncfusion.SfChart.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfChart.iOS.dll 
ios-unified\Syncfusion.SfChart.XForms.iOS.dll
ios-unified\Syncfusion.SfChart.XForms.dll

UWP

uwp\Syncfusion.SfChart.UWP.dll
uwp\Syncfusion.SfChart.XForms.UWP.dll
uwp\Syncfusion.SfChart.XForms.dll

Currently an additional step is required for UWP and iOS projects. We need to create an instance of the SfRangeNavigatorRenderer as shown below.

Create an instance of SfRangeNavigatorRenderer in MainPage constructor of the UWP project as shown below

public MainPage()
{
    new SfRangeNavigatorRenderer();
    ...  
}

Create an instance of SfRangeNavigatorRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    new SfRangeNavigatorRenderer();
    ...  
}

Adding and configuring the SfDateTimeRangeNavigator

First, let us initialize the control with major and minor date time scales by specifying the minimum and maximum date to be visualized in the control using Minimum and Maximum properties.

Following code example illustrates this,

[C#]

SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
{
    rangeNavigator.Minimum = new DateTime(2015, 1, 1),

    rangeNavigator.Maximum = new DateTime(2016, 1, 1)
};

[XAML]

<rangenavigator:SfDateTimeRangeNavigator Minimum="1/1/2015" Maximum="1/1/2016">

</rangenavigator:SfDateTimeRangeNavigator>

Note: If you don’t specify Minimum and Maximum properties, minimum and maximum dates will be chosen automatically based on the provided data using ItemsSource property, which is explained in the next step in this section.

Next, create a data model representing the list of sample data.

[C#]

public class DataModel
{
    public ObservableCollection<Model> DateTimeData { get; set; };

    DataModel()
    {
        DateTimeData = new ObservableCollection< Model >
        {
            new Model (new DateTime(2015, 01, 1), 14),
            new Model (new DateTime(2015, 02, 1), 54),
            new Model (new DateTime(2015, 03, 1), 23),
            new Model (new DateTime(2015, 04, 1), 53),
            new Model (new DateTime(2015, 05, 1), 25),
            new Model (new DateTime(2015, 06, 1), 32),
            new Model (new DateTime(2015, 07, 1), 78),
            new Model (new DateTime(2015, 08, 1), 100),
            new Model (new DateTime(2015, 09, 1), 55),
            new Model (new DateTime(2015, 10, 1), 38),
            new Model (new DateTime(2015, 11, 1), 27),
            new Model (new DateTime(2015, 12, 1), 56),
            new Model (new DateTime(2016, 01, 1), 33)
        };
    }
}

public class Model
{

    public DateTime Date { get; set; }

    public double Value { get; set; }

    public Model(DateTime dateTime, double value)
    {
        Date = dateTime;
        Value = value;
    }
}

Then, let us populate the chart, which is displayed inside the SfDateTimeRangeNavigator, by setting the above data using ItemsSource property. And then specify the property names which contain the x and y values in the model using XBindingPath and YBindingPath properties.

Note: By default, data is visualized using line series. You can change the chart type or add more series by accessing the SfChart instance using SfDateTimeRangeNavigator.Content property.

[C#]

SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
{
    rangeNavigator.ItemsSource = dataModel.DateTimeData,

    rangeNavigator.XBindingPath = "Date",

    rangeNavigator.YBindingPath = "Value"
};

[XAML]

<rangenavigator:SfDateTimeRangeNavigator ItemsSource="{Binding DateTimeData}" XBindingPath="Date" YBindingPath="Value">

</rangenavigator:SfDateTimeRangeNavigator>

Handle range selection

In real time, other controls like chart, grid etc., are updated in response to the range selection performed in SfDateTimeRangeNavigator. You can handle the selection using RangeChanged event and update other controls based on the selected date time or perform some other tasks using the selected data.

Note: You can get the selected date time using ViewRangeStart and ViewRangeEnd properties or you can get selected data using SelectedData property.

Following code example illustrates how to handle range selection and update chart's date time axis range,

[C#]

rangeNavigator.RangeChanged += rangeNavigator_RangeChanged;

[XAML]

<rangenavigator:SfDateTimeRangeNavigator RangeChanged="rangeNavigator_RangeChanged">
    
</rangenavigator:SfDateTimeRangeNavigator>

private void rangeNavigator_RangeChanged(object sender, RangeChangedEventArgs e)
{
    //Updating chart's date time range
    dateTimeAxis.Minimum = e.ViewRangeStartDate;

    dateTimeAxis.Maximum = e.ViewRangeEndDate;
}

#Kanban for Xamarin.Forms

This section provides a quick overview for working with Essential Kanban for Xamarin.Forms. It is an efficient way to visualize the workflow at each stage along its path to completion.

Adding Kanban Reference

Refer this article to know how to obtain and reference Essential Studio components in your solution; then refer this link to know about the assemblies required for adding Kanban to your project.

Note: After adding the reference, currently, an additional step is required for iOS and UWP projects. We need to create an instance of the SfKanbanRenderer in iOS and UWP projects as shown in this KB article.

Note: For UWP alone, one more additional step is required if the project is built in release mode with .NET Native tool chain enabled. You can refer the KB article for more details.

Initialize Kanban

Import 'SfKanban' namespace as shown below in your respective page,.

[C#]

using Syncfusion.SfKanban.XForms;

[XAML]

xmlns:kanban="clr-namespace:Syncfusion.SfKanban.XForms;assembly=Syncfusion.SfKanban.XForms"

Create an instance of SfKanban control and set to Content property of a Page.

[C#]

<kanban:SfKanban>
</kanban:SfKanban>

[XAML]

SfKanban kanban = new SfKanban();
this.Content = kanban;

Initialize view model

Create a ViewModel class with a collection property to hold a collection of KanbanModel instances as shown below. Each KanbanModel instance represent a card in Kanban control.

[C#]

public class ViewModel
{
    public ObservableCollection<KanbanModel> Cards { get; set; }
    public ViewModel()
    {
        Cards = new ObservableCollection<KanbanModel>();
        Cards.Add(new KanbanModel()
        {
            ID = 1,
            Title = "iOS - 1002",
            ImageURL = "Image1.png",
            Category = "Open",
            Description = "Analyze customer requirements",
            ColorKey = "Red",
            Tags = new string[] { "Incident", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 6,
            Title = "Xamarin - 4576",
            ImageURL = "Image2.png",
            Category = "Open",
            Description = "Show the retrieved data from the server in grid control",
            ColorKey = "Green",
            Tags = new string[] { "Story", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 13,
            Title = "UWP - 13",
            ImageURL = "Image4.png",
            Category = "In Progress",
            Description = "Add responsive support to application",
            ColorKey = "Brown",
            Tags = new string[] { "Story", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 2543,
            Title = "Xamarin_iOS - 2543",
            Category = "Code Review",
            ImageURL = "Image3.png",
            Description = "Check login page validation",
            ColorKey = "Brown",
            Tags = new string[] { "Story", "Customer" }
        });
    }
}

Set the ViewModel instance as the BindingContext of your Page; this is done to bind properties of ViewModel to SfKanban.

Note: Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.

[C#]

this.BindingContext = new ViewModel();

[XAML]

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
		x:Class="GettingStartedKanban.MainPage"  
		xmlns:kanban="clr-namespace:Syncfusion.SfKanban.XForms;assembly=Syncfusion.SfKanban.XForms"   
		xmlns:local="clr-namespace:GettingStartedKanban"> 
	<ContentPage.BindingContext>
		<local:ViewModel>
		</local:ViewModel>   
	</ContentPage.BindingContext>
</ContentPage>

Binding data to SfKanban

Bind the above data to SfKanban using ItemsSource property.

[C#]

kanban.SetBinding(SfKanban.ItemsSourceProperty, "Cards");

[XAML]

<kanban:SfKanban ItemsSource="{Binding Cards}">
</kanban:SfKanban>

Defining columns

The columns are generated automatically based on the distinct values of 'KanbanModel.Category' in ItemsSource. But, you can also define the columns by setting ‘AutoGenerateColumns’ property to false and adding KanbanColumn instance to Columns property of SfKanban.

[C#]

kanban.AutoGenerateColumns = false; 

KanbanColumn todoColumn = new KanbanColumn();
todoColumn.Title = "To Do";
kanban.Columns.Add(todoColumn);

KanbanColumn progressColumn = new KanbanColumn();
progressColumn.Title = "In Progress";
kanban.Columns.Add(progressColumn);

KanbanColumn codeColumn = new KanbanColumn();
codeColumn.Title = "Code Review";
kanban.Columns.Add(codeColumn);

KanbanColumn doneColumn = new KanbanColumn();
doneColumn.Title = "Done";
kanban.Columns.Add(doneColumn);

[XAML]

<kanban:SfKanban x:Name="kanban" AutoGenerateColumns="False"> 

    <kanban:SfKanban.Columns>

        <kanban:KanbanColumn x:Name="todoColumn" Title="To Do"  >
        </kanban:KanbanColumn>

        <kanban:KanbanColumn x:Name="progressColumn" Title="In Progress">
        </kanban:KanbanColumn>

        <kanban:KanbanColumn x:Name="codeColumn" Title="Code Review" >
        </kanban:KanbanColumn>

        <kanban:KanbanColumn x:Name="doneColumn" Title="Done"  >
        </kanban:KanbanColumn> 

    </kanban:SfKanban.Columns>

</kanban:SfKanban>

Define the categories of column using Categories property of KanbanColumn and cards will be added to the respective columns.

[C#]

todoColumn.Categories = new List<object>() { "Open" };
progressColumn.Categories = new List<object>() { "In Progress" };
codeColumn.Categories = new List<object>() { "Code Review" };
doneColumn.Categories = new List<object>() { "Done" };

This is how the final output will look like on iOS, Android and Windows devices. You can download the entire source code of this demo from here.

#Kanban for Xamarin.Android

Create your first Kanban in Xamarin.Android

This section provides a quick overview for working with Essential Kanban for Xamarin.Android. It’s an efficient way to visualize the workflow at each stage along its path to completion.

Referencing Essential Studio Components in your Solution

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically:

{Syncfusion Installed location}\Essential Studio{14.2.0.26}\lib

Note: Assemblies are available in unzipped package location in Mac.

You have to add the following assembly reference to the android project

android\Syncfusion.SfKanban.Android.dll

Create a simple SfKanban

This section explains how to create a SfKanban and configure it.

This is how the final output will look like on Android devices. You can download the entire source code of this demo for Xamarin.Android from here.

In this walk through, you will create a new application that contains the SfKanban which includes the below topics.

Adding SfKanban in Xamarin.Android
Create data model
Binding data
Defining columns
Working with Workflows
Work In-Progress Limit

Adding SfKanban in Xamarin.Android

Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section.
Import SfKanban control namespace Syncfusion.SfKanban.Android.
Create an instance of SfKanban control and set as a content view of Activity.

using System.Collections.ObjectModel;
using Syncfusion.SfKanban.Android; 

namespace Getting_Started
{
[Activity(Label = “Getting Started”, MainLauncher = true, Icon = “@drawable/icon”)]
public  class MainActivity : Activity
{
	public override void OnCreate(Bundle bundle)
	{		
		base.OnCreate(bundle);
		SfKanban kanban = new SfKanban(this);	
		SetContentView(kanban);
	}
}
}

Create KanbanModel for the SfKanban

Create a collection of KanbanModel objects for populating SfKanban.

using System.Collections.ObjectModel;
using Syncfusion.SfKanban.Android; 

namespace Getting_Started
{
[Activity(Label = “Getting Started”, MainLauncher = true, Icon = “@drawable/icon”)]
public class MainActivity : Activity
{
	ObservableCollection<KanbanModel> ItemsSourceCards()
	{
		ObservableCollection<KanbanModel> cards = new ObservableCollection<KanbanModel>();
		cards.Add(new KanbanModel() { 
			ID = 1, 
			Title = "iOS - 1002", 
			ImageURL = "Image1.png", 
			Category = "Open", 
			Description = "Analyze customer requirements", 
			ColorKey = "Red",
			Tags = new string[] { "Incident", "Customer" }
		});
		
		cards.Add(new KanbanModel() { 
			ID = 6, 
			Title = "Xamarin - 4576", 
			ImageURL = "Image2.png", 
			Category = "Open",
			Description = "Show the retrieved data from the server in grid control" 
			ColorKey = "Green", 
			Tags = new string[] { "SfDataGrid", "Customer" }
		});
		
		cards.Add(new KanbanModel() { 
			ID = 13, 
			Title = "UWP - 13", 
			ImageURL = "Image4.png", 
			Category = "In Progress", 
			Description = "Add responsive support to application", 
			ColorKey = "Brown", 
			Tags = new string[] { "Story", "Kanban" } 
		});  
		
		cards.Add(new KanbanModel() { 
			ID = 2543, 
			Title = "Xamarin_iOS - 2543", 
			Category = "Code Review", 
			ImageURL = "Image12.png", 
			Description = "Provide swimlane support kanban", 
			ColorKey = "Brown", 
			Tags = new string[] { "Feature","SfKanban" } 
		});
		  
		cards.Add(new KanbanModel() { 
			ID = 1975, 
			Title = "iOS - 1975", 
			Category = "Done", 
			ImageURL = "Image11.png", 
			Description = "Fix the issues reported by the customer", 
			ColorKey = "Purple", 
			Tags = new string[] { "Bug" } 
		});   
		
		return cards; 
	} 
}     
}

Binding data to SfKanban

In order to bind the data source of the SfKanban, set ItemsSource property as shown below. The following code binds the collection created in previous step to ItemsSource property.

kanban.ItemsSource = ItemsSourceCards();

Defining Columns

By default, we need to define the columns manually by adding the KanbanColumn object to the Columns collection property in SfKanban.

ItemsSource which was bound to the kanban will be added to the respective columns using ColumnMappingPath property in SfKanban and Categories collection property in KanbanColumn.

We need to set the required property name to ColumnMappingPath which will be essential to add the data to the respective columns.

In this example, data whose Category property’s value is set as Open will be added to the todoColumn and other data will be added to the respective columns.

The following code example illustrates how this can be done.

kanban.ColumnMappingPath = "Category"; 
 
KanbanColumn todoColumn = new KanbanColumn();
todoColumn.Title = "To Do"; 
todoColumn.Categories = new List<object>() { "Open" };
kanban.Columns.Add(todoColumn);  

KanbanColumn progressColumn = new KanbanColumn();
progressColumn.Title = "In Progress";  
progressColumn.Categories = new List<object>() { "In Progress" }; 
kanban.Columns.Add(progressColumn);  
 
KanbanColumn codeColumn = new KanbanColumn(); 
codeColumn.Title = "Code Review"; 
codeColumn.Categories = new List<object>() { "Code Review" };  
kanban.Columns.Add(codeColumn);  

KanbanColumn doneColumn = new KanbanColumn(); 
doneColumn.Title = "Done"; 
doneColumn.Categories = new List<object>() { "Done" };  
kanban.Columns.Add(doneColumn);

You can also set AutoGenerateColumns property to true in which you don't need to define the columns as mentioned in the above example. This will create columns depending on the ColumnMappingPath property for all the distinct values in ItemsSource.

When the columns are auto-generated, you can handle the ColumnsGenerated event to customize the columns after they are added to the ActualColumns collection in SfKanban.

Working with workflows

A Kanban workflow is a set of Category and AllowedTransitions, that an item moves through during its lifecycle and typically represents processes within your organization.

Category represents a state of an item at a particular point in a specific workflow. An item can be in only one category at a specific point of time.

AllowedTransitions is a list of categories to where the card can be moved from the current category.

Creating the workflows

Initialize Workflows property with a list of KanbanWorkflow instances. Each instance represents a workflow in Kanban. The following code example illustrates how this can be done.

var workflows = new List<KanbanWorkflow>();

var openWorkflow = new KanbanWorkflow();
openWorkflow.Category = "Open"; 
openWorkflow.AllowedTransitions = new List<object> { "In Progress" };  

var progressWorkflow = new KanbanWorkflow(); 
progressWorkflow.Category = "In Progress"; 
progressWorkflow.AllowedTransitions = new List<object> { "Open", "Code Review", "Closed-No Code Changes" };  

workflows.Add(openWorkflow); 
workflows.Add(progressWorkflow);    

kanban.Workflows = workflows;

Work In-Progress Limit

In column, you can set minimum and maximum items limit by using the MinimumLimit and MaximumLimit properties. However, this will not restrict moving the items from one column to another column. But the violation of the limit can be indicated by changing the color of the error bar.

todoColumn.MinimumLimit = 5; 
todoColumn.MaximumLimit = 10;

Following properties are used to customize its appearance.

Color – used to change the default color of the error bar
MaxValidationColor – used to change the maximum validation color of the error bar
MinValidationColor – used to change the minimum validation color of the error bar
Height – used to change the height of the error bar

todoColumn.ErrorBarSettings.Color = Color.Green; 
todoColumn.ErrorBarSettings.MinValidationColor = Color.Orange; 
todoColumn.ErrorBarSettings.MaxValidationColor = Color.Red; 
todoColumn.ErrorBarSettings.Height = 4;

#Kanban for Xamarin.iOS

Create your first Kanban in Xamarin.iOS

This section provides a quick overview for working with Essential Kanban for Xamarin.iOS. It’s an efficient way to visualize the workflow at each stage along its path to completion.

Referencing Essential Studio Components in your Solution

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically:

{Syncfusion Installed location}\Essential Studio{14.2.0.26}\lib

Note: Assemblies are available in unzipped package location in Mac.

You have to add the following assembly reference to the iOS unified project

iOS-unifed\Syncfusion.SfKanban.iOS.dll

Create a simple SfKanban

This section explains how to create a SfKanban and configure it.

This is how the final output will look like on iOS devices. You can download the entire source code of this demo for Xamarin.iOS from here.

In this walk through, you will create a new application that contains the SfKanban which includes the below topics.

Adding SfKanban in Xamarin.iOS
Create data model
Binding data
Defining columns
Working with Workflows
Work In-Progress Limit

Adding SfKanban in Xamarin.iOS

Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section.
Import SfKanban control namespace Syncfusion.SfKanban.iOS.
Create an instance of SfKanban control and add as a SubView to a UIViewController.

public partial class ViewController : UIViewController

{

	private SfKanban kanban;

	protected ViewController(IntPtr handle) : base(handle)
	{
		// Note: this .ctor should not contain any initialization logic.
	}

	public override void ViewDidLoad()
	{		
		base.ViewDidLoad();	
		kanban = new SfKanban();	
		kanban.Frame = this.View.Bounds;	
		View.AddSubview(kanban); 	
	}

}

Create KanbanModel for the SfKanban

Create a collection of KanbanModel objects for populating SfKanban.

using System.Collections.ObjectModel;
using Syncfusion.SfKanban.iOS; 
public partial class ViewController : UIViewController
{
    private SfKanban kanban;
		
	protected ViewController(IntPtr handle) : base(handle)
	{
		Data = ItemsSourceCards();
	}

	public ObservableCollection<KanbanModel> Data
	{
		get;
		set;
	}
	
	ObservableCollection<KanbanModel> ItemsSourceCards()
	{
		ObservableCollection<KanbanModel> cards = new ObservableCollection<KanbanModel>();
		cards.Add(new KanbanModel() { 
			ID = 1, 
			Title = "iOS - 1002", 
			ImageURL = "Image1.png", 
			Category = "Open", 
			Description = "Analyze customer requirements", 
			ColorKey = "Red",
			Tags = new string[] { "Incident", "Customer" }
		});
		
		cards.Add(new KanbanModel() { 
			ID = 6, 
			Title = "Xamarin - 4576", 
			ImageURL = "Image2.png", 
			Category = "Open",
			Description = "Show the retrieved data from the server in grid control" 
			ColorKey = "Green", 
			Tags = new string[] { "SfDataGrid", "Customer" }
		});
		
		cards.Add(new KanbanModel() { 
			ID = 13, 
			Title = "UWP - 13", 
			ImageURL = "Image4.png", 
			Category = "In Progress", 
			Description = "Add responsive support to application", 
			ColorKey = "Brown", 
			Tags = new string[] { "Story", "Kanban" } 
		});  
		
		cards.Add(new KanbanModel() { 
			ID = 2543, 
			Title = "Xamarin_iOS - 2543", 
			Category = "Code Review", 
			ImageURL = "Image12.png", 
			Description = "Provide swimlane support kanban", 
			ColorKey = "Brown", 
			Tags = new string[] { "Feature","SfKanban" } 
		});
		  
		cards.Add(new KanbanModel() { 
			ID = 1975, 
			Title = "iOS - 1975", 
			Category = "Done", 
			ImageURL = "Image11.png", 
			Description = "Fix the issues reported by the customer", 
			ColorKey = "Purple", 
			Tags = new string[] { "Bug" } 
		});   
		
		return cards; 
	} 
}

Binding data to SfKanban

In order to bind the data source of the SfKanban, set ItemsSource property as shown below. The following code binds the collection created in previous step to ItemsSource property.

kanban.ItemsSource = this.Data;

Defining Columns

By default, we need to define the columns manually by adding the KanbanColumn object to the Columns collection property in SfKanban.

ItemsSource which was bound to the kanban will be added to the respective columns using ColumnMappingPath property in SfKanban and Categories collection property in KanbanColumn.

We need to set the required property name to ColumnMappingPath which will be essential to add the data to the respective columns.

In this example, data whose Category property’s value is set as Open will be added to the todoColumn and other data will be added to the respective columns.

The following code example illustrates how this can be done.

kanban.ColumnMappingPath = "Category"; 
 
KanbanColumn todoColumn = new KanbanColumn();
todoColumn.Title = "To Do"; 
todoColumn.Categories = new List<object>() { "Open" };
kanban.Columns.Add(todoColumn);  

KanbanColumn progressColumn = new KanbanColumn();
progressColumn.Title = "In Progress";  
progressColumn.Categories = new List<object>() { "In Progress" }; 
kanban.Columns.Add(progressColumn);  
 
KanbanColumn codeColumn = new KanbanColumn(); 
codeColumn.Title = "Code Review"; 
codeColumn.Categories = new List<object>() { "Code Review" };  
kanban.Columns.Add(codeColumn);  

KanbanColumn doneColumn = new KanbanColumn(); 
doneColumn.Title = "Done"; 
doneColumn.Categories = new List<object>() { "Done" };  
kanban.Columns.Add(doneColumn);

When the columns are auto-generated, you can handle the ColumnsGenerated event to customize the columns after they are added to the ActualColumns collection in SfKanban.

Working with workflows

A Kanban workflow is a set of Category and AllowedTransitions, that an item moves through during its lifecycle and typically represents processes within your organization.

Category represents a state of an item at a particular point in a specific workflow. An item can be in only one category at a specific point of time.

AllowedTransitions is a list of categories to where the card can be moved from the current category.

Creating the workflows

Initialize Workflows property with a list of KanbanWorkflow instances. Each instance represents a workflow in Kanban. The following code example illustrates how this can be done.

var workflows = new List<KanbanWorkflow>();

var openWorkflow = new KanbanWorkflow();
openWorkflow.Category = "Open"; 
openWorkflow.AllowedTransitions = new List<object> { "In Progress" };  

var progressWorkflow = new KanbanWorkflow(); 
progressWorkflow.Category = "In Progress"; 
progressWorkflow.AllowedTransitions = new List<object> { "Open", "Code Review", "Closed-No Code Changes" };  

workflows.Add(openWorkflow); 
workflows.Add(progressWorkflow);    

kanban.Workflows = workflows;

Work In-Progress Limit

todoColumn.MinimumLimit = 5; 
todoColumn.MaximumLimit = 10;

Following properties are used to customize its appearance.

Color – used to change the default color of the error bar
MaxValidationColor – used to change the maximum validation color of the error bar
MinValidationColor – used to change the minimum validation color of the error bar
Height – used to change the height of the error bar

todoColumn.ErrorBarSettings.Color = UIColor.Green; 
todoColumn.ErrorBarSettings.MinValidationColor = UIColor.Orange; 
todoColumn.ErrorBarSettings.MaxValidationColor = UIColor.Red; 
todoColumn.ErrorBarSettings.Height = 4;

#Gauge

Introduction

This section provides a quick overview for working with Essential Gauge for Xamarin.Forms. We will walk through the entire process of configuring a real world gauge. You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android and Windows Phone projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio\14.1.0.41\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

pcl\Syncfusion.SfGauge.XForms.dll

Android project

android\Syncfusion.SfGauge.Android.dll
android\Syncfusion.SfGauge.XForms.Android.dll

iOS project

ios\Syncfusion.SfGauge.iOS.dll 
ios\Syncfusion.SfGauge.XForms.iOS.dll
ios\Syncfusion.SfGauge.XForms.dll

Windows Phone project

wp8\Syncfusion.SfGauge.WP8.dll
wp8\Syncfusion.SfGauge.XForms.WinPhone.dll
wp8\Syncfusion.SfGauge.XForms.dll

WinRT project

winrt\Syncfusion.SfGauge.WinRT.dll
winrt\Syncfusion.SfGauge.XForms.WinRT.dll
winrt\Syncfusion.SfGauge.XForms.dll

UWP project

uwp\Syncfusion.SfGauge.UWP.dll
uwp\Syncfusion.SfGauge.XForms.UWP.dll
uwp\Syncfusion.SfGauge.XForms.dll

Windows Phone project

wp81\Syncfusion.SfGauge.WP.dll
wp81\Syncfusion.SfGauge.XForms.WinPhone.dll
wp81\Syncfusion.SfGauge.XForms.dll

Note: Essential Gauge for Xamarin is compatible with Xamarin.Forms v1.2.3.6257.

Currently an additional step is required for Windows Phone and iOS projects. We need to create an instance of the Gauge custom renderer as shown below.

Create an instance of SfGaugeRenderer in the MainPage constructor of the Windows Phone project as shown below

public MainPage()
{
	new SfGaugeRenderer ();
	...  
}

Create an instance of SfGaugeRenderer in the FinishedLaunching overridden method of the AppDelegate class in the iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
	...
	new SfGaugeRenderer ();
	...
}

Adding and configuring the gauge

The gauge control can be configured entirely in C# code or using XAML markup.

Create an instance of SfCircularGauge

[C#]

   SfCircularGauge circularGauge = new SfCircularGauge();

[XAML]

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms
	xmlns:local="clr-
	namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"
	xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
	x:Class="GaugeGettingStarted.Sample">
	<ContentPage.Content>
		<local:SfCircularGauge>
		</local:SfCircularGauge>
	</ContentPage.Content>
</ContentPage>

Insert a Scale

The next step is to add one of more scales.

[C#]

SfCircularGauge circularGauge = new SfCircularGauge();

// Add a scale

Scale scale = new Scale();
scale.StartValue= 0;
scale.EndValue =100;
scale.Interval = 10;
scale.StartAngle =135;
scale.SweepAngle =270;
scale.RimThickness = 10;
scale.RimColor = Color.FromHex("#FFFB0101");
scale.MinorTicksPerInterval = 3;

circularGauge.Scales.Add(scale);

[XAML]

<gauge:SfCircularGauge>
	<gauge.SfCircularGauge.Scales>
		<gauge.Scale StartValue="0"
			EndValue="100" Interval="10"
			StartAngle="135" SweepAngle="230"
			RimColor="#FFFB0101" RimThickness="10"  />
	</gauge.SfCircularGauge.Scales>
</gauge:SfCircularGauge>

Specify Ranges

We can improve the readability of data by including ranges that quickly show when values fall within specific ranges.

[C#]

... 
Range range = new Range();
range.StartValue = 0;
range.EndValue = 80;
range.Color = Color.FromHex("#FF777777");
range.Thickness = 10;

scale.Ranges.Add(range);

[XAML]

<local:SfCircularGauge>
	<local:SfCircularLocal:Scales>
		<local:Scale StartValue="0" EndValue="100"
			Interval="10" StartAngle="135"
			SweepAngle="230" RimColor="#FFFB0101"
			RimThickness="10" >
			<local:Scale.Ranges>
				<local:Range StartValue="0" EndValue="80" Color="#FF777777" Thickness="15" />
			</local:Scale.Ranges>
		</local:Scale>
	</local:SfCircularLocal:Scales>
</local:SfCircularGauge>

Add a Needle Pointer

We will now create a needle pointer and associate it with a scale to display the current value.

[C#]

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 60;
needlePointer.Color = Color.White;
needlePointer.KnobColor = Color.White;
needlePointer.Thickness = 5;
needlePointer.KnobRadius = 20;
needlePointer.LengthFactor = 0.8;

scale.Pointers.Add(needlePointer);
...

[XAML]

<local:SfCircularGauge>
	<local:SfCircularLocal:Scales>
		<local:Scale StartValue="0" EndValue="100"
			Interval="10" StartAngle="135"
			SweepAngle="230" RimColor="#FFFB0101"
			RimThickness="10" >
			<local:Scale.Ranges>
				<local:Range StartValue="0" EndValue="80" Color="#FF777777" Thickness="15" />
			</local:Scale.Ranges>
			<local:Scale.Pointers>
				<local:NeedlePointer Value="60" LengthFactor="0.8"
					Color="White" Thickness="5"
					KnobColor="White" KnobRadius="20"  />
			</local:Scale.Pointers>
		</local:Scale>
	</local:SfCircularLocal:Scales>
</local:SfCircularGauge>

Add a Range Pointer

A range pointer provides an alternative way of indicating the current value.

[C#]

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 60;
rangePointer.Color = Color.FromHex("#FFA9A9A9");
rangePointer.Thickness = 10;

scale.Pointers.Add(rangePointer);
...

[XAML]

<local:SfCircularGauge>
	<local:SfCircularLocal:Scales>
		<local:Scale StartValue="0" EndValue="100"
			Interval="10" StartAngle="135"
			SweepAngle="230" RimColor="#FFFB0101"
			RimThickness="10" >
			<local:Scale.Ranges>
				<local:Range StartValue="0" EndValue="80" Color="#FF777777" Thickness="15" />
			</local:Scale.Ranges>
			<local:Scale.Pointers>
				<local:NeedlePointer Value="60" LengthFactor="0.8"
					Color="White" Thickness="5"
					KnobColor="White" KnobRadius="20"  />
				<local:RangePointer Value="60" Color="White"
						Thickness="10" />
			</local:Scale.Pointers>
		</local:Scale>
	</local:SfCircularLocal:Scales>
</local:SfCircularGauge>

#Creating your first DigitalGauge in Xamarin.Forms

Essential Digital Gauge for Xamarin.Forms lets you visualize alpha and numeric values over a digital gauge frame. The appearance of the digital gauge can be fully customized to seamlessly integrate with your applications.

This section provides a quick overview for working with Essential Digital Gauge for Xamarin.Forms. We will walk through the entire process of creating a real world Digital gauge.

You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfGauge.XForms.dll

Android project

Android\Syncfusion. SfGauge.Andriod.dll
Android\Syncfusion.SfGauge.XForms.Andriod.dll

iOS(Unified) project

ios-unified\Syncfusion.SfGauge.iOS.dll 
ios-unified\Syncfusion.SfGauge.XForms.iOS.dll
ios-unified\Syncfusion.SfGauge.XForms.dll

UWP Project

uwp\Syncfusion.SfGauge.UWP.dll
uwp\Syncfusion.SfGauge.XForms.dll
uwp\Syncfusion.SfGauge.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the DigitalGauge custom renderer as shown below.

Create an instance of the SfDigitalGaugeRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfDigitalGaugeRenderer ();

         ...

   }

Adding and configuring the DigitalGauge

The digital gauge control can be configured entirely in C# code or using XAML markup.

Create an instance of SfDigitalGauge

[C#]

_//We have to update App.cs source this file._
usingSyncfusion.SfGauge.XForms;
usingSystem;  
usingSystem.Collections.Generic;  
usingSystem.Linq;  
usingSystem.Text;  
usingXamarin.Forms;  
usingSystem.Collections.ObjectModel;publicstaticPage GetMainPage(){         SfDigitalGauge digitalGauge = newSfDigitalGauge();   returnnewContentPage   {       Content = digitalGauge,   };}

[XAML]

_//we have to use this this in App.CS source.//publicstaticPage GetMainPage()//{//    return Sample();//}<?xml version="1.0" encoding="UTF-8"?>_
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
	xmlns:local="clr-namespace:Syncfusion.XForms.SfGauge; assembly=Syncfusion..XForms.SfGauge "  
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="DigitalGaugeGettingStarted.Sample">
	<ContentPage.Content>  
		<local:SfDigitalGauge> 
		</local:SfDigitalGauge>
	</ContentPage.Content>  
</ContentPage>

Configure the Digital Gauge Properties

The next step is to add Digital Gauge properties in application/

[C#]

SfDigitalGauge DigitalGauge = newSfDigitalGauge();
digitalGauge1.Value = "SYNCFUSION";
digitalGauge1.CharacterType = CharacterType.SegmentSeven;
digitalGauge1.CharacterHeight = 58;
digitalGauge1.CharacterWidth= 29;digitalGauge1.SegmentThickness = 3;
digitalGauge1.DisabledColorOpacity = 30;
digitalGauge1.BackgroundColor = Color.FromRgb (235, 235, 235);
digitalGauge1.CharacterForeColor = Color.FromRgb (20,108,237);
digitalGauge1.CharacterDisabledColor = Color.FromRgb (20,108,237);

[XAML]

<digitalGauge1:SfDigitalGauge Value="SYNCFUSION" CharacterHeight="58" CharacterWidth ="29" SegmentThickness="3" DisabledColorOpacity="30" BackgroundColor="#EBEBEB" CharacterType= CharacterType.SegmentSeven        CharacterForeColor ="#146CED" CharacterDisabledColor ="#146CED"> 
</digitalGauge1:SfDigitalGauge >

Screenshots

#Creating your first LinearGauge in Xamarin.Forms

Essential Linear Gauge for Xamarin.Forms lets you visualize values on a linear scale. The appearance of the linear gauge can be fully customized to seamlessly integrate with your applications.

This section provides a quick overview for working with Essential Linear Gauge for Xamarin.Forms. We will walk through the entire process of creating a real world gauge.

You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android project through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfGauge.XForms.dll

Android project

Android\Syncfusion.SfGauge.Andriod.dll
Android\Syncfusion.SfGauge.XForms.Andriod.dll

iOS(Unified) project

ios-unified\Syncfusion.SfGauge.iOS.dll 
ios-unified\Syncfusion.SfGauge.XForms.iOS.dll
ios-unified\Syncfusion.SfGauge.XForms.dll

UWP Project

uwp\Syncfusion.SfGauge.UWP.dll
uwp\Syncfusion.SfGauge.XForms.dll
uwp\Syncfusion.SfGauge.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the LinearGauge custom renderer as shown below.

Create an instance of the SfLinearGaugeRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfLinearGaugeRenderer ();

         ...

   }

Adding and configuring the gauge

The Linear gauge control can be configured entirely in C# code or using XAML markup.

Create an instance of SfLinearGauge

[C#]

_// We have to update App.cs source this file._
usingSyncfusion.SfGauge.XForms;  
usingSystem;  
usingSystem.Collections.Generic;  
usingSystem.Linq;  
usingSystem.Text;  
usingXamarin.Forms;  
usingSystem.Collections.ObjectModel;
publicstaticPage GetMainPage()
{
SfLinearGauge linearGauge = newSfLinearGauge();
returnnewContentPage {Content = linearGauge,};
}

[XAML]

_//we have to use this this in App.CS source.**//publicstaticPage GetMainPage()//{//    return Sample();//}<?xml version="1.0" encoding="UTF-8"?>_
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
	xmlns:local="clr-namespace:Syncfusion.XForms.SfGauge;assembly=Syncfusion.XForms.SfGauge "  
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="LinearGaugeGettingStarted.Sample">
	<ContentPage.Content>  
		<local:SfLinearGauge> 
		</local:SfLinearGauge>
	</ContentPage.Content>  
</ContentPage>

Insert a Scale

The next step is to add one of more scales.

[C#]

linearGauge=newSfLinearGauge();  
linearGauge.BackgroundColor=Color.White;  
linearGauge.Orientation=Orientation.OrientationVertical;  
_//Scale_  
ObservableCollection<LinearScale>scales=newObservableCollection<LinearScale>();  
LinearScalescale=newLinearScale();  
scale.MinimumValue=0;  
scale.MaximumValue=100;  
scale.Interval=20;  
scale.ScaleBarLength=100;  
scale.ScaleBarColor=Color.FromRgb(250,236,236);  
scale.LabelColor=Color.FromRgb(84,84,84);  
scale.MinorTicksPerInterval=1;  
scale.ScaleBarSize=13;  
scale.ScalePosition=ScalePosition.BackWard;  
. . .

[XAML]

<gauge:SflinearGauge>
	<gauge.SfLinearGauge.Scales>
		<gauge.ScaleMinimumValue="0" MaximumValue="100"ScaleBarLength="100" LablePostfix="%"ScaleBarColor="230" ScaleBarColor="#EDEDED"LableColor="#545454" MinorTicksPerInterval="1" ScaleBarSize="13" />
	</gauge.SfLinearGauge.Scales> 
</gauge:SfLinearGauge>

Specify Range

We can improve the readability of data by including ranges that quickly show when values fall within specific ranges.

[C#]

_//Range_  
LinearRangerange=newLinearRange();  
range.StartValue=0;  
range.EndValue=50;  
range.Color=Color.FromRgb(234,248,249);  
range.StartWidth=10;  
range.EndWidth=10;  
range.Offset=-0.17;  
scale.Ranges.Add(range);

[XAML]

<local:SfLinearGauge>
	<local:SfLinearGauge:Scales>
		<local:ScaleMinimumValue="0" MaximumValue="100"ScaleBarLength="100" LablePostfix="%"ScaleBarColor="230" ScaleBarColor="#EDEDED"LableColor="#545454" MinorTicksPerInterval="1" ScaleBarSize="20" >
			<local:Scale.Ranges>
				<local:Range StartValue="0" EndValue="50" Color="#3288C6" Offset="-0.3" />
			</local:Scale.Ranges>
		</local:Scale>
	</local:SfLinearGauge:Scales>
</local:SfLinearGauge>

Add a Pointer

We will now create a pointer and associate it with a scale.

[C#]

List<LinearPointer>pointers=newList<LinearPointer>();  
_//SymbolPointer_  
SymbolPointersymbolPointer=newSymbolPointer();  
symbolPointer.Value=50;  
symbolPointer.Offset=0.0;  
symbolPointer.Thickness=3;  
symbolPointer.Color=Color.FromRgb(65,77,79);  
  
_//BarPointer_  
BarPointerrangePointer=newBarPointer();  
rangePointer.Value=50;  
rangePointer.Color=Color.FromRgb(206,69,69);  
rangePointer.Thickness=10;  
pointers.Add(symbolPointer);  
pointers.Add(rangePointer);  
... scale.Pointers=pointers;  
scales.Add(scale);  
linearGauge.Scales=scales;
...

[XAML]

<local:SfLinearGauge>
	<local:SflinearGauge:Scales>
		<local:Scale MinimumValue="0" MaximumValue="100" ScaleBarLength="100" LablePostfix="%"ScaleBarColor="230" ScaleBarColor="#EDEDED" LableColor="#545454" MinorTicksPerInterval="1" ScaleBarSize="20" >
			<local:Scale.Ranges>
				<local:Range StartValue="0" EndValue="50" Color="#3288C6"Offset="-0.3" />
			</local:Scale.Ranges>
			<local:Scale.Pointers>
				<local:SymbolPointer Value="50" Color="Red" Offset="0.3" />
				<local:BarPointerValue="50" Color="White"/>
			</local:Scale.Pointers>
		</local:Scale>
	</local:SfLinearGauge:Scales>
</local:SfLinearGauge >

Add a Minor and Major Tick settings

A minor and major Tick settings provides a way of indicating the current value.

[C#]

_//MinorTickssetting_  
LinearTickSettingsminor=newLinearTickSettings();  
minor.Length=10;  
minor.Color=Color.FromRgb(175,175,175);  
minor.Thickness=1;  
scale.MinorTickSettings=minor;  
  
_//MajorTickssetting_  
LinearTickSettingsmajor=newLinearTickSettings();  
major.Length=10;  
major.Color=Color.FromRgb(175,175,175);  
major.Thickness=1;  
scale.MajorTickSettings=major;

[XAML]

<local:SfLinearGauge>
	<local:SfLinearGauge:Scales>
		<local:Scale MinimumValue="0" MaximumValue="100" ScaleBarLength="100" LablePostfix="%" ScaleBarColor="230" ScaleBarColor="#EDEDED" LableColor="#545454" MinorTicksPerInterval="1" ScaleBarSize="20" >
			<local:Scale.Ranges>
				<local:Range StartValue="0" EndValue="50" Color="#3288C6" Offset="-0.3" />
			</local:Scale.Ranges>
			<local:Scale.Pointers>
				<local:SymbolPointer Value="50" Color="Red" Offset="0.3" />
				<local:BarPointer Value="50" Color="White"/>
			</local:Scale.Pointers>
			<local:Scale.MinorTickSettings>
				<local:LinearTickSettings Length="10" Color="#4B4B4B" Thickness="1" />
			</local:Scale.MinorTickSettings>
			<local:Scale.MajorTickSettings>
				<local:LinearTickSettings Length="10" Color="#4B4B4B" Thickness="1" />
			</local:Scale.MajorTickSettings>
		</local:Scale>
	</local:SfLinearGauge:Scales>
</local:SfLinearGauge>

Screenshots

#TreeMap

Overview

This section provides a quick overview for working with Essential Treemap for Xamarin.Forms. We will walk through the entire process of creating a real world Treemap.

The goal of this tutorial is to visualize population growth across continents. You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android and Windows Phone projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio\14.1.0.41\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

pcl\Syncfusion.SfTreeMap.XForms.dll

Android project

android\Syncfusion.SfTreeMap.XForms.dll 
android\Syncfusion.SfTreeMap.Android.dll
android\Syncfusion.SfTreeMap. XForms.Android.dll

iOS project

ios\Syncfusion.SfTreeMap.iOS.dll 
ios\Syncfusion.SfTreeMap.XForms.iOS.dll
ios\Syncfusion.SfTreeMap.XForms.dll

Windows Phone project

wp8\Syncfusion.SfTreeMap.XForms.dll 
wp8\Syncfusion.SfTreeMap.WP8.dll
wp8\Syncfusion.SfTreeMap.XForms.WinPhone.dll

Windows Phone 8.1 project

wp81\Syncfusion.SfTreeMap.XForms.dll 
wp81\Syncfusion.SfTreeMap.WP.dll
wp81\Syncfusion.SfTreeMap.XForms.WinPhone.dll

WinRT project

winrt\Syncfusion.SfTreeMap.XForms.dll 
winrt\Syncfusion.SfTreeMap.WinRT.dll
winrt\Syncfusion.SfTreeMap.XForms.WinRT.dll

UWP Project

uwp\Syncfusion.SfTreeMap.UWP.dll
uwp\Syncfusion.SfTreeMap.XForms.dll
uwp\Syncfusion.SfTreeMap.XForms.UWP.dll

Currently an additional step is required for Windows Phone, WindowsPhone 8.1 and iOS projects. We need to create an instance of the TreeMap custom renderer as shown below.

Create an instance of SfTreeMapRenderer in MainPage constructor of the Windows Phone and WindowsPhone 8.1 project as shown

public MainPage()
{
	new SfTreeMapRenderer ();
     ...  
}

Create an instance of SfTreeMapRenderer in the FinishedLaunching overridden method of the AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
	new SfTreeMapRenderer ();
	...  
}

Initializing the TreeMap

The Treemap control can be configured entirely in C# code or using XAML markup.

The first step is to create a TreeMap object

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms
xmlns:local="clr-
namespace:Syncfusion.SfTreeMap.XForms;assembly=Syncfusion.SfTreeMap.XForms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
x:Class="TreeMapGettingStarted.Sample" BackgroundColor=îBlackî>
	<ContentPage.Content >
		<local:SfTreeMap x:Name="treeMap">
		</local:SfTreeMap>
	</ContentPage.Content>
</ContentPage>

public static Page GetMainPage()
{
        SfTreeMap treeMap = new SfTreeMap();
        return new ContentPage {
		BackgroundColor = Color.Black,
		Content = treeMap,
	};
}

Populating TreeMap Items

The TreeMap accepts a collection of TreeMapItems as input.

[XAML]

// BindingContext is set for the content page class.
// DataModel model = new DataModel();
//..
//..
//this.BindingContext = model;

<local:SfTreeMap x:Name="treeMap" Items = "{Binding TreeMapItems}">
</local:SfTreeMap>

[C#]

public class DataModel : BindableObject
{
	public static readonly BindableProperty TreeMapItemsProperty =
		BindableProperty.Create>(p =>
			p.TreeMapItems, null, BindingMode.TwoWay, null, null, null, null);

	public ObservableCollection TreeMapItems
	{
		get { return (ObservableCollection)GetValue(TreeMapItemsProperty); }
		set { SetValue(TreeMapItemsProperty, value); }
	}

	public DataModel()
	{
		this.TreeMapItems = new ObservableCollection();

		TreeMapItems.Add(newTreeMapItem() { Label = "Indonesia", ColorWeight = 3,Weight = 237641326 });
		TreeMapItems.Add(newTreeMapItem() { Label = "Russia", ColorWeight = 2, Weight = 152518015 });
		TreeMapItems.Add(newTreeMapItem() { Label = "United States", ColorWeight = 4, Weight = 315645000 });
		TreeMapItems.Add(newTreeMapItem() { Label = "Mexico", ColorWeight = 2, Weight = 112336538 });
		TreeMapItems.Add(newTreeMapItem() { Label = "Nigeria", ColorWeight = 2, Weight = 170901000 });
		TreeMapItems.Add(newTreeMapItem() { Label = "Egypt", ColorWeight = 1, Weight = 83661000 });
		TreeMapItems.Add(newTreeMapItem() { Label = "Germany", ColorWeight = 1, Weight = 81993000 });
		TreeMapItems.Add(newTreeMapItem() { Label = "France", ColorWeight = 1, Weight = 65605000 });
		TreeMapItems.Add(newTreeMapItem() { Label = "UK", ColorWeight = 1, Weight = 63181775 });
	}
}

SfTreeMap treeMap = new SfTreeMap();
DataModel model = new DataModel();
treeMap.Items = model.TreeMapItems;

Grouping of TreeMap Items using Levels

You can group TreeMap Items using two types of levels

TreeMap Flat Level
TreeMap Hierarchical Level

Customizing TreeMap Appearance using ranges

Fill colors for value ranges can be specified using From and To properties.

[XAML]

<local:SfTreeMap x:Name="treeMap" Items = "{Binding TreeMapItems}">
	<local:SfTreeMap.LeafItemColorMapping>
		<local:RangeColorMapping>
			<local:RangeColorMapping.Ranges>
				<local:Range LegendLabel = "1 % Growth" From = "0" To = "1" Color =  "#77D8D8"  />
				<local:Range LegendLabel = "2 % Growth" From = "0" To = "2" Color =  "#AED960"  />
				<local:Range LegendLabel = "3 % Growth" From = "0" To = "3" Color =  "#FFAF51"  />
				<local:Range LegendLabel = "4 % Growth" From = "0" To = "4" Color =  "#F3D240"  />
			</local:RangeColorMapping.Ranges>
		</local:RangeColorMapping>
	</local:SfTreeMap.LeafItemColorMapping>
</local:SfTreeMap>

[C#]

... 
ObservableCollection ranges = new ObservableCollection();
ranges.Add(newRange() { LegendLabel="1 % Growth", From = 0, To = 1, Color = Color.FromHex("#77D8D8") });
ranges.Add(newRange() { LegendLabel = "2 % Growth", From = 0, To = 2, Color = Color.FromHex("#AED960") });
ranges.Add(newRange() { LegendLabel = "3 % Growth", From = 0, To = 3, Color = Color.FromHex("#FFAF51") });
ranges.Add(newRange() { LegendLabel = "4 % Growth", From = 0, To = 4, Color = Color.FromHex("#F3D240") });

treeMap.LeafItemColorMapping = new RangeColorMapping (){ Ranges = ranges };

Leaf level TreeMap item customization

The Leaf level TreeMap items can be customized using LeafItem Setting.

[XAML]

<local:SfTreeMap x:Name="treeMap" Items = "{Binding TreeMapItems}">
	<!-- ... -->
	<local:SfTreeMap.LeafItemSettings>
		<local: LeafItemSettings BorderWidth="1" BorderColor="White"  />
	</local:SfTreeMap.LeafItemSettings >
</local:SfTreeMap>

[C#]

...
LeafItemSettings leafSetting = new LeafItemSettings();
leafSetting.BorderWidth = 1;
leafSetting.BorderColor = Color.White;
    
treeMap.LeafItemSettings = leafSetting;

Enable Legend

Displaying legends if only appropriate for TreeMaps whose leaf nodes have been colored using RangeColorMapping. You can set ShowLegend property value to "True"to make the legend visible.

Label for Legends

You can customize the labels of the legend items using the LegendLabel property of RangeColorMapping.

[XAML]

<local:SfTreeMap.LegendSettings>
	<local:LegendSettings  ShowLegend ="true" IconSize="15,15" Size="350,70"  />
</local:SfTreeMap.LegendSettings>

[C#]

...
LegendSettings legendSettings = new LegendSettings();
legendSettings.ShowLegend= true;
legendSettings.IconSize = new Size(15, 15);
legendSettings.Size = new Size (350, 70);

treeMap.LegendSettings= legendSettings;

#Maps

Overview

This section explains you the steps to configure a Maps control in a real-time scenario and also provides a walk-through on some of the customization features available in Maps control. You can also download the entire source code of this demo from here.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android and Windows Phone projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio\14.1.0.41\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

pcl\Syncfusion.SfMaps.XForms.dll

Android project

android\Syncfusion.SfMaps.XForms.dll 
android\Syncfusion.SfMaps.Android.dll
android\Syncfusion.SfMaps. XForms.Android.dll

iOS project

ios\Syncfusion.SfMaps.iOS.dll 
ios\Syncfusion.SfMaps.XForms.iOS.dll
ios\Syncfusion.SfMaps.XForms.dll

Windows Phone project

wp8\Syncfusion.SfMaps.XForms.dll 
wp8\Syncfusion.SfMaps.WP8.dll
wp8\Syncfusion.SfMaps.XForms.WinPhone.dll

Windows Phone 8.1 project

wp81\Syncfusion.SfMaps.XForms.dll 
wp81\Syncfusion.SfMaps.WP.dll
wp81\Syncfusion.SfMaps.XForms.WinPhone.dll

WinRT project

winrt\Syncfusion.SfMaps.XForms.dll 
winrt\Syncfusion.SfMaps.WinRT.dll
winrt\Syncfusion.SfMaps.XForms.WinRT.dll

UWP Project

uwp\Syncfusion.SfMaps.UWP.dll
uwp\Syncfusion.SfMaps.XForms.dll
uwp\Syncfusion.SfMaps.XForms.UWP.dll

Currently an additional step is required for Windows Phone, WindowsPhone 8.1 and iOS projects. We need to create an instance of the Maps custom renderer as shown below.

Create an instance of SfMapsRenderer in MainPage constructor of the Windows Phone and WindowsPhone 8.1 project as shown

public MainPage()
{
	new SfMapsRenderer ();
     ...  
}

Create an instance of SfMapsRenderer in the FinishedLaunching overridden method of the AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
	new SfMapsRenderer ();
	...  
}

Initializing the Maps

The Maps control can be configured entirely in C# code or using XAML markup.

The first step is to create a Map object

[XAML]

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms
xmlns:local="clr-
namespace:Syncfusion.SfMaps.XForms;assembly=Syncfusion.SfMaps.XForms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
x:Class="MapsGettingStarted.Sample" BackgroundColor=îBlackî>
	<ContentPage.Content >
		<local:SfMaps x:Name="Maps">
		</local:SfMaps>
	</ContentPage.Content>
</ContentPage>

[C#]

public static Page GetMainPage()
{
        SfMaps map = new SfMaps();
        return new ContentPage {
		BackgroundColor = Color.Black,
		Content = Maps,
	};
}

Populating Map Items

The Map accepts a collection of MapItems as input.

[XAML]

// BindingContext is set for the content page class.
// DataModel model = new DataModel();
//..
//..
//this.BindingContext = model;

<local:Map x:Name="Maps" Items = "{Binding }">
</local:SfMaps>

[C#]

List<AgricultureData> GetDataSource()
		{
			List<AgricultureData> list= new List<AgricultureData>();
			list.Add(new AgricultureData("Alabama" , "Vegetables" , 42));
			list.Add(new AgricultureData( "Alaska" , "Vegetables" , 0 ));
			list.Add(new AgricultureData( "Arizona" , "Rice" , 36 ));
			list.Add(new AgricultureData( "Arkansas" , "Vegetables" , 46 ));
			list.Add(new AgricultureData( "California" , "Rice" , 24 ));
			list.Add(new AgricultureData( "Colorado" , "Rice" , 31));
			list.Add(new AgricultureData( "Connecticut" , "Grains" , 18 ));
			list.Add(new AgricultureData( "Delaware" , "Grains" , 28 ));
			list.Add(new AgricultureData( "District of Columbia" , "Grains" , 27 ));
			list.Add(new AgricultureData( "Florida" , "Rice" , 48 ));
			list.Add(new AgricultureData( "Georgia" , "Rice" , 44));
			list.Add(new AgricultureData( "Hawaii" , "Grains" , 49 ));
			list.Add(new AgricultureData( "Idaho" , "Grains" , 8 ));
			list.Add(new AgricultureData( "Illinois" , "Vegetables" , 26 ));
			list.Add(new AgricultureData( "Indiana" , "Grains" , 21 ));
			list.Add(new AgricultureData( "Iowa" , "Vegetables" , 13 ));
			list.Add(new AgricultureData( "Kansas" , "Rice" , 33 ));
			list.Add(new AgricultureData( "Kentucky" , "Grains" , 32 ));
			list.Add(new AgricultureData( "Louisiana" , "Rice" , 47 ));
			list.Add(new AgricultureData( "Maine" , "Grains" , 3 ));
			list.Add(new AgricultureData( "Maryland" , "Grains" , 30 ));
			list.Add(new AgricultureData( "Massachusetts" , "Grains" , 14 ));
			list.Add(new AgricultureData( "Michigan" , "Grains" , 50 ));
			list.Add(new AgricultureData( "Minnesota" , "Wheat" , 10 ));
			list.Add(new AgricultureData( "Mississippi" , "Vegetables" , 43 ));
			list.Add(new AgricultureData( "Missouri" , "Vegetables" , 35 ));
			list.Add(new AgricultureData( "Montana" , "Grains" , 2 ));
			list.Add(new AgricultureData( "Nebraska" , "Rice" , 15 ));
			list.Add(new AgricultureData( "Nevada" , "Wheat" , 22 ));
			list.Add(new AgricultureData( "New Hampshire" , "Grains" , 12 ));
			list.Add(new AgricultureData( "New Jersey" , "Vegetables" , 20 ));
			list.Add(new AgricultureData( "New Mexico" , "Rice" , 41 ));
			list.Add(new AgricultureData( "New York" , "Vegetables" , 16 ));
			list.Add(new AgricultureData( "North Carolina" , "Rice" , 38 ));
			list.Add(new AgricultureData( "North Dakota" , "Grains" , 4 ));
			list.Add(new AgricultureData( "Ohio" , "Vegetables" , 25 ));
			list.Add(new AgricultureData( "Oklahoma" , "Rice" , 37 ));
			list.Add(new AgricultureData( "Oregon" , "Wheat" , 11 ));
			list.Add(new AgricultureData( "Pennsylvania" , "Vegetables" , 17 ));
			list.Add(new AgricultureData( "Rhode Island" , "Grains" , 19 ));
			list.Add(new AgricultureData( "South Carolina" , "Rice" , 45 ));
			list.Add(new AgricultureData( "South Dakota" , "Grains" , 5 ));
			list.Add(new AgricultureData( "Tennessee" , "Vegetables" , 39 ));
			list.Add(new AgricultureData( "Texas" , "Vegetables" , 40 ));
			list.Add(new AgricultureData( "Utah" , "Rice" , 23 ));
			list.Add(new AgricultureData( "Vermont" , "Grains" , 9 ));
			list.Add(new AgricultureData( "Virginia" , "Rice" , 34 ));
			list.Add(new AgricultureData( "Washington" , "Vegetables" , 1 ));
			list.Add(new AgricultureData( "West Virginia" , "Grains" , 29 ));
			list.Add(new AgricultureData( "Wisconsin" , "Grains" , 7 ));
			list.Add(new AgricultureData( "Wyoming" , "Wheat" , 6 ));
			return list;
		}

Loading Shapes to Maps

The Maps control supports reading and loading shape files. A shape file is a set of files which are stored in a non-topological geometry and the attribute information for the spatial features and records in a data set.

A shape file can be a set of files or a single file. Generally, the shape file contains the following files:

Main file (.shp)
dBASE file (.dbf)

These files need to be added in Asset folder.

[XAML]

<syncfusion:SfMap>                     
        <syncfusion:SfMap.Layers>                
            <syncfusion:ShapeFileLayer   Uri="usa_state.shp">                                    
            </syncfusion:ShapeFileLayer>           
        </syncfusion:SfMap.Layers>        
    </syncfusion:SfMap>

[C#]

            maps = new SfMaps ();
            ShapeFileLayer layer = new ShapeFileLayer();
			layer.Uri ="usa_state.shp";
            maps.Layers.Add (layer);

Adding Marker to the Maps

Markers can be added into the shape layers. The below code snippets enables you to do so.

[XAML]

<SfMaps:ShapeFileLayer.Markers>
      <maps:MapMarker Label="United States" Latitude="38.8833" Longitude= "-77.0167" />
      <maps:MapMarker Label="Brazil" Latitude="-15.7833" Longitude= "-47.8667" />
      <maps:MapMarker Label="India" Latitude="21.0000" Longitude= "78.0000" />
      <maps:MapMarker Label="China" Latitude="35.0000" Longitude= "103.0000" />
      <maps:MapMarker Label="Indonesia" Latitude="-6.1750" Longitude= "106.8283" />          
</SfMaps:ShapeFileLayer.Markers>

[C#]

            ShapeFileLayer layer = new ShapeFileLayer();
            layer.Markers.Add(new MapMarker(){ Label="United States" Latitude="38.8833" Longitude= "-77.0167"});
            layer.Markers.Add(new MapMarker(){ Label="Brazil" Latitude="-15.7833" Longitude= "-47.8667"});
            layer.Markers.Add(new MapMarker(){Label="India" Latitude="21.0000" Longitude= "78.0000"});
            layer.Markers.Add(new MapMarker(){ Label="China" Latitude="35.0000" Longitude= "103.0000"});
            layer.Markers.Add(new MapMarker(){ Label="Indonesia" Latitude="-6.1750" Longitude= "106.8283"});

#Creating your first Barcode in Xamarin.Forms

Essential Barcode for Xamarin Forms provides a perfect approach to encode texts using supported symbol types that comprises one dimensional barcodes and two dimensional barcodes. The basic structure of a barcode consists of one or more data characters, optionally one or two check characters, a start pattern as well as a stop pattern.

This section explains how to configure a barcode for Xamarin Forms application. The following screenshot illustrates the final output of barcode on iOS, Android and Windows Phone devices. You can also download the entire source code of this demo here.

Referencing Essential Studio components in your solution

When you acquire Essential Studio components through the Xamarin Component Store interface from your IDE, after adding the components to your Xamarin.iOS, Xamarin.Android and Windows Phone projects through the Component Manager, you have to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL Project in your solution. You can do this manually by adding the relevant PCL assembly references to your PCL project contained in the following path inside your solution folder.

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively, when you download Essential Studio from Syncfusion.com or through the Xamarin Store web interface, add all the assembly references manually.

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically

{Syncfusion Installed location}\Essential Studio\14.1.0.41\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

Otherwise, after downloading through the Xamarin Store web interface, you can find all the required assemblies in the following folder

{download location}\syncfusionessentialstudio-version\lib

Then, you can add the assembly references to the respective projects as follows.

PCL project

pcl\Syncfusion.SfBarcode.XForm.dll

Android project

android\Syncfusion.SfBarcode.Android.dll
android\Syncfusion.SfBarcode.XForms.Android.dll

iOS project

ios\Syncfusion.SfBarcode.iOS.dll 
ios\Syncfusion.SfBarcode.XForms.iOS.dll
ios\Syncfusion.SfBarcode.XForm.dll

Windows Phone project

wp8\Syncfusion.SfBarcode.WP8.dll
wp8\Syncfusion.SfBarcode.XForms.WinPhone.dll
wp8\Syncfusion.SfBarcode.XForm.dll

WinRT project

winrt\Syncfusion.SfBarcode.WinRT.dll
winrt\Syncfusion.SfBarcode.XForms.WinRT.dll
winrt\Syncfusion.SfBarcode.XForms.dll

UWP project

uwp\Syncfusion.SfBarcode.UWP.dll
uwp\Syncfusion.SfBarcode.XForms.UWP.dll
uwp\Syncfusion.SfBarcode.XForms.dll

Windows Phone project

wp81\Syncfusion.SfBarcode.WP.dll
wp81\Syncfusion.SfBarcode.XForms.WinPhone.dll
wp81\Syncfusion.SfBarcode.XForms.dll

Note: Essential Barcode for Xamarin is compatible with Xamarin.Forms 1.3.4.6332.

Currently an additional step is required for configuring Windows Phone and iOS projects. We need to create an instance of the Barcode custom renderer as shown below.

Create an instance of SfBarcodeRenderer in the MainPage constructor of the Windows Phone project as shown below

public MainPage()
{
	new SfBarcodeRenderer();
	...  
}

Create an instance of SfBarcodeRenderer in FinishedLaunching overridden method of AppDelegate class in the iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
	new SfBarcodeRenderer();
	...  
}

Adding and configuring the Barcode

The Barcode control can be configured entirely in C# code or using XAML markup.

Add reference to SFBarcode such as follows

[C#]

using Syncfusion.SfBarcode.XForms;

[XAML]

xmlns:syncfusion="clr-namespace:Syncfusion.SfBarcode.XForms;assembly=Syncfusion.SfBarcode.XForms"

Create an instance of SfBarcode in XAML or code-behind using the reference of SfBarcode.

[C#]

SfBarcode barcode = new SfBarcode();

[XAML]

<syncfusion:SfBarcode/>

Then, you can assign the text that you want to encode.

[C#]

barcode.Text = "www.wikipedia.org";

[XAML]

<syncfusion:SfBarcode Text="www.wikipedia.org"/>

Specify the required symbology to encode the given text. By default, the given text is encoded using Code 39 symbology.

[C#]

barcode.Symbology = BarcodeSymbolType.QRCode;

[XAML]

<syncfusion:SfBarcode Text="www.wikipedia.org" Symbology="QRCode"/>

For customizing the barcode, initialize the settings of corresponding barcode symbology.

[C#]

SfQRBarcodeSettings settings = new SfQRBarcodeSettings();
settings.XDimension = 6;
barcode.SymbologySettings = settings;

[XAML]

<syncfusion:SfBarcode Text="www.wikipedia.org" Symbology="QRCode">
    <syncfusion:SfBarcode.SymbologySettings>
      <syncfusion:SfQRBarcodeSettings XDimension="6"/>
    </syncfusion:SfBarcode.SymbologySettings>
</syncfusion:SfBarcode>

Finally, the barcode is generated as displayed in the following screenshot for the following code example.

[C#]

public SamplePage()
{
      InitializeComponent();
      SfBarcode barcode = new SfBarcode();
      barcode.BackgroundColor = Color.Gray;
      barcode.Text = "www.wikipedia.org";
      barcode.Symbology = BarcodeSymbolType.QRCode;
      SfQRBarcodeSettings settings = new SfQRBarcodeSettings();
      settings.XDimension = 6;
      barcode.SymbologySettings = settings;
      this.Content = barcode;
}

[XAML]

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfBarcode.XForms;assembly=Syncfusion.SfBarcode.XForms"
             x:Class="BarcodeGettingStarted.SamplePage">
  <syncfusion:SfBarcode BackgroundColor="Gray" Text="www.wikipedia.org" Symbology="QRCode">
    <syncfusion:SfBarcode.SymbologySettings>
      <syncfusion:SfQRBarcodeSettings XDimension="6"/>
    </syncfusion:SfBarcode.SymbologySettings>
  </syncfusion:SfBarcode>
</ContentPage>

#XlsIO

Essential XlsIO for Xamarin is a .NET PCL library that can be used to create and modify Microsoft Excel documents from within Xamarin.iOS, Xamarin.Android and Xamarin.Forms applications.

Supported Features

Charts for Data Visualization
Conditional Formatting
Data Validation
Tables
Importing XML Data
Importing Business Objects
Formulas
Template Marker
AutoShapes
Cells Formatting
Cell Grouping
Data Filtering
Data Sorting
Find Data
Comments
HTML Conversion
ODS Conversion
Named Ranges
Number Formats
Page Settings
Page Breaks
Header and Footer Images
R1C1 Reference Mode
Re-calculation
R1C1 Formulas
Discontiguous Named Ranges
Hyperlinks
Freeze Panes
Sheet Tab Color RGB
Hide Rows and Columns

Getting Started

The following steps demonstrate how to create a simple Excel document in a Xamarin.Forms project using Essential XlsIO. You can also download the entire source code of this demo from here.

Create new Xamarin.Forms portable project.
Refer Essential Studio components in your solution. XlsIO is packaged as a portable class library, so currently there is no way to add reference to it from within the Xamarin component store IDE interface. You would need to obtain the required assemblies either through the Xamarin component store web interface or from Syncfusion.com. Typically you would add reference to XlsIO only in the PCL project of your Xamarin.Forms application. The required assembly references are:
```
Syncfusion.Compression.Portable.dll
Syncfusion.XlsIO.Portable.dll
```
Note: If you had already referenced one of our UI components (Chart, Gauge or TreeMap) components from within the Xamarin component store IDE interface, then the XlsIO assembly has already been downloaded and available in your solution folder. You can then manually add references from that folder.
```
Components/syncfusionessentialstudio-version/lib/pcl/
```

Use the following C# code to generate a simple excel file using Essential XlsIO

//Instantiate Excel engine
ExcelEngine excelEngine = new ExcelEngine();

//Excel application
IApplication application = excelEngine.Excel;
application.DefaultVersion = ExcelVersion.Excel2013;

//A new workbook is created.[Equivalent to creating a new workbook in MS Excel]
//The new workbook will have 1 worksheet
IWorkbook workbook = application.Workbooks.Create(1);

//The first worksheet object in the worksheets collection is accessed.
IWorksheet sheet = workbook.Worksheets[0];
sheet.Range["A1"].Text = "Hello World!";
workbook.Version = ExcelVersion.Excel2013;

//Saving workbook as stream
MemoryStream stream = new MemoryStream();
workbook.SaveAs(stream);

//Closing workbook
workbook.Close();

//Disposing excel engine
excelEngine.Dispose();

Screenshots

#DocIO

Essential DocIO for Xamarin is a .NET PCL library that can be used to read and write Microsoft Word documents from within Xamarin.iOS, Xamarin.Android and Xamarin.Forms applications.

Features

Here is a quick summary of the features available in Essential DocIO

Create new Word documents.
Modify existing Microsoft Word documents.
Format text, tables using built-in and custom styles.
Insert bullets and numbering.
Insert, edit, and remove fields, form fields, hyperlinks, endnotes, footnotes, comments, Header footers.
Insert and extract images, OLE objects.
Insert line breaks, page breaks, column breaks and section breaks.
Find and Replace text with its original formatting.
Insert Bookmarks and navigate corresponding bookmarks to insert, replace, and delete content.
Advanced Mail merge support with different data sources.
Clone multiple documents and merge into a single document.
Read and write Built-In and Custom Document Properties.
Define page setup settings and background.
Create or edit Word 97-2003 to 2016 documents.
Saving a Word document as an ODT and HTML.
Opening/saving a RTF and Text document.

Getting Started

The following steps demonstrate how to create a simple word document in a Xamarin.Forms project using Essential DocIO. You can also download the entire source code of this demo from here.

Create new Xamarin.Forms portable project.
Next, you need to reference Essential Studio components in your solution. DocIO is packaged as a portable class library so currently there is no way to add reference to it from within the Xamarin component store IDE interface. You would need to obtain the required assemblies either through the Xamarin component store web interface or from Syncfusion.com. Typically you would add reference to DocIO only in the PCL project of your application. The required assembly references are
```
Syncfusion.Compression.Portable.dll
Syncfusion.DocIO.Portable.dll
Syncfusion.OfficeChart.Portable.dll
```
If you had already referenced one of our UI components (Chart, Gauge or Treemap) components from within the Xamarin component store IDE interface then the DocIO assembly has already been downloaded and available in your solution folder, You can then manually add references from that folder.
```
Components/syncfusionessentialstudio-version/lib/pcl/
```
A new Word document can be easily created from scratch by instantiating a new instance of the WordDocument class. This class is the root node for all other nodes in the Document Object Model for Essential DocIO library. Using this DOM, you can add, edit, and remove content from documents by iterating elements. The following code example illustrates how to create a Word document with minimal content (one section and one paragraph).
```
//Creates a new Word document instance
WordDocument doc = new WordDocument();

//Adds one section and one paragraph to the document.
doc.EnsureMinimal();
```
Add a new section at the end of a document by invoking the AddSection method of WordDocument class. The following code example illustrates how to add a new section to a Word document.
```
//Adds a new section to the document.
WSection section = doc.AddSection();
```
Add a new paragraph at the end of section by invoking the AddParagraph method of WSection class; also, you can add a new table at the end of section by invoking the AddTable method of WSection class. The following code example illustrates how to add a new Paragraph and Table to a Word document.
```
//Adds a new Paragraph to the section.
IWParagraph para = section.AddParagraph();

//Adds a new Table to the section.
IWTable table = section.AddTable();
```

You can append text to a paragraph by invoking the AppendText method of WParagraph class. The following code example illustrates how to append text to a Word document.

//Appends text to the paragraph.
paragraph.AppendText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");

You can save a Word document by invoking the Save method of WordDocument class. The following code example illustrates how to save a Word document.

//Saves the generated Word document.
MemoryStream stream = new MemoryStream();
doc.Save(stream, FormatType.Word2013);

//Releases the resources used by the WordDocument instance.
doc.Close();

Screenshots

#PDF

Essential PDF for Xamarin is a .NET PCL library that can be used to create and modify Adobe PDF documents from within Xamarin.iOS, Xamarin.Android and Xamarin.Forms applications.

All of the elements in a typical PDF file like the text, formatting, images and tables are accessible through a comprehensive set of API's. This makes it possible to easily create richly formatted PDF documents as well as modify existing ones.

Features:

Document level features:

Create and load PDF documents files and streams
Save PDF files to disk and Streams
Document information
Document viewer preference
Document file attachments
Document level java scripts and actions
Document outline
Add and remove PDF pages
Import page form existing document
Document merging
Booklet
Stamp
Page orientation
Page sizes
Headers and Footers
Actions
Named destination
XMP metadata

Text

Drawing Text
Text formatting
Pagination

Graphics

Pen and brush for stroking operations
Graphics primitives: lines, ellipses, rectangles, arcs, pie, Bezier curves, paths.
Layers
Patterns
Drawing of external page content
Color spaces
Barcode

Forms

Create, load and save PDF forms
Add, edit, remove and rename form fields
Supporting text box fields, combo box fields, list box fields, push button fields, radio button fields
Flatten form fields
Enumerating the form fields
Form actions

Fonts

Standard Fonts

Images

Jpeg image support

Tables :

Cell/Row/Column formatting
Header
Pagination
Borders
Row span and column span
Nested
Cell Padding and spacing
Built-in table styles

Page Level Operations

Headers and Footers
Page Label
Automatic fields

Pdf Annotations

Add, edit and remove pdf annotations
Custom appearance for annotations

Supported annotations

Free Text annotation
Rubber stamp annotations
File attachment annotation
Link annotation
Line annotation
Ink annotations
Text markup annotations
sound annotations
3D-Annotations
Shape annotations
Flatten annotations

Barcode

Add the barcode into the PDF document

Supported barcodes:

QR barcode
Data matrix barcode
Code39
Code39ext
Code 11
Coda bar
Code32
Code93
Code93 extended
Code128 A
Code128 B
Code128 C
GS1-128

Getting Started:

The following steps demonstrate how create a simple PDF document in a Xamarin.Forms project using Essential PDF. You can also download the entire source code of this demo from here.

Create a new Xamarin.Forms portable project.
Next, you need to reference Essential Studio components in your solution. Essential PDF is packaged as a portable class library so currently there is no way to add reference to it from within the Xamarin component store IDE interface. You would need to obtain the required assemblies either through the Xamarin component store web interface or from Syncfusion.com. Typically you would add reference to Essential PDF only in the PCL project of your application. The required assembly references are
```
Syncfusion.Compression.Portable.dll
Syncfusion.Pdf.Portable.dll
```
Note: If you had already referenced one of our UI components (Chart, Gauge or Treemap) components from within the Xamarin component store IDE interface then the DocIO assembly has already been downloaded and available in your solution folder, You can then manually add references from that folder.
```
Components/syncfusionessentialstudio-version/lib/pcl/
```

Use the following C# code to generate a simple PDF using Essential PDF

    //Create a new PDF document.
    PdfDocument document = new PdfDocument();

    //Add a page
    PdfPage page = document.Pages.Add();

    //Creates Pdf graphics for the page
    PdfGraphics graphics = page.Graphics;

    //Creates a solid brush.
    PdfBrushbrush =newPdfSolidBrush(Color.Black);

    //Sets the font.
    PdfFontfont =newPdfStandardFont(PdfFontFamily.Helvetica, fontSize);

    //Draws the text.
    graphics.DrawString("Lorem Ipsum is simply dummy text of the
	printing and typesetting industry. Lorem Ipsum has been the
	standard dummy text ever since the 1500s, when an unknown printer
	took a galley of type and scrambled it to make a type specimen
	book.", font, brush, new RectangleF(0,0, page.GetClientSize().
	Width,200));

    //Saves the document.
    MemoryStream stream = new MemoryStream();
    document.Save(stream);
    document.Close(true);

Screenshots

#PDF Viewer (Preview)

Essential PDF viewer for Xamarin is a new control that allows PDF documents to be viewed within your Xamarin.Forms application for iOS, Android, and UWP.

Features

Here is a quick summary of the features available in Essential PDF Viewer

View PDF files.
Navigate through the pages seamlessly.
Magnification support.
Virtualized pages.
Text search support.

Getting Started

This section explains about the assemblies required for the deployment of SfPdfViewer and how to create simple application using the SfPdfViewer control.

You can also download the entire source code of this demo from here.

Create a simple application with the SfPdfViewer

Follow the below steps to create a simple application with the SfPdfViewer and load a PDF document.

1.Create a new Cross Platform application for Xamarin.Forms.Portable in the Visual Studio.

Add the following assemblies to the respective projects as follows:

PCL project

pcl\Syncfusion.Compression.Portable.dll
pcl\Syncfusion.Pdf.Portable.dll
pcl\ Syncfusion.SfPdfViewer.XForms.dll

Android project

pcl\Syncfusion.Compression.Portable.dll
pcl\Syncfusion.Pdf.Portable.dll
pcl\ Syncfusion.SfPdfViewer.XForms.dll
android\Syncfusion.SfPdfViewer.XForms.Andriod.dll
android\Syncfusion.SfPdfViewer.XForms.dll

UWP project

pcl\Syncfusion.Compression.Portable.dll
pcl\Syncfusion.Pdf.Portable.dll
pcl\ Syncfusion.SfPdfViewer.XForms.dll
uwp\Syncfusion.SfPdfViewer.XForms.UWP.dll
uwp\Syncfusion.SfPdfViewer.XForms.dll

iOS project

pcl\Syncfusion.Compression.Portable.dll
pcl\Syncfusion.Pdf.Portable.dll
pcl\ Syncfusion.SfPdfViewer.XForms.dll
iOS-unified\Syncfusion.SfPdfViewer.XForms.iOS.dll
iOS-unified\Syncfusion.SfPdfViewer.XForms.dll

Currently an additional step is required for iOS projects. We need to create an instance of the SfPdfDocumentViewRenderer as shown below.

Create an instance of SfPdfDocumentViewRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{

         ...

         new SfPdfDocumentViewRenderer();

         ...

}

2.Add the following C# code in your main page to make use of the SfPdfViewer.

[C#]

SfPdfViewer pdfViewerControl = new SfPdfViewer();

Content = pdfViewerControl;

We can also add the following Xaml code in you main page to make use of SfPdfViewer.

[XAML]

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:syncfusion="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms">
    
     <ContentPage.Content>
      
          <syncfusion:SfPdfViewer x:Name="pdfViewer">
      
          </syncfusion:SfPdfViewer> 

     </ContentPage.Content>
	 
</ContentPage>

Loading PDF document

The LoadDocument method can be used to load a PDF document using stream input.

[C#]

protected override void OnAppearing()
{

       Stream fileStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("GIS Succinctly.pdf");
            
	   //Loads the PDF document in the PDF viewer control.
       pdfViewer.LoadDocument(fileStream);
        
}

Unloading PDF document from the Viewer

The SfPdfViewer control allows you to unload the PDF document from the viewer when the control is not in use anymore. This releases the PDF document and all its associated resources.

To achieve this, include the below code in the click event of the button.

[C#]

private void BtnUnload_Click(object sender, RoutedEventArgs e) 
{ 
      //Unloads the PDF Document displayed in the PDF viewer control. 
      pdfViewer.Unload();
}

Searching text using PDFViewer

Text search support in PDFViewer allows users to find highlighted instances of searched text in a PDF document.

We need to call the SearchText method of SfPdfViewer control as in the below code snippet to achieve the same.

[C#]

pdfViewerControl.SearchText("Text");

This is how the final output will look like on iOS, Android, and UWP devices.

#PDF Viewer for iOS (Preview)

Essential PDF viewer for Xamarin is a new control that allows PDF documents to be viewed within your Xamarin.iOS application.

Features

Here is a quick summary of the features available in Essential PDF Viewer

View PDF files.
Navigate through the pages seamlessly.
Magnification support.
Virtualized pages.
Text search support.

Getting Started

This section explains about the assemblies required for the deployment of SfPdfViewer and how to create simple application using the SfPdfViewer control.

You can also download the entire source code of this demo from here.

Create a simple application with the SfPdfViewer

Follow the below steps to create a simple application with the SfPdfViewer and load a PDF document.

1.Create a new iOS application for Xamarin.iOS in the Visual Studio.

Add the following assemblies to the respective projects as follows:

{% highlight c# %}

pcl\Syncfusion.Compression.Portable.dll pcl\Syncfusion.Pdf.Portable.dll iOS-unified\Syncfusion.SfPdfViewer.iOS.dll

{% endhighlight %}

2.Create an instance of SfPdfViewer in view controller and add it as sub view in viewDidLoad override method.

{% highlight c# %}

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();            
    SfPdfViewer pdfViewerControl = new SfPdfViewer ();
    this.View.AddSubview (pdfViewerControl);
}

{% endhighlight %}

In order to update the layout of the parent view to the PDF viewer control, include the below code in ViewDidLayoutSubviews method by overriding it from ViewController.

{% highlight c# %}

public override void ViewDidLayoutSubviews()
{
    base.ViewDidLayoutSubviews();
    pdfViewerControl.Frame = this.View.Frame;
}

{% endhighlight %}

Loading PDF document

The LoadDocument method can be used to load a PDF document using stream input.

{% highlight c# %}

public override void ViewDidAppear(bool animated)
{
    base.ViewDidAppear(animated); 
    var fileStream = typeof(ViewController).GetTypeInfo().Assembly.GetManifestResourceStream("PDFViewerDemo.Assets.GIS Succinctly.pdf");
	pdfViewerControl.LoadDocument(fileStream);			
     
}

{% endhighlight %}

Unloading PDF document from the PDFViewer

The SfPdfViewer control allows you to unload the PDF document from the viewer when the control is not in use anymore. This releases the PDF document and all its associated resources.

We need to call the Unload method of SfPdfViewer control as in the below code snippet to achieve the same.

{% highlight c# %}

pdfViewerControl.Unload();

{% endhighlight %}

Searching text using PDFViewer

Text search support in PDFViewer allows users to find highlighted instances of searched text in a PDF document.

We need to call the SearchText method of SfPdfViewer control as in the below code snippet to achieve the same.

{% highlight c# %}

pdfViewerControl.SearchText("Text");

{% endhighlight %}

This is how the final output will look like on iOS devices.

#PDF Viewer for Android (Preview)

Essential PDF viewer for Xamarin is a new control that allows PDF documents to be viewed within your Xamarin.Android application.

Features

Here is a quick summary of the features available in Essential PDF Viewer

View PDF files.
Navigate through the pages seamlessly.
Magnification support.
Virtualized pages.
Text search support.

Getting Started

This section explains about the assemblies required for the deployment of SfPdfViewer and how to create simple application using the SfPdfViewer control.

You can also download the entire source code of this demo from here.

Create a simple application with the SfPdfViewer

Follow the below steps to create a simple application with the SfPdfViewer and load a PDF document.

1.Create a new blank application for Xamarin.Android in the Visual Studio.

Add the following assemblies to the respective projects as follows:

{% highlight c# %}

pcl\Syncfusion.Compression.Portable.dll pcl\Syncfusion.Pdf.Portable.dll android\Syncfusion.SfPdfViewer.Android.dll

{% endhighlight %}

Add the following Xml code in you Main.axml to make use of SfPdfViewer.

[XAML]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:id="@+id/parentview">
	    <Syncfusion.SfPdfViewer.Android.SfPdfViewer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pdfviewercontrol" />
</LinearLayout>

Loading PDF document

The LoadDocument method can be used to load a PDF document using stream input.

{% highlight c# %}

protected override void OnCreate(Bundle bundle)
   {
       base.OnCreate(bundle);		
       SetContentView(Resource.Layout.Main);
	   SfPdfViewer pdfViewerControl = FindViewById<SfPdfViewer>(Resource.Id.pdfviewercontrol);
       Stream docStream = Assets.Open("GIS Succinctly.pdf");
       pdfViewerControl.LoadDocument(docStream);		   
   }

{% endhighlight %}

Unloading PDF document from the PDFViewer

The SfPdfViewer control allows you to unload the PDF document from the viewer when the control is not in use anymore. This releases the PDF document and all its associated resources.

We need to call the Unload method of SfPdfViewer control as in the below code snippet to achieve the same.

{% highlight c# %}

pdfViewerControl.Unload();

{% endhighlight %}

Searching text using PDFViewer

Text search support in PDFViewer allows users to find highlighted instances of searched text in a PDF document.

We need to call the SearchText method of SfPdfViewer control as in the below code snippet to achieve the same.

{% highlight c# %}

pdfViewerControl.SearchText("Text");

{% endhighlight %}

This is how the final output will look like on android devices.

#Presentation

Essential Presentation for Xamarin is a .NET portable class library that can be used to read and write Microsoft PowerPoint Presentations from within Xamarin.iOS, Xamarin.Android and Xamarin.Forms applications.

Supported Features

Create and modify Microsoft PowerPoint presentations.
Create and modify text, shapes, tables, pictures and charts.
Insert and modify bulleted and numbered lists.
Create and modify SmartArt diagrams.
Create and modify Notes slides.
Supports solid fill, gradient fill, picture fill and pattern Fill for slide elements.
Clone and merge presentations.
Insert OLE objects in PowerPoint presentations.
Read and write built-in and custom document properties.
Define slide size settings and background.
Support for PowerPoint presentation from Microsoft office 2007 onwards

Getting Started

This section provides a quick overview of working with Essential Presentation for Xamarin.Forms. You can also download the entire source code of this demo from here.

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,
```
{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib\pcl\
```
Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the respective projects as follows:

Syncfusion.Compression.Portable.dll
Syncfusion.OfficeChart.Portable.dll
Syncfusion.Presentation.Portable.dll

Use the following C# code to generate a simple PowerPoint presentation using Essential Presentation

//Open existing Presentation from given stream.
IPresentation presentation = Presentation.Create();
//Get slide instance from the Presentation through indexer.
ISlide slide1 = presentation.Slides.Add(SlideLayoutType.Title);
//Get shape instance from the slide.
IShape titleShape = slide1.Shapes[0] as IShape;
//Set width, height and positions for shape.
titleShape.Left = 0.33 * 72;
titleShape.Top = 0.58 * 72;
titleShape.Width = 12.5 * 72;
titleShape.Height = 1.75 * 72;
//Get text body instance of the shape.
ITextBody textFrame1 = (slide1.Shapes[0] as IShape).TextBody;
//Get instance for Paragraph collection.
IParagraphs paragraphs1 = textFrame1.Paragraphs;
//Add new paragraph into the collection.
IParagraph paragraph = paragraphs1.Add();
//Set the horizontal alignment for paragraph
paragraph.HorizontalAlignment = HorizontalAlignmentType.Center;
//Add new TextPart into the collection.
ITextPart textPart1 = paragraph.AddTextPart();
//Write text content in the TextPart.
textPart1.Text = "Essential Presentation";
//Enable the CapsType font style
textPart1.Font.CapsType = TextCapsType.All;
//Set the font name.
textPart1.Font.FontName = "Adobe Garamond Pro";
//Enable the bold option.
textPart1.Font.Bold = true;
//Set the size of the text content.
textPart1.Font.FontSize = 40;
//Get another shape instance from the slide.
IShape subtitle = slide1.Shapes[1] as IShape;
//Set Width, Height and Positions for the shape.
subtitle.Left = 0.5 * 72;
subtitle.Top = 3 * 72;
subtitle.Width = 11.8 * 72;
subtitle.Height = 1.7 * 72;
//Get text body of the shape.
ITextBody textFrame2 = (slide1.Shapes[1] as IShape).TextBody;
//Align the text body as top in vertical level.
textFrame2.VerticalAlignment = VerticalAlignmentType.Top;
//Get Paragraph collection instance.
IParagraphs paragraphs2 = textFrame2.Paragraphs;
//Add new paragraph into the collection.
IParagraph para = paragraphs2.Add();
//Align the paragraph as left in horizontal level.
para.HorizontalAlignment = HorizontalAlignmentType.Left;
//Add new TextPart into the collection.
ITextPart textPart2 = para.AddTextPart();
//Add text content into the textPart.
textPart2.Text = "Lorem ipsum dolor sit amet, lacus amet amet ultricies. Quisque      mi venenatis morbi libero, orci dis, mi ut et class porta, massa ligula magna enim, aliquam orci vestibulum tempus.Turpis facilisis vitae consequat, cum a a, turpis dui consequat massa in dolor per, felis non amet.";
//Set the font name.
textPart2.Font.FontName = "Adobe Garamond Pro";
//Set the text content size
textPart2.Font.FontSize = 21;
//Add new paragraph into the collection.
para = paragraphs2.Add();
//Align the paragraph as left in horizontal level.
para.HorizontalAlignment = HorizontalAlignmentType.Left;
//Add text content into the text part.
textPart2 = para.AddTextPart();
//Add text content into the text part.
textPart2.Text = "Turpis facilisis vitae consequat, cum a a, turpis dui consequat massa in dolor per, felis non amet. Auctor eleifend in omnis elit vestibulum, donec non elementum tellus est mauris, id aliquam, at lacus, arcu pretium proin lacus dolor et. Eu tortor, vel ultrices amet dignissim mauris vehicula.";
//Set the font name.
textPart2.Font.FontName = "Adobe Garamond Pro";
//Set the text content size
textPart2.Font.FontSize = 21;
//Create a Stream instance
MemoryStream stream = new MemoryStream();
//Save the Presentation to stream instance
presentation.Save(stream);
//Close the Presentation
presentation.Close();

Screenshots

#Creating your first BusyIndicator in Xamarin.Forms

The Busy Indicator control enables you to know when the application is busy. SfBusyIndicator includes over 10 pre-built animations that can be displayed within your applications.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential BusyIndicator for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Release Version}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfBusyIndicator.XForms.dll

Android project

Android\Syncfusion.SfBusyIndicator.Andriod.dll
Android\Syncfusion.SfBusyIndicator.XForms.Andriod.dll
Android\Syncfusion.SfBusyIndicator.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfBusyIndicator.iOS.dll 
ios-unified\Syncfusion.SfBusyIndicator.XForms.iOS.dll
ios-unified\Syncfusion.SfBusyIndicator.XForms.dll

UWP Project

uwp\Syncfusion.SfBusyIndicator.UWP.dll
uwp\Syncfusion.SfBusyIndicator.XForms.dll
uwp\Syncfusion.SfBusyIndicator.XForms.UWP.dll

Currently an additional step is required for and iOS project. We need to create an instance of the Busy Indicator custom renderer as shown below.

Create an instance of the SfBusyIndicatorRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfBusyIndicatorRenderer ();

         ...

   }

Adding and configuring the BusyIndicator

The BusyIndicator control can be configured entirely in C# code or using XAML markup.

Create an instance of SfBusyIndicator

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfBusyIndicator;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new BusyIndicatorPage ();
        }

    }
public class BusyIndicatorPage : ContentPage
{
        SfBusyIndicator sfbusyindicator;
        public BusyIndicatorPage ()
        {
            sfbusyindicator = new SfBusyIndicator();
        } 
}

[XAML]

// Use this in App.CS source.
<?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="BusyIndicatorGettingStarted.BusyIndicatorGettingStarted" BackgroundColor="White"
            xmlns:syncfusion="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms"
            xmlns:picker="clr-namespace:BusyIndicatorGettingStarted;assembly=BusyIndicatorGettingStarted">
    <ContentPage.Content> x:Class="BusyIndicatorGettingStarted.Sample">
<ContentPage.Content>
        <syncfusion:SfBusyIndicator  
    </ContentPage.Content>
</ContentPage>

Configure the BusyIndicator Properties

The next step is to add BusyIndicator properties in application/

[C#]

SfBusyIndicator sfbusyindicator = new SfBusyIndicator();
sfbusyindicator.AnimationType = AnimationTypes.Battery;
sfbusyindicator.ViewBoxWidth = 150;
sfbusyindicator.ViewBoxHeight = 150;
sfbusyindicator.BackgroundColor = Color.White;

[XAML]

<syncfusion:SfBusyIndicator x:Name="sfbusyindicator" BackgroundColor="White" ViewBoxHeight="150" ViewBoxWidth="150" AnimationType="Ball"/>

Screenshots

#PullToRefresh

This section provides a quick overview for working with Essential SfPullToRefresh for Xamarin.Forms. We will walk through the entire process of creating a SfPullToRefresh in real world example.

This is how the final output will look like on iOS, Android and Windows Phone devices. You can also download the entire source code of this demo from here.

Getting started

This section provides a quick overview of the working with Essential SfPullToRefresh for Xamarin.Forms.

After installing Essential Studio for Xamarin, you can find all the required assemblies in the following installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio{Release Version}\lib

Note: Assemblies can be found in unzipped package location in Mac

Add the following assemblies to the respective projects as follows:

PCL project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.SfPullToRefresh.XForms.dll

Android project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.SfPullToRefresh.XForms.dll
android\Syncfusion.SfPullToRefresh.XForms.Android.dll

iOS(Unified) project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.SfPullToRefresh.XForms.dll
ios-unified\Syncfusion.SfPullToRefresh.XForms.iOS.dll

UWP Project

pcl\Syncfusion.Core.XForms.dll
pcl\Syncfusion.SfPullToRefresh.XForms.dll
uwp\Syncfusion.SfPullToRefresh.XForms.UWP.dll

Currently an additional step is required for UWP and iOS projects. We need to initialize the SfPullToRefresh renderer as shown below.

Call the SfPullToRefreshRenderer.Init(); in MainPage constructor of the UWP project as shown below

public MainPage()
{
    …
    SfPullToRefreshRenderer.Init();
    …
}

Call the SfPullToRefreshRenderer.Init(); in the FinishedLaunching overridden method of the AppDelegate class in the iOS project as follows.

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    …
    SfPullToRefreshRenderer.Init();
    …
}

Adding and configuring the PullToRefresh

The SfPullToRefresh control can be configured entirely in C# code or using XAML markup.

Create an instance of SfPullToRefresh

[C#]

// Update App.cs source in this file.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new GettingStarted.MainPage();
    }
}

[XAML]

// Use this in App.CS source.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage" 
             xmlns:syncfusion="clr-namespace:Syncfusion.SfPullToRefresh.XForms;assembly=Syncfusion.SfPullToRefresh.XForms">

    <syncfusion:SfPullToRefresh x:Name="pullToRefresh"
                                    PullingThershold="200"
                                    RefreshContentHeight="50"
                                    RefreshContentThreshold="50"
                                    RefreshContentWidth="50">
        <syncfusion:SfPullToRefresh.PullableContent>
            <StackLayout BackgroundColor="#00AFF9" Orientation="Vertical">
                <Label Text="New York Temperature" FontSize="Large" TextColor="White" HorizontalTextAlignment="Center" Margin="20"/>
                <Image  WidthRequest="100" HorizontalOptions="Center" HeightRequest="100"  Margin="20" Source="GettingStarted/warmselected.png"/>
                <Label x:Name="weatherData" FontSize="Large" TextColor="White" HorizontalTextAlignment="Center" Margin="20"/>
            </StackLayout>
        </syncfusion:SfPullToRefresh.PullableContent>
    </syncfusion:SfPullToRefresh>

</ContentPage>

Configure the SfPullToRefresh events

The next step is to handle PullToRefresh events in application.

[C#]

using Syncfusion.XForms.SfPullToRefresh;

public partial class MainPage : ContentPage
{
    Random random = new Random();
    string[] temperatures = new string[] { "22.01°", "23.11°", "22.50°", "22.77°", "22.20°", "22.00°", "24.01°" };
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = this;
        weatherData.Text = temperatures[0].ToString()+" degree";
        pullToRefresh.Refreshed += PullToRefresh_Refreshed;
        pullToRefresh.Pulling += PullToRefresh_Pulling;
        pullToRefresh.Refreshing += PullToRefresh_Refreshing;
    }

    private async void PullToRefresh_Refreshing(object sender, EventArgs args)
    {
        pullToRefresh.IsRefreshing = true;
        await Task.Delay(2000);
        int number = random.Next(0, 6);
        new WeatherData(temperatures[number]);
        weatherData.Text = temperatures[number].ToString() + " degree";
        pullToRefresh.IsRefreshing = false;
    }

    private void PullToRefresh_Pulling(object sender, PullingEventArgs args)
    {
        args.Cancel = false;
        var prog = args.Progress;
    }

    private void PullToRefresh_Refreshed(object sender, EventArgs args)
    {
        pullToRefresh.IsRefreshing = false;
    }
}

Model Class:

public class WeatherData: INotifyPropertyChanged
{
    private string _temperature;

    public WeatherData(string temperature)
    {
        Temperature = temperature;
    }

    public string Temperature
    {
        get
        {
            return _temperature;
        }
        set
        {
            _temperature = value;
            RaisePropertyChanged("Temperature");
        }
    }
        
    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(String Name)
    {
        if (PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(Name));
    }

    #endregion
}

#Creating your first RangeSlider in Xamarin.Forms

RangeSlider control allows you to select the range of value within the specified minimum and maximum limit. You can select the range by moving the thumb control along a track.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential RangeSlider for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android project through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfRangeSlider.XForms.dll

Android project

Android\Syncfusion.SfRangeSlider.Andriod.dll
Android\Syncfusion.SfRangeSlider.XForms.Andriod.dll
Android\Syncfusion.SfRangeSlider.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfRangeSlider.iOS.dll 
ios-unified\Syncfusion.SfRangeSlider.XForms.iOS.dll
ios-unified\Syncfusion.SfRangeSlider.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfRangeSlider.XForms.dll
uwp\Syncfusion.SfRangeSlider.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the RangeSlider custom renderer as shown below.

Create an instance of the SfRangeSliderRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfRangeSliderRenderer ();

         ...

   }

Adding and configuring the RangeSlider

The RangeSlider control can be configured entirely in C# code or using XAML markup.

Create an instance of SfRangeSlider

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfRangeSlider;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new RangeSliderPage ();
        }

    }
public class RangeSliderPage : ContentPage
{
        SfRangeSlider sfrangeslider;
        public RangeSliderPage ()
        {
            sfrangeslider = new SfRangeSlider();
        }
}

[XAML]

// Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="RangeSliderGettingStarted.RadialSliderPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms">
    <ContentPage.Content>
            <syncfusion:SfRangeSlider />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Configure the RangeSlider Properties

The next step is to add RangeSlider properties in application/

[C#]

SfRangeSlider sfrangeslider = new SfRangeSlider();
sfrangeslider.Minimum= 0;
sfrangeslider.Maximum = 12;
sfrangeslider.ShowRange= true;
sfrangeslider.RangeStart = 0;
sfrangeslider.RangeEnd = 12;
sfrangeslider.ShowValueLabels= True;

[XAML]

<syncfusion:SfRangeSlider HeightRequest="100" TickFrequency="2" Minimum="0" Maximum="12" TickPlacement="BottomRight" ShowRange="True" RangeStart="4" RangeEnd="8" Orientation="Horizontal" WidthRequest="400"></syncfusion:SfRangeSlider>

Screenshots

#Creating you first AutoComplete in Xamarin.Forms

AutoComplete functionality provides suggestions to the user while typing. There are several modes of suggestions. The suggested text can be appended to the original text or it can be displayed in a drop-down list so that user can choose from different options.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential AutoComplete for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android project through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfAutoComplete.XForms.dll

Android project

Android\Syncfusion.SfAutoComplete.Andriod.dll
Android\Syncfusion.SfAutoComplete.XForms.Andriod.dll
Android\Syncfusion.SfAutoComplete.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfAutoComplete.iOS.dll 
ios-unified\Syncfusion.SfAutoComplete.XForms.iOS.dll
ios-unified\Syncfusion.SfAutoComplete.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfAutoComplete.XForms.dll
uwp\Syncfusion.SfAutoComplete.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the AutoComplete custom renderer as shown below.

Create an instance of the SfAutoCompleteRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfAutoCompleteRenderer ();

         ...

   }

Adding and configuring the AutoComplete

The AutoComplete control can be configured entirely in C# code or using XAML markup.

Create an instance of SfAutoComplete

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfAutoComplete;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new AutoCompletePage ();
        }

    }
public class AutoCompletePage : ContentPage
{
        SfAutoComplete sfautocomplete;
        public AutoCompletePage ()
        {
            sfautocomplete = new SfAutoComplete();
        }
}

[XAML]

// Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AutoCompleteStarted.AutoCompletePage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfAutoComplete.XForms;assembly=Syncfusion.SfAutoComplete.XForms">
    <ContentPage.Content>
            <syncfusion:SfAutoComplete />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Configure the AutoComplete Properties

The next step is to add AutoComplete properties in application/

[C#]

SfAutoComplete sfautocomplete = new SfAutoComplete  ();
sfautocomplete .AutoCompleteSource= list1;
sfautocomplete .MinimumPrefixCharacter= 2;
sfautocomplete .MaximumDropDownHeight= 200;
sfautocomplete .PopUpelay= 100;

[XAML]

<syncfusion:SfAutoComplete x:Name="sfautocomplete" BackgroundColor="White" MinimumPrefixCharacter="2" MaximumDropDownHeight="200" PopUpDelay="100"/>

Screenshots

#Creating your first NumericTextBox in Xamarin.Forms

NumericTextBox is an advanced version of the EditText control which restricts input to numeric values. The control respects the UI culture and can be configured to display different formats like currency format, scientific format, etc.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential NumericTextBox for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfNumericTextBox.XForms.dll

Android project

Android\Syncfusion.SfNumericTextBox.Andriod.dll
Android\Syncfusion.SfNumericTextBox.XForms.Andriod.dll
Android\Syncfusion.SfNumericTextBox.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfNumericTextBox.iOS.dll 
ios-unified\Syncfusion.SfNumericTextBox.XForms.iOS.dll
ios-unified\Syncfusion.SfNumericTextBox.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfNumericTextBox.XForms.dll
uwp\Syncfusion.SfNumerictextBox.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the NumericTextBox custom renderer as shown below.

Create an instance of the SfNumericTextBoxRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfNumericTextBoxRenderer ();

         ...

   }

Adding and configuring the NumericTextBox

The NumericTextBox control can be configured entirely in C# code or using XAML markup.

Create an instance of SfNumericTextBox

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfNumericTextBox;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new NumericTextBoxPage ();
        }

    }
public class NumericTextBoxPage : ContentPage
{
        SfNumericTextBox sfnumerictextbox;
        public NumericTextBoxPage ()
        {
            sfnumerictextbox = new SfNumericTextBox();
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NumericTextBoxGettingStarted.NumericTextBoxPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfNumericTextBox.XForms;assembly=Syncfusion.SfNumericTextBox.XForms">
    <ContentPage.Content>
            <syncfusion:SfNumericTextBox />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Configure the NumericTextBox Properties

The next step is to add NumericTextBox properties in application

[C#]

SfNumericTextBox sfnumerictextbox = new SfNumericTextBox();
sfnumerictextbox.Value= 1000;
sfnumerictextbox.FormatString= “c”;
sfnumerictextbox.AllowNull= true;
sfnumerictextbox.MaximumNumberDecimalDigits= 2;

[XAML]

<syncfusion:SfNumericTextBox HeightRequest="100"  Value="1000"  Orientation="Horizontal" WidthRequest="200" FormatString=”C” AllowNull=”true” MaximumNumberDecimalDigits=”2”>
 </syncfusion:SfNumericTextBox>

Screenshots

#Creating your first Calendar in Xamarin.Forms

The Essential Xamarin Calendar widget provides the multi-view representation to display and select one or more dates within specified ranges. Also provides a gesture friendly UI to perform operations like navigations, events, etc.

You can also download the entire source code of this demo from here.

This section explains you the steps to configure a Calendar control in a real-time scenario and also provides a walk-through on some of the customization features available in Calendar control.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfCalendar.XForms.dll

Android project

Android\Syncfusion.SfCalendar.Andriod.dll
Android\Syncfusion.SfCalendar.XForms.Andriod.dll
Android\Syncfusion.SfCalendar.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfCalendar.iOS.dll 
ios-unified\Syncfusion.SfCalendar.XForms.iOS.dll
ios-unified\Syncfusion.SfCalendar.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfCalendar.XForms.dll
uwp\Syncfusion.SfCalendar.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the Calendar custom renderer as shown below.

Create an instance of the SfCalendarRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfCalendarRenderer ();

         ...

   }

Adding and configuring the Calendar

The Calendar control can be configured entirely in C# code or using XAML markup.

Create an instance of Calendar

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfCalendar;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new CalendarPage ();
        }

    }
public class CalendarPage : ContentPage
{
        SfCalendar sfCalendar;
        public CalendarPage ()
        {
            sfCalendar = new SfCalendar();
			Content = sfCalendar;
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CalendarGettingStarted.CalendarPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms">
    <ContentPage.Content>
            <syncfusion:SfCalendar />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Configure the Calendar Properties

The next step is to add Calendar properties in application

[C#]

	SfCalendar sfCalendar = new SfCalendar ();
	sfCalendar.ViewMode=ViewMode.MonthView;
	DateTime d1=new DateTime(2015,1,1);
	sfCalendar.MinDate=mindate;
	DateTime d2=new DateTime(2040,12,12);
	sfCalendar.MaxDate=d2;
	sfCalendar.SelectionMode=SelectionMode.MultiSelection;

[XAML]

<syncfusion:SfCalendar ViewMode="MonthView" SelectionMode="MultiSelection">
 </syncfusion:SfCalendar>

Screenshots

#Create your first Rating in Xamarin.Forms

The Essential Xamarin Rating widget provides the multi-view representation to display and select one or more dates within specified ranges. Also provides a gesture friendly UI to perform operations like navigations, events, etc.

You can also download the entire source code of this demo from here.

This section explains you the steps to configure a rating control in a real-time scenario and also provides a walk-through on some of the customization features available in Rating control.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android project through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfRating.XForms.dll

Android project

Android\Syncfusion.SfRating.Andriod.dll
Android\Syncfusion.SfRating.XForms.Andriod.dll
Android\Syncfusion.SfRating.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfRating.iOS.dll 
ios-unified\Syncfusion.SfRating.XForms.iOS.dll
ios-unified\Syncfusion.SfRating.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfRating.XForms.dll
uwp\Syncfusion.SfRating.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the rating custom renderer as shown below.

Create an instance of the SfRatingRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfRatingRenderer();

         ...

   }

Adding and configuring the Rating

The Rating control can be configured entirely in C# code or using XAML markup.

Create an instance of Rating

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfRating;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new RatingPage ();
        }

    }
public class RatingPage : ContentPage
{
        SfRating sfRating;
        public RatingPage ()
        {
            sfRating = new SfRating();
			Content = sfRating;
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="RatingGettingStarted.RatingPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms">
    <ContentPage.Content>
            <syncfusion:SfRating />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Configure the Rating Properties

The next step is to add Calendar properties in application

[C#]

	SfRating sfRating = new SfRating ();
	sfRating.ItemCount=5;
	sfRating.Precision=Precision.Standard;
	sfRating.ToolTipPlacement=ToolTipPlacement.None;
	sfRating.ItemSize=70;

[XAML]

<syncfusion:SfRating ItemCount="5" Precision="Exact" ToolTipPlacement="None" ItemSize="70">
 </syncfusion:SfRating>

Screenshots

#Schedule

Introduction

This section provides you an overview for working with SfSchedule for Xamarin.Forms and also provides a walk through to configure SfSchedule control in real time scenario.

Assembly Configuration

SfSchedule can be included in your Xamarin.Forms project in two ways,

Assembly Reference
Nuget Configuration

Assembly Reference

You can download our Xamarin.Forms components directly from our website, refer here for assistance.

Once the assemblies has been downloaded and explored, you can find all the required assemblies in the installation folders.

{Syncfusion Essential Studio Installed location}\Essential Studio\syncfusionessentialstudio-releaseversion\Xamarin\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\15.1.0.41\Xamarin\lib

Notes: Assemblies can be found in unzipped package location in Mac

The following list of assemblies need to be added as reference from the lib folder to use SfSchedule in your application.

Project	Required assemblies
PCL	pcl\Syncfusion.SfSchedule.XForms.dll
Android Renderer	pcl\Syncfusion.SfSchedule.XForms.dll android\Syncfusion.SfSchedule.Android.dll android\Syncfusion.SfSchedule.XForms.Android.dll
iOS Renderer	pcl\Syncfusion.SfSchedule.XForms.dll ios-unified\Syncfusion.SfSchedule.iOS.dll ios-unified\Syncfusion.SfSchedule.XForms.iOS.dll
UWP Renderer	pcl\Syncfusion.SfSchedule.XForms.dll uwp\Syncfusion.SfSchedule.UWP.dll uwp\Syncfusion.SfSchedule.XForms.UWP.dll

Nuget Configuration

Alternatively you can refer SfSchedule in your application by configuring nuget packages.

Launching SfSchedule on each platform

To use SfSchedule inside an application, each platform application must initialize the SfScheduleRenderer. This initialization step varies from platform to platform and it is discussed in the following sections.

Android

Android application launches SfSchedule without any initialization.

iOS

To launch SfSchedule in iOS, you need to call SfScheduleRenderer.Init() in the FinishedLaunching overridden method of the AppDelegate class after the Xamarin.Forms Framework initialization.

{% highlight c# %}

public override bool FinishedLaunching (UIApplication app, NSDictionary options)   
{    
    ...    
    global::Xamarin.Forms.Forms.Init (); 
    SfScheduleRenderer.Init();    
    LoadApplication (new App ());   
    ...   
}

{% endhighlight %}

Universal Windows Platform (UWP)

UWP application launches SfSchedule without any initialization.

ReleaseMode issue in UWP platform

There is a known Framework issue in UWP platform. The custom controls will not render when deployed the application in Release Mode.

The above problem can be resolved by initializing the SfSchedule assemblies in App.xaml.cs in UWP project as like in below code snippet.

{% highlight c# %}

// In App.xaml.cs

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    ...
    rootFrame.NavigationFailed += OnNavigationFailed;
    // you'll need to add `using System.Reflection;`
    List<Assembly> assembliesToInclude = new List<Assembly>();
    //Now, add all the assemblies your app uses assembliesToInclude.Add(typeof(SfScheduleRenderer).GetTypeInfo().Assembly);
    // replaces Xamarin.Forms.Forms.Init(e);        
    Xamarin.Forms.Forms.Init(e, assembliesToInclude);
    ...     
}

{% endhighlight %}

Create a simple application with SfSchedule

This section explains how to create a simple application using SfSchedule control. SfSchedule control can be configured entirely in C# code or by using XAML markup. This is how the final output will look like on iOS, Android and Windows Phone devices.

You can download the entire source code of this demo for Xamarin.Forms from
here ScheduleGettingStarted

This section provides a walks through to create MeetingRoomScheduler using our Schedule control.

Creating a new project
Adding SfSchedule to the project
Changing Schedule Views
Binding data to SfSchedule control

Creating a new project

Create a new Blank App (Xamarin.Forms.Portable) application in Xamarin Studio or Visual Studio.

Add the required assembly references to the pcl and renderer projects as discussed in the Assembly Configuration section.

Import SfSchedule control namespace Syncfusion.SfSchedule.XForms.

Adding SfSchedule to the project

Set the SfSchedule control as content to the ContentPage.

{% tabs %}
{% highlight xaml %}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="GettingStarted.Sample"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:GettingStarted;assembly=GettingStarted"
xmlns:syncfusion="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms">
<ContentPage.Content>
<syncfusion:SfSchedule x:Name="schedule" />
</ContentPage.Content>
</ContentPage>

{% endhighlight %}
{% highlight c# %}

using Syncfusion.SfSchedule.XForms;
using Xamarin.Forms;

namespace GettingStarted   
{   
    public class App:Application   
    {   
        SfSchedule schedule; 
        public App()   
        {   
            InitializeComponent();   
            //Creating new instance for SfSchedule   
            schedule = new SfSchedule();   
            MainPage = new ContentPage { Content = schedule };   
        }   
    }   
}

{% endhighlight %}
{% endtabs %}

Changing Schedule Views

SfSchedule control provides four different types of views to display dates and it can be assigned to the control by using ScheduleView property. By default the control is assigned with DayView. Current date will be displayed initially for all the Schedule views.

Schedule control will be rendered with Sunday as the first day of the week, but you can customize to any day by using FirstDayOfWeek property of SfSchedule.

{% tabs %}
{% highlight xaml %}

<syncfusion:SfSchedule x:Name="schedule" FirstDayOfWeek="3"/>

{% endhighlight %}
{% highlight c# %}

//setting first day of the week    
schedule.FirstDayOfWeek = 3;

{% endhighlight %}
{% endtabs %}

Day View

DayView is used to display a single day, current day will be visible by default. Appointments on a specific day will be arranged in respective timeslots based on its duration.

{% tabs %}
{% highlight xaml %}

<syncfusion:SfSchedule x:Name="schedule" ScheduleView="DayView" />

{% endhighlight %}
{% highlight c# %}

schedule.ScheduleView = ScheduleView.DayView;

{% endhighlight %}
{% endtabs %}

Week View

WeekView is to view all days of a particular week. Appointments will be arranged based on the dates on the week in repective timeslots.

{% tabs %}
{% highlight xaml %}

<syncfusion:SfSchedule x:Name="schedule" ScheduleView="WeekView" />

{% endhighlight %}
{% highlight c# %}

schedule.ScheduleView = ScheduleView.WeekView;

{% endhighlight %}
{% endtabs %}

Work Week View

WorkWeekView is to view only working days of a particular week. By default, Saturday and Sunday are the non-working days. You can be customize it with any days of a Week. Appointments arranged in timeslots based on its duration with respective day of the week.

{% tabs %}
{% highlight xaml %}

<syncfusion:SfSchedule x:Name="schedule" ScheduleView="WorkWeekView" />

{% endhighlight %}
{% highlight c# %}

schedule.ScheduleView = ScheduleView.WorkWeekView;

{% endhighlight %}
{% endtabs %}

Notes: Appointments in non-working days will not be displayed.

Month View

MonthView in Schedule control is to view entire dates of a particular month. Appointments can be viewed in inline by setting ShowAppointmentsInline property of SfSchedule as true.

{% tabs %}
{% highlight xaml %}

<syncfusion:SfSchedule
    x:Name="schedule"
    ScheduleView="MonthView"
    ShowAppointmentsInline="True" />

{% endhighlight %}
{% highlight c# %}

schedule.ScheduleView = ScheduleView.MonthView;  
//view appointments in inline  
schedule.ShowAppointmentsInline = true;

{% endhighlight %}
{% endtabs %}

Binding data to SfSchedule control

Schedule control has a built-in capability to handle the appointment arrangement internally based on the ScheduleAppointment collections. You need to assign the created collection to the DataSource property of SfSchedule.

Adding Appointments

ScheduleAppointment is a class, which holds the details about the appointment to be rendered in schedule. It has some basic properties such as StartTime, EndTime, Subject and some additional information about the appointment can be added using Color, Notes, Location, IsAllDay, IsRecursive properties.

{% highlight c# %}

ScheduleAppointmentCollection appointmentCollection = new ScheduleAppointmentCollection();   
//Creating new event   
ScheduleAppointment clientMeeting = new ScheduleAppointment();   
DateTime currentDate = DateTime.Now;   
DateTime startTime = new DateTime (currentDate.Year,currentDate.Month,currentDate.Day, 10, 0, 0);    
DateTime endTime = new DateTime (currentDate.Year, currentDate.Month,currentDate.Day, 12, 0, 0);   
clientMeeting.StartTime = startTime;   
clientMeeting.EndTime = endTime;  
clientMeeting.Color = Color.Blue;   
clientMeeting.Subject = "ClientMeeting";   
appointmentCollection.Add(clientMeeting);   
schedule.DataSource = appointmentCollection;

{% endhighlight %}

Adding Custom Appointments

You can also map custom appointments data to our schedule.

Notes: CustomAppointment class should contain two DateTime fields and a string field as mandatory.

Here steps to render MeetingRoomScheduler using SfSchedule control with respective custom data properties created in a class Meeting.

Creating custom class for appointments
Creating view model
Mapping custom class
Setting data source for SfSchedule

Creating custom class for appointments

You can create a custom class Meeting with mandatory fields "From", "To" and "EventName".

{% highlight c# %}

/// <summary>   
/// Represents custom data properties.   
/// </summary>   
public class Meeting   
{   
    public string EventName { get; set; }   
    public string Organizer { get; set; }   
    public string ContactID { get; set; }   
    public int Capacity { get; set; }   
    public DateTime From { get; set; }   
    public DateTime To { get; set; }   
    public Color color { get; set; }   
}

{% endhighlight %}

Notes: You can inherit this class from INotifyPropertyChanged for dynamic changes in custom data.

Creating view model

You can schedule meetings for a particular day by setting From and To of Meeting class.Also you can change subject and color of appointment using EventName and color of Meeting class. In a separate ViewModel class you can describe the collection of custom appointments.

{% highlight c# %}

/// <summary>   
/// Represents collection of appointments.   
/// </summary> 
public class ViewModel
{
public ObservableCollection<Meeting> Meetings;
List<string> eventNameCollection;
List<Color> colorCollection;
public ViewModel()
{
    Meetings = new ObservableCollection<Meeting>();
    CreateEventNameCollection();
    CreateColorCollection();
    CreateAppointments();
}

/// <summary>
/// Creates meetings and stores in a collection.  
/// </summary>
private void CreateAppointments()
{
    Random randomTime = new Random();
    List<Point> randomTimeCollection = GettingTimeRanges();
    DateTime date;
    DateTime DateFrom = DateTime.Now.AddDays(-10);
    DateTime DateTo = DateTime.Now.AddDays(10);
    DateTime dataRangeStart = DateTime.Now.AddDays(-3);
    DateTime dataRangeEnd = DateTime.Now.AddDays(3);

    for (date = DateFrom; date < DateTo; date = date.AddDays(1))
    {
        if ((DateTime.Compare(date, dataRangeStart) > 0) && (DateTime.Compare(date, dataRangeEnd) < 0))
        {
        for (int AdditionalAppointmentIndex = 0; AdditionalAppointmentIndex < 3; AdditionalAppointmentIndex++)
        {
            Meeting meeting = new Meeting();
            int hour = (randomTime.Next((int)randomTimeCollection[AdditionalAppointmentIndex].X, (int)randomTimeCollection[AdditionalAppointmentIndex].Y));
            meeting.From = new DateTime(date.Year, date.Month, date.Day, hour, 0, 0);
            meeting.To = (meeting.From.AddHours(1));
            meeting.EventName = eventNameCollection[randomTime.Next(9)];
            meeting.color = colorCollection[randomTime.Next(9)];
            Meetings.Add(meeting);
        }
        }
        else
        {
            Meeting meeting = new Meeting();
            meeting.From = new DateTime(date.Year, date.Month, date.Day, randomTime.Next(9, 11), 0, 0);
            meeting.To = (meeting.From.AddHours(1));
            meeting.EventName = eventNameCollection[randomTime.Next(9)];
            meeting.color = colorCollection[randomTime.Next(9)];
            Meetings.Add(meeting);
        }
    }
}

/// <summary>  
/// Creates event names collection.  
/// </summary>  
private void CreateEventNameCollection()
{
    eventNameCollection = new List<string>();
    eventNameCollection.Add("General Meeting");
    eventNameCollection.Add("Plan Execution");
    eventNameCollection.Add("Project Plan");
    eventNameCollection.Add("Consulting");
    eventNameCollection.Add("Performance Check");
    eventNameCollection.Add("Yoga Therapy");
    eventNameCollection.Add("Plan Execution");
    eventNameCollection.Add("Project Plan");
    eventNameCollection.Add("Consulting");
    eventNameCollection.Add("Performance Check");
}

/// <summary>  
/// Creates color collection.  
/// </summary>  
private void CreateColorCollection()
{
    colorCollection = new List<Color>();
    colorCollection.Add(Color.FromHex("#117EB4"));
    colorCollection.Add(Color.FromHex("#B4112E"));
    colorCollection.Add(Color.FromHex("#C44343"));
    colorCollection.Add(Color.FromHex("#11B45E"));
    colorCollection.Add(Color.FromHex("#43BEC4"));
    colorCollection.Add(Color.FromHex("#B4112E"));
    colorCollection.Add(Color.FromHex("#C44343"));
    colorCollection.Add(Color.FromHex("#117EB4"));
    colorCollection.Add(Color.FromHex("#C4435A"));
    colorCollection.Add(Color.FromHex("#DF5348"));
    colorCollection.Add(Color.FromHex("#43c484"));
}

/// <summary>
/// Gets the time ranges.
/// </summary>
private List<Point> GettingTimeRanges()
{
    List<Point> randomTimeCollection = new List<Point>();
    randomTimeCollection.Add(new Point(9, 11));
    randomTimeCollection.Add(new Point(12, 14));
    randomTimeCollection.Add(new Point(15, 17));
    return randomTimeCollection;
}
}

{% endhighlight %}

Mapping custom class

You can map those properties of Meeting class with our schedule control by using ScheduleAppointmentMapping.

{% tabs %} {% highlight xaml %}

<syncfusion:SfSchedule x:Name="schedule">
    <syncfusion:SfSchedule.AppointmentMapping>
        <syncfusion:ScheduleAppointmentMapping
            ColorMapping="color"
            EndTimeMapping="To"
            StartTimeMapping="From"
            SubjectMapping="EventName" />
    </syncfusion:SfSchedule.AppointmentMapping>
</syncfusion:SfSchedule>

{% endhighlight %} {% highlight c# %}

ScheduleAppointmentMapping dataMapping = new ScheduleAppointmentMapping(); 
dataMapping.ColorMapping = "color";  
dataMapping.EndTimeMapping = "To";
dataMapping.StartTimeMapping = "From"; 
dataMapping.SubjectMapping = "EventName";
schedule.AppointmentMapping = dataMapping;

{% endhighlight %} {% endtabs %}

Setting data source for SfSchdeule

Create meetings of type ObservableCollection <Meeting> and assign those appointments collection Meetings to the DataSource property of SfSchedule.

{% highlight c# %}

ViewModel viewModel = new ViewModel();
schedule.DataSource = viewModel.Meetings;

{% endhighlight %}

#Creating your first NumericUpDown in Xamarin.Forms

The NumericUpDown is an editor control which provides up and down repeat buttons to increment and decrement the values. The control respects the UI culture and can be configured to display different formats like currency format, scientific format, etc.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential NumericUpDown for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.4.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfNumericUpDown.XForms.dll

Android project

Android\Syncfusion.SfNumericUpDown.Andriod.dll
Android\Syncfusion.SfNumericUpDown.XForms.Andriod.dll
Android\Syncfusion.SfNumericUpDown.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfNumericUpDown.iOS.dll 
ios-unified\Syncfusion.SfNumericUpDown.XForms.iOS.dll
ios-unified\Syncfusion.SfNumericUpDown.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfNumericUpDown.XForms.dll
uwp\Syncfusion.SfNumericUpDown.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the NumericUpDown custom renderer as shown below.

Create an instance of the SfNumericUpDownRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfNumericUpDownRenderer ();

         ...

   }

Adding and configuring the NumericUpDown

The NumericUpDown control can be configured entirely in C# code or using XAML markup.

Create an instance of SfNumericUpDown

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfNumericUpDown;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new NumericUpDownPage ();
        }

    }
public class NumericUpDownPage : ContentPage
{
        SfNumericUpDown sfnumericupdown;
        public NumericUpDownPage ()
        {
            sfnumericupdown = new SfNumericUpDown();
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NumericUpDownGettingStarted.NumericUpDownPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfNumericUpDown.XForms;assembly=Syncfusion.SfNumericUpDown.XForms">
    <ContentPage.Content>
            <syncfusion:SfNumericUpDown />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Setting Value

The Value property gets or sets the display value of the NumericUpDown control.

[C#]

SfNumericUpDown sfnumericupdown = new SfNumericUpDown();
sfnumericupdown.Value= 5;

[XAML]

<syncfusion:SfNumericUpDown HeightRequest="100"  Value="5"  Orientation="Horizontal" WidthRequest="200" >
 </syncfusion:SfNumericUpDown>

Setting Format String

The FormatString property determines the format specifier by which the display text has to be formatted.

It has three types,

c - Display the value with currency notation.
n – Number Format of the value.
p – Display the value in Percentage.

[C#]

SfNumericUpDown sfnumericupdown = new SfNumericUpDown();
sfnumericupdown.Value= 5;
sfnumericupdown.FormatString= “c”;

[XAML]

<syncfusion:SfNumericUpDown HeightRequest="100"  Value="5"  Orientation="Horizontal" WidthRequest="200" FormatString=”C”>
 </syncfusion:SfNumericUpDown>

Screenshots

# Creating your first Image Editor in Xamarin.Forms

This section provides a quick overview for working with Essential Image Editor for Xamarin.Forms. We will walk through the entire process of creating a real world ImageEditor.

You can also download the entire source code of this demo from here.

Adding Image Editor Reference

Refer this article to know how to obtain and reference Essential Studio components in your solution.

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS and Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio\15.2.0.40\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\15.2.0.40\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

pcl\Syncfusion.SfImageEditor.XForms.dll

Android project

android\Syncfusion.SfImageEditor.XForms.dll 
android\Syncfusion.SfImageEditor.XForms.Android.dll

iOS project

ios\Syncfusion.SfImageEditor.XForms.dll
ios\Syncfusion.SfImageEditor.XForms.iOS.dll

Important: After adding the reference, currently, an additional step is required for iOS project. We need to create an instance of the SfImageEditorRenderer in iOS project

Create an instance of SfImageEditorRenderer in the FinishedLaunching overridden method of the AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
	SfImageEditorRenderer.Init();
	...  
}

Initializing the Image Editor

The Image Editor control can be configured entirely in C# code or using XAML markup.

The first step is to create a Image Editor object

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:editor="clr-namespace:Syncfusion.SfImageEditor.XForms;assembly=Syncfusion.SfImageEditor.XForms"
             x:Class="SampleBrowser.Samples.ImageEditor.Page">
    <ContentPage.Content>
        <editor:SfImageEditor x:Name="imageeditor">

        </editor:SfImageEditor>
    </ContentPage.Content>
</ContentPage>

public static Page GetMainPage()
{
        SfImageEditor imageeditor = new SfImageEditor();
        return new ContentPage {
		BackgroundColor = Color.Black,
		Content = imageeditor,
	};
}

Loading Image Editor Image

You can load desired Image Editor image with the help of Source property.

  <ContentPage.Content>
       <editor:SfImageEditor x:Name="imageeditor" Source="img.png">

       </editor:SfImageEditor>
   </ContentPage.Content>

[C#]

public class SfImageEditorPage : ContentPage
    {
        public SfImageEditorPage(string file)
        {
            SfImageEditor editor = new SfImageEditor();
            editor.Source = ImageSource.FromFile(file);
			Content = editor;
        }

    }

Cropping Image

You can crop particular region of an image using this functionality with the help of inbuilt cropping tool which is shown in the below screenshot,

Drawing on Images

You can perform free handsketch over image and this can be customized using PenSettings StrokeColor and StrokeWidth property.

Annotate Text and Shapes

You can add shapes (circle and rectangle) and Text anywhere on the image.

The following screenshot depicts how text and shape annotation can place over image by using image editor inbuilt tool,

Rotate and Flip

Rotate

Image Editor allows you to rotate an image towards 90 degree clockwise direction.

Flip

Image Editor provides an option to flip the image to achieve mirror like image view.

Saving an Image

Image Editor control allows you to save the image into gallery along with the changes you have done.

#Creating your first Carousel in Xamarin.Forms

The Carousel control for Xamarin allows navigating through image datas in an interactive way so that they can be viewed or selected. Also provides efficient customization of items and interactive navigation features.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential Carousel for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.4.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfCarousel.XForms.dll

Android project

Android\Syncfusion.SfCarousel.Andriod.dll
Android\Syncfusion.SfCarousel.XForms.Andriod.dll
Android\Syncfusion.SfCarousel.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfCarousel.iOS.dll 
ios-unified\Syncfusion.SfCarousel.XForms.iOS.dll
ios-unified\Syncfusion.SfCarousel.XForms.dll

UWP Project

uwp\Syncfusion.SfInput.UWP.dll
uwp\Syncfusion.SfShared.UWP.dll
uwp\Syncfusion.SfCarousel.XForms.dll
uwp\Syncfusion.SfCarousel.XForms.UWP.dll

Currently an additional step is required for iOS project. We need to create an instance of the Carousel custom renderer as shown below.

Create an instance of the SfCarouselRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfCarouselRenderer ();

         ...

   }

Adding and configuring the Carousel

The SfCarousel control can be configured entirely in C# code or using XAML markup.

Create an instance of SfCarousel

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfCarousel;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new CarouselPage ();
        }

    }
public class CarouselPage : ContentPage
{
        SfCarousel sfCarousel;
        public CarouselPage ()
        {
            sfCarousel = new SfCarousel();
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CarouselGettingStarted.CarouselPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms">
    <ContentPage.Content>
            <syncfusion:SfCarousel />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Setting Offset

The Offset property specifies the distance between the items in Carousel panel.

[C#]

SfCarousel sfCarousel = new SfCarousel();
sfCarousel.SelectedIndex=2;
sfCarousel.Offset=20;

[XAML]

<syncfusion:SfCarousel HeightRequest="100"  SelectedIndex="2"  Orientation="Horizontal" WidthRequest="200" Offset="20">
 </syncfusion:SfCarousel>

Setting Rotation Angle

The RotationAngle property decides the angle in which items should be rotated.

[C#]

SfCarousel sfCarousel = new SfCarousel();
sfCarousel.SelectedIndex=2;
sfCarousel.Offset=20;
SfCarousel.RotationAngle = 45;

[XAML]

<syncfusion:SfCarousel HeightRequest="100"  SelectedIndex="2"  Orientation="Horizontal" WidthRequest="200" Offset="20" RotationAngle="45">
 </syncfusion:SfCarousel>

Screenshots

#Creating your first Rotator in Xamarin.Forms

The Rotator control allows interactive navigation through image datas to view or select them. It provides various navigation options like swiping, autoplay, and tapping preview thumbnails or dots.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential Rotator for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.4.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfRotator.XForms.dll

Android project

Android\Syncfusion.SfRotator.Andriod.dll
Android\Syncfusion.SfRotator.XForms.Andriod.dll
Android\Syncfusion.SfRotator.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfRotator.iOS.dll 
ios-unified\Syncfusion.SfRotator.XForms.iOS.dll
ios-unified\Syncfusion.SfRotator.XForms.dll

UWP Project

uwp\Syncfusion.SfRotator.UWP.dll
uwp\Syncfusion.SfRotator.XForms.dll
uwp\Syncfusion.SfRotator.XForms.UWP.dll

Currently an additional step is required for iOS projects. We need to create an instance of the Rotator custom renderer as shown below.

Create an instance of the SfRotatorRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfRotatorRenderer ();

         ...

   }

Adding and configuring the Rotator

The SfRotator control can be configured entirely in C# code or using XAML markup.

Create an instance of SfRotator

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfRotator;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new RotatorPage ();
        }

    }
public class RotatorPage : ContentPage
{
        SfRotator sfrotator;
        public RotatorPage ()
        {
            sfrotator = new SfRotator();
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="RotatorGettingStarted.RotatorPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms">
    <ContentPage.Content>
            <syncfusion:SfRotator />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Setting Navigation Mode

The NavigationMode property decides the navigation mode for navigating items. The items can be navigated using Thumbnail or Dots.

[C#]

SfRotator sfRotator = new SfRotator();
sfRotator.NavigationMode = NavigationMode.Dots;

[XAML]

<syncfusion:SfRotator HeightRequest="100"  Orientation="Horizontal" WidthRequest="200" NavigationMode="Dots">
 </syncfusion:SfRotator>

Customizing Position

The TabStripPosition property decides the position in which navigation strip items such as Thumbnail or Dots should be rendered.

[C#]

SfRotator sfRotator = new SfRotator();
sfRotator.NavigationMode = NavigationMode.Dots;
sfRotator.TabStripPosition = TabStripPosition.Bottom;

[XAML]

<syncfusion:SfRotator HeightRequest="100"  Orientation="Horizontal" WidthRequest="200" NavigationMode="Dots" TabStripPosition="Bottom">
 </syncfusion:SfRotator>

Screenshots

#Calculate

Getting Started

Calculate is an independent class library that allows you to provide extensive calculation support to your business objects. Also it provides support to parse and evaluate the expression or formulas with 400+ predefined functions.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android and Windows Phone projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.1.0.41\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below,

PCL project

pcl\Syncfusion.Calculate.Portable.dll

iOS(Unified) project

ios-unified\Syncfusion.Calculate.iOS.dll

Android project

android\Syncfusion.Calculate.Android.dll

Creating a simple application for Calculate

Create new BlankApp application in Xamarin Studio or Visual Studio.
Add the required assembly references to the project as discussed in Referencing Essential Studio components in your solution section.

Calculate using CalcEngine

This section explains about calculating a simple equation (SQRT (25) * 2) using CalcEngine. The ParseAndComputeFormula method of CalcEngine will be used to parse and calculate the result of the formula or equation like below.

CalcEngine engine = new CalcEngine ();

string formula = "SQRT (25) *2";
string result;

// The result of below code is “10”
result = engine.ParseAndComputeFormula(formula);

Calculate using ICalcData

ICalcData is used to get and set the values or references. The values are stored into ICalcData based on cell reference. By using this, compute the expressions or equations using CalcEngine. Here, CalcData class is derived from ICalcData and refer the below code example,

public class CalcData : ICalcData
{
    Dictionary<string, object> values = new Dictionary<string, object>();
    
    public event ValueChangedEventHandler ValueChanged;

    public CalcData()
    {

    }

    /// <summary>
    /// Get the value from CalcData by row and col index.
    /// </summary>
    /// <param name="row">RowIndex</param>
    /// <param name="col">ColumnIndex</param>
    /// <returns>Returns the value from CalcData by row and col index</returns>
    public object GetValueRowCol(int row, int col)
    {
        object value = null;

        var key = RangeInfo.GetAlphaLabel(col) + row;

        this.values.TryGetValue(key, out value);

        return value;
    }

    /// <summary>
    /// Store the value to CalcData by row and col index.
    /// </summary>
    /// <param name="value">Value for store in CalcData</param>
    /// <param name="row">RowIndex</param>
    /// <param name="col">ColumnIndex</param>
    public void SetValueRowCol (object value, int row, int col)
    {
        var key = RangeInfo.GetAlphaLabel(col) + row;

        if (!values.ContainsKey(key))
           values.Add(key, value);
        else if (values[key] != value)
           values[key] = value;
    }

    public void WireParentObject()
    {
            
    }

    private void OnValueChanged(int row, int col, string value)
    {
        if (ValueChanged != null)
           ValueChanged(this, new ValueChangedEventArgs(row, col, value));
    }
}

Initializing a ICalcData

A ICalcData can be integrated into CalcEngine by passing it through constructor. Similarly, the ICalcData can be registered as a worksheet for identifying the cell references.

CalcData calcData = new CalcData ();
CalcEngine engine = new CalcEngine(calcData);

engine.UseNoAmpersandQuotes = true;

Setting value into ICalcData

The SetValueRowCol method is used to set the value to ICalcData. Please refer the below code example,

// Set value to CalcData.
calcData.SetValueRowCol(“10”, 1, 1);
calcData.SetValueRowCol(“20”, 1, 2);
calcData.SetValueRowCol(“30”, 2, 1);
calcData.SetValueRowCol(“40”, 2, 2);

The GetValueRowCol method is used to get the value from ICalcData. Please refer the below code example,

// Get value from CalcData
calcData.GetValueRowCol(1, 1);
calcData.GetValueRowCol(1, 2);
calcData.GetValueRowCol(2, 1);
calcData.GetValueRowCol(2, 2);

Performing calculation

The ParseAndComputeFormula is used to evaluate the formulas by get the values from ICalcData by references. Please refer the following code example,

string formula = “SUM (A1, A2, B1, B2)”;

// Result of below code is “100”
result = engine.ParseAndComputeFormula(formula);

Performing calculation between sheets

CalcEngine support to performing the calculation by accessing the values from the different sheets. First need to register the sheet with ICalcData and then you can access the values by sheet name like “Sheet1!A1”. Please refer the below code example,

int i = CalcEngine.CreateSheetFamilyID();

engine.RegisterGridAsSheet("Sheet1", calcData, i);
engine.RegisterGridAsSheet("Sheet2", calcData, i+1);

string formula = “SUM (Sheet1!A1, Sheet2!A1)”;

// Result of below code is “20” 
result = engine.ParseAndComputeFormula(formula);

This is sample output look like on iOS, Android and Windows Phone devices. You can also download the entire source code of this demo from here.

Calculate using CalcQuickBase

The CalcQuickBase will provide options to directly parse and compute a formula, or register variable names that can later be used in more complex formulas involving these variables. These registered variable names are keys. For example, [C] = [A] + [B] * 10, here the names A, B, C are keys.

Register elements as keys

Create a CalcQuickBase object and registered the key or virtual references like below,

CalcQuickBase calcQuickBase = new CalcQuickBase ();

CalcQuickBase[“A”] = “10”;
calcQuickBase[“B”] = “20”;
calcQuickBase[“C”] = “30”;
calcQuickBase[“Expression”] = “=SUM([A], [B], [C])”;

Evaluating keys

The evaluation of keys can be triggered using SetDirty method which will compute the formulas of the keys. The result will be taken by using the same keys

string result;

calcQuickBase.SetDirty();

// Result of below code is “60”
result = calcQuickBase[“Expression”];

This is sample output will look like on iOS, Android and Windows Phone devices. You can also download the entire source code of this demo from here.

#Creating your first NavigationDrawer in Xamarin.Forms

The NavigationDrawer widget is an interactive content panel that comes out from the edge of the window and allows you to store contents in a hidden panel. You can display the widget by swiping left edge or right edge of the window.

You can also download the entire source code of this demo from here.

This section provides a quick overview for working with Essential NavigationDrawer for Xamarin.Forms.

Referencing Essential Studio components in your solution

If you had acquired Essential Studio components through the Xamarin component store interface from within your IDE, then after adding the components to your Xamarin.iOS, Xamarin.Android projects through the Component manager, you will still need to manually reference the PCL (Portable Class Library) assemblies in the Xamarin.Forms PCL project in your solution. You can do this by manually adding the relevant PCL assembly references to your PCL project contained in the following path inside of your solution folder

Components/syncfusionessentialstudio-version/lib/pcl/

Alternatively if you had downloaded Essential Studio from Syncfusion.com or through the Xamarin store web interface then all assembly references need to be added manually.

After installing Essential Studio for Xamarin, all the required assemblies can be found in the installation folders, typically

{Syncfusion Installed location}\Essential Studio{Version number}\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\14.2.0.26\lib

or after downloading through the Xamarin store web interface, all the required assemblies can be found in the below folder

{download location}\syncfusionessentialstudio-version\lib

You can then add the assembly references to the respective projects as shown below

PCL project

XForms\Syncfusion.SfNavigationDrawer.XForms.dll

Android project

Android\Syncfusion.SfNavigationDrawer.Andriod.dll
Android\Syncfusion.SfNavigationDrawer.XForms.Andriod.dll
Android\Syncfusion.SfNavigationDrawer.XForms.dll

iOS(Unified) project

ios-unified\Syncfusion.SfNavigationDrawer.iOS.dll 
ios-unified\Syncfusion.SfNavigationDrawer.XForms.iOS.dll
ios-unified\Syncfusion.SfNavigationDrawer.XForms.dll

UWP Project

uwp\Syncfusion.SfNavigationDrawer.UWP.dll
uwp\Syncfusion.SfNavigationDrawer.XForms.dll
uwp\Syncfusion.SfNavigationDrawer.XForms.UWP.dll

Currently an additional step is required for iOS projects. We need to create an instance of the NavigationDrawer custom renderer as shown below.

Create an instance of the SfNavigationDrawerRenderer in FinishedLaunching overridden method of AppDelegate class in iOS Project as shown below

public override bool FinishedLaunching(UIApplication app, NSDictionary options)

    {

        ...

        new SfNavigationDrawerRenderer ();

         ...

   }

Adding and configuring the NavigationDrawer

The SfNavigationDrawer control can be configured entirely in C# code or using XAML markup.

Create an instance of SfNavigationDrawer

[C#]

// Update App.cs source in this file.
using Syncfusion.XForms.SfNavigationDrawer;
…
…
public class App : Application
    {
        public App()
        {
            MainPage = new NavigationDrawerPage ();
        }

    }
 new NavigationDrawerPage : ContentPage
{
        SfNavigationDrawer sfnavigationDrawer;
 new NavigationDrawerPage ()
        {
            sfnavigationDrawer = new SfNavigationDrawer();
        }
}

[XAML]

// Use this in App.CS source.
Use this in App.CS source.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NavigationDrawerGettingStarted.NavigationDrawerPage"
 xmlns:syncfusion="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms">
    <ContentPage.Content>
            <syncfusion:SfNavigationDrawer />
    </ContentPage.Content>
</ContentPage> </ContentPage.Content>
</ContentPage>

Setting Content View

The main view of the NavigationDrawer can be set using ContentView property with desired views.

[C#]

public View getContentView()
{
    Button imageButton = new Button();
    imageButton.Source = (FileImageSource)ImageSource.FromFile ("_menu_.png");
    imageButton.WidthRequest=50;

    Label homeLabel=new Label();
    homeLabel.Text="Home";
    homeLabel.FontSize=15;
    homeLabel.TextColor=Color.White;
    homeLabel.HorizontalTextAlignment=TextAlignment.Center;
    homeLabel.VerticalTextAlignment=TextAlignment.Center;

    StackLayout headerFrame=new StackLayout(); 
    headerFrame.Orientation = StackOrientation.Horizontal;
    headerFrame.Children.Add(imageButton);
    headerFrame.Children.Add(homeLabel);

    Label mainLabel=new Label();
    mainLabel.FontSize=14;
    mainLabel.TextColor=Color.Black;
    mainLabel.Text="Lorem ipsum dolor sit amet, lacus amet amet ultricies. Quisque mi venenatis morbi libero, orci dis, mi ut et class porta, massa ligula magna enim, aliquam orci vestibulum tempus. Turpis facilisis vitae consequat, cum a a, turpis dui consequat massa in dolor per, felis non amet.Auctor eleifend in omnis elit vestibulum, donec non elementum tellus est mauris, id aliquam, at lacus, arcu pretium proin lacus dolor et. Eu tortor, vel ultrices amet dignissim mauris vehicula. Lorem tortor neque, purus taciti quis id. Elementum integer orci accumsan minim phasellus vel.";

    StackLayout ContentFrame=new StackLayout();
    ContentFrame.Orientation = StackOrientation.Vertical; 
    ContentFrame.BackgroundColor=Color.White;
    ContentFrame.Children.Add(headerFrame);
    ContentFrame.Children.Add(mainLabel);
    navigationDrawer.ContentView=ContentFrame;
}
SfNavigationDrawer sfnavigationDrawer = new SfNavigationDrawer();
sfnavigationDrawer.ContentView = new getContentView();

[XAML]

<navigation:SfNavigationDrawer x:Name="sfnavigationDrawer">
    <navigation:SfNavigationDrawer.ContentView>
        <StackLayout x:Name="ContentFrame" Orientation="Horizontal">
            <StackLayout x:Name="headerFrame" Orientation="Vertical">
                 <Button x:Name="imageButton" FontSize="20" HeightRequest="50" Grid.Column="0" Clicked="Btn_Clicked" BackgroundColor="#1aa1d6" HorizontalOptions="Start" WidthRequest="50" />
                 <Label x:Name="homeLabel" FontSize="15" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"     HeightRequest="50"  TextColor="White" />
            </StackLayout>   
            <Label x:Name="mainLabel" FontSize="14" TextColor="Black" />   
         </StackLayout>
    </navigation:SfNavigationDrawer.ContentView>
</navigation:SfNavigationDrawer>

Setting DrawerContent View

The sliding main content of the NavigationDrawer which is a part of DrawerPanel can be set using DrawerContentView property with desired views.

[C#]

public View getDrawerContentView()
{
    StackLayout mainStack = new StackLayout ();
    mainStack.Opacity = 1;
    mainStack.Orientation = StackOrientation.Vertical;
    mainStack.HeightRequest = 500;
    mainStack.BackgroundColor = Color.White;

    ObservableCollection<String> list = new ObservableCollection<string> ();
    list.Add ("Home");
    list.Add ("Profile");
    list.Add ("Inbox");
    list.Add ("Outbox");
    list.Add ("Sent");
    list.Add ("Draft");

    ListView listView = new ListView();
    listView.WidthRequest= 200;
    listView.VerticalOptions = LayoutOptions.FillAndExpand;
    listView.ItemsSource = list;
    mainStack.Children.Add (listView);
}
SfNavigationDrawer sfnavigationDrawer = new SfNavigationDrawer();
sfnavigationDrawer.DrawerContentView = new getDrawerContentView();

[XAML]

<navigation:SfNavigationDrawer x:Name="sfnavigationDrawer">
    <navigation:SfNavigationDrawer.ContentView>
        <StackLayout x:Name="DrawerContentFrame" Orientation="Horizontal">
            <ListView x:Name="listView" ItemsSource="{Binding itemsCollection}">
            </ListView> 
         </StackLayout>
    </navigation:SfNavigationDrawer.ContentView>
</navigation:SfNavigationDrawer>

Screenshots

#RadialMenu for Xamarin.Android

Create your first RadialMenu in Xamarin.Android

This section provides a quick overview for working with Essential RadialMenu for Xamarin.Android. It’s an efficient way to display a hierarchical menu in a circular layout optimized for touch devices. Typically used as a context menu.

Referencing Essential Studio Components in your Solution

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically:

{Syncfusion Installed location}\Essential Studio{14.3.0.49}\lib

Note: Assemblies are available in unzipped package location in Mac.

You have to add the following assembly reference to the android project

android\Syncfusion.SfRadialMenu.Android.dll

Create a simple SfRadialMenu

This section explains how to create a SfRadialMenu and configure it.

This is how the final output will look like on android devices. You can download the entire source code of this demo for Xamarin.Android from here.

In this walk through, you will create a new application that contains the SfRadialMenu which includes the below topics.

Adding SfRadialMenu in Xamarin.Android
Create SfRadialMenuItems for the SfRadialMenu
Adding center button icon and back icon for SfRadialMenu

Adding SfRadialMenu in Xamarin.Android

Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section.
Import SfRadialMenu control namespace Syncfusion.SfRadialMenu.Android.
Create an instance of SfRadialMenu control and set as a content view of Activity.
Add a external font icon type face into the Asset folder and set its build action to android assets. The unicodes can be passed as text to display icons in the SfRadialMenu Item.

using System.Collections.ObjectModel;
using Syncfusion.SfKanban.Android; 

namespace RadialMenuGettingStarted
{
[Activity(Label = “Getting Started”, MainLauncher = true, Icon = “@drawable/icon”)]
public  class MainActivity : Activity
{
	public override void OnCreate(Bundle bundle)
	{		
		base.OnCreate(bundle);
		SfKanban kanban = new SfKanban(this);	
		SetContentView(kanban);
	}
}
}

Create SfRadialMenuItems for the SfRadialMenu

Create a collection of SfRadialMenuItem objects for populating SfRadialMenu.

FrameLayout frame = new FrameLayout(this);
Typeface tf = Typeface.CreateFromAsset(con.Assets, "settings.ttf");

SfRadialMenu radialMenu = new SfRadialMenu(this);
for (int i = 0; i < 6; i++)
{
	//Adding Items
	SfRadialMenuItem item = new SfRadialMenuItem(this) { FontIconSize = 20, IconFont = tf, FontIconText = layer[i],FontIconColor=Color.Transparent,ItemWidth=50,ItemHeight=50};

	radialMenu.Items.Add(item);
}
frame.addView(radialMenu);
    
SetContentView(frame);

Adding center button icon and back icon for SfRadialMenu

Any custom view or image or Font icon can be added as center button icon and for back icon.

// Adding center icon
TextView menuIcon = new TextView(con);
menuIcon.Text = "\uE713";
menuIcon.Typeface = tf;
menuIcon.SetTextColor(Color.White);
radialMenu.CenterButtonView = menuIcon;

// Adding icon for inner level center icon which is a back button
TextView backIcon = new TextView(con);
backIcon.Text = "\uE72B";
backIcon.Typeface = tf;
backIcon.SetTextColor(Color.White);
radialMenu.CenterButtonBackIcon = backIcon;

#RadialMenu for Xamarin.iOS

Create your first RadialMenu in Xamarin.iOS

This section provides a quick overview for working with Essential RadialMenu for Xamarin.iOS. It’s an efficient way to display a hierarchical menu in a circular layout optimized for touch devices. Typically used as a context menu.

Referencing Essential Studio Components in your Solution

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically:

{Syncfusion Installed location}\Essential Studio{14.3.0.49}\lib

Note: Assemblies are available in unzipped package location in Mac.

You have to add the following assembly reference to the iOS unified project

iOS-unifed\Syncfusion.SfRadialMenu.iOS.dll

Create a simple SfRadialMenu

This section explains how to create a SfRadialMenu and configure it.

This is how the final output will look like on iOS devices. You can download the entire source code of this demo for Xamarin.iOS from here.

In this walk through, you will create a new application that contains the SfRadialMenu which includes the below topics.

Adding SfRadialMenu in Xamarin.iOS
Create SfRadialMenuItems for the SfRadialMenu
Adding center button icon and back icon for SfRadialMenu

Adding SfRadialMenu in Xamarin.iOS

Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section.
Import SfRadialMenu control namespace Syncfusion.SfRadialMenu.iOS.
Create an instance of SfRadialMenu control and add as a SubView to a UIViewController.
Add a external font icon type face into the Resource folder and include in the info.plist. The unicodes can be passed as text to display icons in the SfRadialMenu Item.

public partial class ViewController : UIViewController

{

	private SfRadialMenu radialmenu;
    string[] layer = new string[] { "\uE701", "\uE702", "\uEA8F", "\uE706", "\uEBAA", "\uE7E8" };
	protected ViewController(IntPtr handle) : base(handle)
	{
		// Note: this .ctor should not contain any initialization logic.
	}
    
	public override void ViewDidLoad()
	{		
		base.ViewDidLoad();	
		radialmenu = new SfRadialMenu();	
		this.Add(radialmenu); 	
	}

}

Create SfRadialMenuItems for the SfRadialMenu

Create a collection of SfRadialMenuItem objects for populating SfRadialMenu.

for (int i = 0; i < 5; i++)
{
	//Adding Items
	SfRadialMenuItem item = new SfRadialMenuItem() { IconFont = UIFont.FromName("Segoe MDL2 Assets", 20), FontIcon = layer[i], FontIconColor = UIColor.Clear };
	this.radialmenu.Items.Add(item);		
}

Adding center button icon and back icon for SfRadialMenu

Any custom view or image or Font icon can be added as center button icon and for back icon.

radialmenu.CenterButtonText = "\uE713";
radialmenu.CenterButtonBackText = "\uE72B";
radialmenu.CenterButtonIconFont = UIFont.FromName("Segoe MDL2 Assets", 30);

jmptrader/gts.md

Configure the Digital Gauge Properties

Insert a Scale

Specify Range

Add a Pointer

Add a Minor and Major Tick settings

Getting Started

Create a simple application with the SfPdfViewer

Loading PDF document

Unloading PDF document from the PDFViewer

Searching text using PDFViewer

Getting Started

Create a simple application with the SfPdfViewer

Loading PDF document

Unloading PDF document from the PDFViewer

Searching text using PDFViewer

Configure the BusyIndicator Properties

Configure the SfPullToRefresh events

Configure the RangeSlider Properties

Configure the AutoComplete Properties

Introduction

Assembly Configuration

Assembly Reference

Nuget Configuration

Launching SfSchedule on each platform

Android

iOS

Universal Windows Platform (UWP)

ReleaseMode issue in UWP platform

Create a simple application with SfSchedule

Creating a new project

Adding SfSchedule to the project

Changing Schedule Views

Day View

Week View

Work Week View

Month View

Binding data to SfSchedule control

Adding Appointments

Adding Custom Appointments

Creating custom class for appointments

Creating view model

Mapping custom class

Setting data source for SfSchdeule