Slider View In Xamarin.iOS

Introduction

In this article, we will create a Xamarin iOS application that will create the slider view using the page control and scroll view.  We will have a scroll view that will scroll the page horizontally and a page control that displays on which page we are currently in.

Prerequisite

  1. Programming in C#.
  2. The basics of Xamarin.

Implementation

Open Visual Studio Community Edition.

Xamarin

Select single view app and click "Next".

Xamarin

Give app name and click "Next".

Xamarin

Write the project and solution name and create the application.

Open main.storyboard.

Add a View from the toolpad to your view controller.

Xamarin

Drag the UiView to your controller.

Make it large by sliding it horizontally.

Xamarin

Set the name property to MyView.

Xamarin

Inside this view, add some labels. Suppose we add tree label.

Xamarin

Add three labels - the third label may not be visible because it is outside of the view controller.

Xamarin

This will be something like above, with three labels, change the text property of labels (“Page1”, “Page2”, “Page3”).

Great, now we have three labels inside view.

Now, add scroll view from the toolpad to your controller.

Xamarin


Add the scroll view by simply dragging it to your controller.

Now, drag the UiView having 3 labels inside this Scroll View.

Xamarin

Your document outline will become as following.

Xamarin

In the view hierarchy, your added view with three labels will come inside Scroll View after you drag it inside of it.

Once you are done and sure that your view is coming from the scroll view, let us set some properties of the scroll view.

Set the name to “MyScrollView”.

Set the Paging Enabled property on by checking it.

Xamarin

Now, add Page Control view from toolpad to your view controller.

Xamarin

Add this control by dragging it to your view controller.

Xamarin

Set the properties as below.

Set the Name property to “MyPager”.

Set the number of pages to 3.

set the tint color and Current page color.

Xamarin

Open viewController.cs and edit with below content.

  1. using System;  
  2. using UIKit;  
  3.   
  4. namespace SliderShowApp {  
  5.     public partial class ViewController : UIViewController {  
  6.         protected ViewController(IntPtr handle) : base(handle) {  
  7.             // Note: this .ctor should not contain any initialization logic.  
  8.         }  
  9.   
  10.         public override void ViewDidLoad()  
  11.         {  
  12.             base.ViewDidLoad();  
  13.             MyScrollView.ContentSize = MyView.Frame.Size;  
  14.             MyScrollView.Scrolled += (sender, e) => {  
  15.                 MyPager.CurrentPage = (nint)(MyScrollView.ContentOffset.X / MyScrollView.Frame.Width);  
  16.             };  
  17.             // Perform any additional setup after loading the view, typically from a nib.  
  18.         }  
  19.   
  20.         public override void DidReceiveMemoryWarning() {  
  21.             base.DidReceiveMemoryWarning();  
  22.             // Release any cached data, images, etc that aren't in use.  
  23.         }  
  24.     }  
  25. }  

We have written the logic for scrolled, when user scrolls the data to left or right on the scroll view, then the  current page will also be set accordingly.

Build and run the application.

Xamarin

Scroll left for page2.

Xamarin

You can see the current page and tint colors changed according to scrolled page content.

Xamarin