Hey Guys!
It’s been a while since we created our custom Xamarin Forms controls, one of which was the Custom Slider View. where we got to use the experimental carousel view and created a custom stepper control to support the indicator functionality that was not available at the moment, but now we can use the new Indicator View! let’s check it out.
A lot has happened in the Xamarin world since then and it’s always good to revisit old projects and refresh them. In our case, we got good news and it’s that the Xamarin team has been doing a great job this past year and they have covered the common use case of us wanting to have a slider in our app’s, so our Custom Stepper control is now ready to be deprecated with the arrival of the IndicatorView to the Xamarin Forms World.
Let’s Get Started!
So to benefit from all the new goodies, we first need to do some refactoring to our project:
- Upgrade to Xamarin Forms v4.4
- Remove Old Xamarin.Forms.CarouselView NuGet dependencies
- Enable Experimental Feature Flags for CarouselView and IndicatorView
- Update our XAML page to make use of the new Xamarin Forms controls
Upgrade to Xamarin Forms v4.4
To update to the latest versions we go to each project dependencies and update the Xamarin Forms dependency, but you will notice that in Android it will not let you update the Xamarin Forms dependencies because it depends on the latest Xamarin.Android.Support so before we can update Xamarin Forms we first need to update all of our Android Support dependencies, once we have them updated we should be able to upgrade with no further issue.
Remove Old Xamarin Forms Carousel View NuGet dependencies
Simply go to each project and remove the Xamarin.Forms.CarouselView NuGet, after we have removed them we can then proceed to our MainPage.xaml and remove the Xamarin.Forms.CarouselView namespace.
Enable Experimental Feature Flags for CarouselView and IndicatorView
CarouselView and IndicatorView are available in Xamarin.Forms 4.4 However, they are currently experimental and can only be used by adding the following line of code to your AppDelegate class on iOS, or your MainActivity class on Android before calling Forms.Init():
Update our XAML page to make use of the new Xamarin Forms controls
Now we just need to remove our old CarouselView namespace and use the new one provided by Xamarin, once we replace it we notice that the ItemSelected Event has been renamed to CurrentItemChanged, so we proceed to refactor the code behind code of the MainPage.xaml.cs and it should now look like the following:
Once we have updated our CarouselView we just need to replace our old Custom Control with the new IndicatorView in the MainPage.xaml and code-behind Ce finito!🥳 we should now have our app working with everything out of the box provided by Xamarin Forms.
MainPage.xaml
MainPage.xaml.cs
Good news! now that we are using the new controls, all the code we had in our code-behind for our custom stepper control is no longer needed and our code should now look like the following:
Ce Finito Guys!🎊☺️
Great Job! we have now completed our upgrade. I hope you have a great time like I did, trying out and discovering all the new goodies the Xamarin team has been working on this past year for us.
Full Source Code for the sample App can be found on my Github Repo [SliderViewSample]
Made with ❤ by Pujolsluis
Good References to learn more about the latest Xamarin Releases
The official Release Notes – Microsoft:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/release-notes/4.4/4.4.0
CarouselView Official Documentation:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/
