Create A Vertical Slider In Xamarin iOS App

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android and iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Slider is visually similar to the Progress bar but it has a draggable slider, which will allow the user to change the value displayed by the control.

Prerequisites

Xamarin Studio.
Xcode.

The steps given below are required to be followed in order to create a Vertical Slider in Xamarin iOS, using Xamarin Studio.

Step 1

Go to Xamarin Studio.

Click New Solution—> select iOS—>select App--> Choose single View App. Afterwards, click Next.

Step 2

In this step, configure your app. Give the app name (Ex:sample), Organization Identifier. Afterwards, click Next.

Step 3

In this step, give your project name (Ex: Sample) and solution name (Ex: Sample). Give the path of your project. Afterwards, click Create.

Step 4

Subsequently, go to the solution. In the solution, get all the files and sources in your project. Now, select Main.storyboard and double click to open Main.storyboard page.

Step 5

After opening Main.storyboard, you can design the page, as per your desire.

Step 6

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls. You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls. You need to drag and drop the Slider.

You need to align the Slider, using the constraints.

Step 7

Now, go to the properties Window. Select the Slider and give a name (Ex:slider).

Step 8

You need to drag and drop the Label.

You need to align the label, using the constraints.

Step 9

Now, go to the properties Window. Select the Label and give a name (Ex:lblValue).

Step 10

In this step, go to the ViewController.cs page. Write the code given below.

ViewController.cs

using System;
using UIKit;
using CoreGraphics;
using static System.Math;
namespace XamariniOSSlider {
public partial class ViewController: UIViewController {
protected ViewController(IntPtr handle): base(handle) {
// Note: this .ctor should not contain any initialization logic.
}
public override void ViewDidLoad() {
base.ViewDidLoad();
slider.MinValue = 1;
slider.MaxValue = 10;
slider.Value = 1;
slider.Transform = CGAffineTransform.MakeRotation((float) PI / 2);
slider.ValueChanged += (object sender, EventArgs e) => {
lblValue.Text = slider.Value.ToString();
};
// Perform any additional setup after loading the view, typically from a nib.
}
public override void DidReceiveMemoryWarning() {
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
}
}
}

Step 11

Now, go to Run option, choose Debug and the list of iPhone and iPad Simulators, which are available. You can choose any one Simulator and run it.

Output

After few seconds, the app will start running on your iPhone Simulator.You will see your app is working successfully.

You can move the Slide and the value will be changed successfully.

Summary

This was the process of how to create a Vertical Slider in Xamarin iOS, using Xamarin Studio.