Stepper Control In Xamarin.Forms Application For Android And UWP

Stepper control is a view control that inputs a discrete value, constrained to a range.

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform.

After reading this article, you will learn how to add Stepper control in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools given below are required to develop UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Using Visual Studio 2015 Installer, enable Xamarin (Cross Platform Mobile development and C#/.NET, while installing/modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormStepper) ->OK.



Step 2

Now, create project “XamFormStepper_Droid”.



Choose the Target and minimum platform version for your Universal Windows Project.



Create project “XamFormStepper_UWP”.



Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update the Xamarin.forms Reference for Portable Project and XamFormStepper_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform)

Step 4

Add a XAML page for Stepper control demo. Right click on XamFormStepper(Portable) project. Select ADD-> NewItem.



Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.



Step 5

Add Stepper tag with items and labels in StepperDemo.Xaml.

<StackLayout Orientation="Vertical">
    <Label/>
    <Label Text="Stepper Control in Xamarin.Forms Application - UWP and Android Demo" FontSize="20" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label/>
    <Label/>
    <Label/>
    <Label x:Name="lbldisp" VerticalOptions="Center" HorizontalOptions="Center"></Label>
    <Stepper Value="5" Minimum="0" Maximum="10" Increment="0.1" HorizontalOptions="LayoutOptions.Center" VerticalOptions="LayoutOptions.CenterAndExpand" ValueChanged="OnValueChanged" /> </StackLayout>

Step 6

Add the code, mentioned below in StepperDemo.Xaml.cs.

void OnValueChanged(object sender, ValueChangedEventArgs e) {
    lbldisp.Text = String.Format("Stepper value is {0:F1}", e.NewValue);
}

Step 7

Open (double click) the file App.cs in the Solution Explorer-> XamFormStepper (portable) and set the Root page.



Step 8

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormStepper.Droid and XamFormStepper.UWP (Universal Windows).



Step 9

Change the Configuration Manager settings, Go to Build -> Configuration Manager, uncheck all the build and deploy options to iOS, Windows, WinPhone, check the Droid and UWP.



Step 10

Deploy your app in a Local Machine and the output of the XamFormStepper app is given below.



After Clicking the +, the output will be, as shown below.



After clicking -, the output will be, as shown below.



Summary

Now, you have successfully created and tested Stepper control in Xamarin.Forms Application for Cross Platform application development, using Visual C# and Xamarin.