Hey Forms Community! I was hacking around last weekend to make some kind of SliderView that I could use instead of a CarouselPage. I wanted to share this with the community in the hopes that it will help someone out until the Xamarin.Forms team is able to release a real CarouselView. I only created this for iOS and Android; I'm not the best at Windows Phone, but if anyone wants to finish that potion I will happily put it in the GitHub.
EDIT
Here are the videos that I forgot to add:
iOS:
Android:
How did I do this?
I came up with an idea to make a canvas, then animate views into the canvas to create a sliding action. To accomplish this, I utilized a ContentView for my SliderView and then created ViewRenderers to bring in Gesture Recognizers on the iOS and Android platforms. The SliderView has two main properties that are key to making this work: A ViewScreen property that is an AbsoluteLayout and a Children property that is an ObservableCollection of Xamarin.Forms Views. The ViewScreen is what will actually be considered the "View Window" on the phone and the Children will be all the views in the Slider.
As you swipe in either direction, SliderView places the next view off screen and then uses the TranslateTo animation to bring the CurrentView onto the ViewScreen. I also created a little StackLayout for the tiny white dots that we all know and love. I did not implement the click event for the dots. The dots are buttons and you could use the click event to set the CurrentPage property and then have that fire off the TranslateTo, but you would need to build that in. Personally, I hate the little white dots with the click feature because they are too small to be of any use on mobile. That is my personal opinion and I know probably a lot of people will disagree with me, but the option is there for anyone to build it in. I personally have never used them so I made that decision for my applications. Below is a picture that depicts what is going on in SliderView:
Great! So I bet a lot of people are probably thinking about the performance of the images on Android. If you look in the project (GitHub link at bottom of this post), you'll see that I have images in the drawable, drawable-hdpi, drawable-xhdpi, and drawable-xxhdpi folders. The images were properly scaled to meet the various pixel densities that we see across the fragmented Android devices. I wanted to take this opportunity to show just how much memory can be saved on image performance when they are scaled to the appropriate sizes.
I created some test scripts that I ran in Xamarin Test Cloud. If you want to see the specs of the devices, check out the GitHub link at the bottom and it's all in the README with more details.
I ran three tests:
- Using Original Images (minimum of 2500x1500 pixels for all images)
- Using images scaled to 1080 pixel width
- Using scaled images for all of the different densities
Below are the results from Test Cloud:
Look at how much memory was saved on all android devices tested. So if you don't scale your images, that is probably one source of performance issues. I hope this helps new Xamarin.Forms users to better understand what you should be doing on the Android side.
This is super cool! I'm able to have pretty awesome performance with this SliderView and I can pass in any kind of Xamarin.Forms View into it. I also was able to see that when I navigate away and then reload the SliderView, my memory doesn't grow from the first time I loaded the SliderView. Perfect!
I think this is awesome that I can make controls like this in Xamarin.Forms! I hope this helps out someone. I also went through all my code and put comments in it so anyone can understand what is going on when they look at the . Go Forms!
GitHub link to the code:
https://github.com/xamarin/customersuccess/tree/master/samples/Xamarin.Forms/SliderView