Xamarin.Forms Carousel – Part 4: Design-Fun in XAML

I’m on an exciting journey, getting up to speed with Xamarin.Forms. Being mostly a ASP.NET developer since more than a decade, i used some great resources out there to learn the concepts of Xamarin.Forms (using the fantastic preview chapters of Charles Petzold’s book) as well as best practices for a MVVM/IOC based architecture. For the latter the wonderful blog „Adventures in Xamarin Forms“ by Jonathan Yates was an indispensable resource full of insights and creative inspiration.

This is part 4 of the series „Creating a Xamarin.Forms Carousel“

Part 1: The basic parts
Part 2: Converting the pieces into a MVVM/XAML architecture
Part 3: Reloading the Carousel’s content from a WebService
Part 4: Design-Fun in XAML

 

In my last post i showed how easy and straightforward it is to reload the Carousel’s content from a WebService. In the demo i loaded some images from the Flickr Api.

After all the pitfalls are mastered it’s finally time to have some fun and add some beautiful Carousel-Layout to our demo.
As you hopefully remember, the Carousel is integrated in a XAML page like this:

 

The type of item inside the carousel is defined in the ItemTemplate element, making it very easy to replace this basic ImageView with something more sophisticated. What i want is the image in full width, overlaid by some title and description label with reduced opacity.
So first we need to collect the data in our ViewModel. I extended my CarouselItemViewModel to have a property „Description“ and then initialize the Description in the CarouselDemoViewModel’s constructor (for the static images) as well as in the command loading photos from Flickr. For the Flickr images i will display the image tags as description:

 

The code above was explained in my previous post in detail, so if you haven’t done yet, i recommend starting with my previous posts in this series.
OK, now the required data are in place and we can start building our ContentView in XAML. I will call this one „CarouselImageViewExtended“.  It uses a RelativeLayout to create the text overlay. Here’s the XAML:

 

I’ve left the platform dependent text style in the ResourceDictionary, although i’ve ended up with taking the same color for Android and iOS. Take it as a reminder of what else could be customized, if you wish so.

Now let’s use this new ContentView in our Carousel. In the XAML page, we change the ItemTemplate to use our item: CarouselImageViewExtended:

 

This should be all it takes. Let’s start up the app and see how it looks in iOS and Android. I’ve also changed the colors of the Stacklayouts surrounding the Carousel a bit, so here’s what it looks like now:

Video of iOS-version:

Video of Android-version:

Sweet. The possibilities are endless – thanks to the great flexibility of Xamarin.Forms.

Happy coding!