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
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
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
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
Once we have added the namespace correctly we
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
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
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
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
