Creating Custom Controls Part 2: SliderView

Hey Guys!

In the first part of this series of articles about creating custom controls, we learned how to create an ExtendedListView that supports Infinite Scrolling and Commands to handle business logic directly on our ViewModels.

In this article we are going to see our next use case which is creating a Custom Stepper + CarouselView (SliderView) to support sliders in our Xamarin Forms Apps.

Prerequisites

You will need previous knowledge on the following subjects to follow along with the sample project in this 2nd part (all of this is discussed on the first part of the series, you can revisit it to refresh any doubts you might have while reading this article):

  • MVVM Pattern
  • Using Fody Property Change Plugin
  • BindableProperties
  • Commanding
  • Handling and Raising Events

Getting Started!

Sometimes you wish to have some type of slider in your app to display a list of data or images to your users in a compact and friendly way, in which they can just slide through it and go back and forward to each item they wish to see through a simple visual feedback.

Right now Xamarin Forms doesn’t directly support a component that meets this requirements, but it does give us the basic tools we need to create it, which are the following:

Xamarin Forms Carousel View

The CarouselView was introduced on Xamarin Forms(2.3.0) as the successor to the CarouselPage, which had the restriction of a page that couldn’t be embedded easily. In contrast, the CarouselView is really optimized on each of the platforms, allowing you to swipe through many items with a simple, making use of just an ItemsSource and a DataTemplate.

Custom Stepper Control

This is going to be the custom control we will be developing to add visual feedback for the items currently in the CarouselView, and allow the user to select any arbitrary element making the CarouselView slide directly to it. (We will create this control with StackLayout, and a combination of Buttons and BoxViews).

SO LET’S GET TO WORK!🙌☺️

To start creating our SliderView, we first need to add the Xamarin Forms Carousel View Nuget to all of our projects.

Using CarouselView

Now that we have installed the Xamarin Forms CarouselView component, let’s test that it’s working correctly by adding it to our page and feeding it some test data.

STEP 1: DEFINING OUR ITEMS

Our control can be implemented for alot of different scenarios, so for the sake of our post and sample app. Our SliderView will be used to create an on boarding screen in our App, and each item the will be presented will be represented with this Model:

STEP 2: CREATING A LIST OF ITEMS FOR OUR CAROUSEL

Now that we have defined our items, we can create a list of Items that we will feed our Carousel so we can Display and Slide through each of them in our page.

STEP 3: ADDING CAROUSELVIEW to PAGE

To add our CarouselView to our page we first need to add the namespace where we can find our new component:

Once we have added the namespace correctly we can, now use our CarouselView in our Page normally like any other component, we bind the DataSource Property to our List of Items, and define our DataTemplate to Display them on our Carousel.

Congrats!!!🎊🥳Now we should have a functional CarouselView in our Page and we should be able to Slide through the items on the screen. Yayy! But wait . . . the title of this article is SliderView not CarouselView. . . 🤔

Exactly you guessed right, our work is not done because we are missing the most important part our Custom Control which is the one that’s going to allow us to support the Dynamic Steps functionality in our SliderView (CarouselView + StepperControl)

Creating our Custom Control: StepperControl

Just as in Part 1 of this series, when it was time to create our custom control you can name it however you like, I have decided to name the one we are going to be using for this article and the sample project StepProgressBarControl.

STEP 1 – CREATE CONTROLS FOLDERS AND ADD OUR NEW CLASS FILE

Following our defined best practices, the file structure in our project should now look like this:

STEP 2 – LET’S ADD THE CODE FOR OUR CUSTOM CONTROL

To create our Stepper Control we will be basically using a StackLayout (with horizontal Orientation), then we will simply add dynamically BoxViews (For Optional Dividers), and Buttons (For the Dot’s) depending the amount of Items we have in our ItemSource and depending on the button the user selects we update the style of the button so the user has the sense that he has change his selection, we are then going to tie the select events of the stepbar with our carousel so our user can change the carousel current displaying item by selecting steps on our custom control, after you think about it for a bit it’s, pretty straight forward huh? 😋So let’s get to work!

The first thing we want to do is extend from the StackLayout class since we are going to be creating a custom variation of the StackLayout Xamarin Forms component:

Now it’s time to add the BindableProperties we will need to accomplish the features we wan’t our Control to support:

As you can see we simply added 6 Bindable Properties that allow us to do the following:

  • StepsProperty : Defines the number of steps that the StepperProgressBar is going to display.
  • StepSelectedProperty : Set’s the selected step in the control.
  • StepColorProperty : Defines the color for the selected state of the steps.
  • UnselectedStepColorProperty : Defines the color for the selected state of the steps.
  • DividersEnabledProperty : Set’s if we want to add dividers between the buttons or not when rendering the control.
  • ItemSourceProperty : Defines the item source for initializing the steps dynamically on the Control depending on the number of items on the list.

STEP 3 – LET’S LISTEN TO PROPERTY CHANGES AND ADD OUR EVENT HANDLERs

After we have defined and acquired the Items, and configurations we are going to use to Render our control on the page using BindableProperties. We can now proceed to implement the logic for our feature which basically is: listening to when our ItemSource changes, creating the necessary steps for the items, once they are created, we listen and react to clicks the user makes to our steps, and update the selected step of the control accordingly.

To do this we override the OnPropertyChanged method on our custom control and we react in different ways depending the property that has changed:

As you can see the implementation is pretty straight forward, if the amount of steps changed we simply clear and re add our new Children to the StackLayout, which are basically Buttons (to represent the steps) and if the user has decided to show dividers, we also add dividers to the StackLayout.

You can notice that we are using some helper methods to do some extra logic like for example when the user changes the SelectedStep or when we need to Add the correct styles to our buttons (To set them as selected or unselected).

Lastly but not least we add the code for our EventHandler and in this case it’s simply 1 that we are listening to, which is when the clicks a button on our control, we want to update the SelectedStep with our helper method:

And Ce finito Guys!🥳, now we can use our StepProgressBarControl and have our SliderView up and running.

You can find the full source code for our completed StepProgressBarControl.cs here

STEP 4 – LET’S USE OUR NEW CONTROL

Now we simply need to add our StepProgressBarControl to our page, to do so we simply add a new namespace which contains the custom views we have created on our Controls folder, after this, we can start using our controls as any other normal view in our XAML page:

Now that we have added our control successfully it’s time to link it’s functionality with the CarouselView, so they can interact with each other when the user updates either of them, for this we will be adding the following code in our Page code behind:

This code simply listens to the Carousel OnItemSelected event, and if the user selects (slides) to a new item, we update the StepSelected in our StepProgressBarControl. We also do the same for our Steps, if the user select a new step we update the CarouselView Position accordingly.

Ce Finito Guys!🎊☺️

You did it! Now you should be able to see your new components working in conjunction and reacting to your user’s actions, you now have a really good View that you can add to if you want and ContentView and apply it to different use cases like for example:

  • Image Slider
  • List features in the available subscriptions for your App (Using a ListView and TemplateSelectors)
  • On Boarding Screens
  • etc.

Full Source Code for the sample App can be found on my Github Repo [SliderViewSample]

Made with ♥️by Pujols.


References:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/bindable-properties

https://blog.xamarin.com/simplifying-events-with-commanding/

https://docs.microsoft.com/en-us/dotnet/standard/events/

Credits for artwork components:
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Workstation on Banner Designed by Eightonesix

Author: Pujolsluis

I'm Luis Pujols a Software Engineer originally from the Dominican Republic. I currently work at CrossGeeks as part of an awesome team, developing in Xamarin Forms, and I'm currently working towards my certification on it as well. In my free time, I'm co-organizer of the DotNetDo software community, I also enjoy experimenting with new tech's, mentoring peers and attending or organizing software community events.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.