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:

        <corelayouts:CarouselViewDots BindingContext="{Binding Path=Carousel}" HeightRequest="200" DotColor="White" DotSize="6"
            ScrollToIndex="{Binding ScrollToIndex, Mode=TwoWay}">
            <corelayouts:CarouselViewDots.ItemTemplate>
                <DataTemplate>
                    <citem:CarouselImageView />
               </DataTemplate>
           </corelayouts:CarouselViewDots.ItemTemplate>
        </corelayouts:CarouselViewDots>

<corelayouts:CarouselViewDots BindingContext="{Binding Path=Carousel}" HeightRequest="200" DotColor="White" DotSize="6"

ScrollToIndex="{Binding ScrollToIndex, Mode=TwoWay}">

<corelayouts:CarouselViewDots.ItemTemplate>

<citem:CarouselImageView />

</DataTemplate>

</corelayouts:CarouselViewDots.ItemTemplate>

</corelayouts:CarouselViewDots>

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:

namespace DemoApp.ViewModels
{
	public class CarouselDemoViewModel : CarouselViewModelBase
	{
		IFlickrFeed _feedService;
		public CarouselDemoViewModel(IFlickrFeed feedService) : base()
		{
			_feedService = feedService;

			CarouselPages = new List<CarouselItemViewModel>() {
				new CarouselItemViewModel { Title = "Slide 1", Description="This is the most beautiful Slide 1 ever", Background = Color.Silver, ImageSource = "carouselimage1.jpg" },
				new CarouselItemViewModel { Title = "Slide 2", Description="This is the most beautiful Slide 2 ever", Background = Color.Red, ImageSource = "carouselimage2.jpg" },
				new CarouselItemViewModel { Title = "Slide 3", Description="This is the most beautiful Slide 3 ever", Background = Color.Blue, ImageSource = "carouselimage3.jpg" },
				new CarouselItemViewModel { Title = "Slide 4", Description="This is the most beautiful Slide 4 ever", Background = Color.Yellow, ImageSource = "carouselimage4.jpg" },
				new CarouselItemViewModel { Title = "Slide 5", Description="This is the most beautiful Slide 5 ever", Background = Color.Olive, ImageSource = "carouselimage5.jpg" },
			};

			CurrentCarouselPage = CarouselPages.First();

		}


		private Command _LoadPhotosFromFlickrCommand;
		public  Command LoadPhotosFromFlickrCommand {
			get {
				this._LoadPhotosFromFlickrCommand = this._LoadPhotosFromFlickrCommand ?? new Command ( async () => 
					{
						await LoadPhotosFromFlickrAsync();
					});
				return this._LoadPhotosFromFlickrCommand;
			}
		}


		private async Task LoadPhotosFromFlickrAsync() {

			try {
				var items =   await _feedService.GetImagesAsync ("lake,como", 8);

				var newCarouselPages = new List<CarouselItemViewModel>();
				foreach (var flickrImage in items) {
					newCarouselPages.Add( new CarouselItemViewModel() {
						Title = flickrImage.title, 
						ImageSource=flickrImage.media.m,
						Description = flickrImage.tags
					} );
				}

				base.CarouselPages = newCarouselPages;

			}
			catch (Exception e) {
				Debug.WriteLine (e.Message);
			}

		}

	}
}

namespace DemoApp.ViewModels

{

public class CarouselDemoViewModel : CarouselViewModelBase

{

IFlickrFeed _feedService;

public CarouselDemoViewModel(IFlickrFeed feedService) : base()

{

_feedService = feedService;

CarouselPages = new List<CarouselItemViewModel>() {

new CarouselItemViewModel { Title = "Slide 1", Description="This is the most beautiful Slide 1 ever", Background = Color.Silver, ImageSource = "carouselimage1.jpg" },

new CarouselItemViewModel { Title = "Slide 2", Description="This is the most beautiful Slide 2 ever", Background = Color.Red, ImageSource = "carouselimage2.jpg" },

new CarouselItemViewModel { Title = "Slide 3", Description="This is the most beautiful Slide 3 ever", Background = Color.Blue, ImageSource = "carouselimage3.jpg" },

new CarouselItemViewModel { Title = "Slide 4", Description="This is the most beautiful Slide 4 ever", Background = Color.Yellow, ImageSource = "carouselimage4.jpg" },

new CarouselItemViewModel { Title = "Slide 5", Description="This is the most beautiful Slide 5 ever", Background = Color.Olive, ImageSource = "carouselimage5.jpg" },

};

CurrentCarouselPage = CarouselPages.First();

}

private Command _LoadPhotosFromFlickrCommand;

public Command LoadPhotosFromFlickrCommand {

get {

this._LoadPhotosFromFlickrCommand = this._LoadPhotosFromFlickrCommand ?? new Command ( async () =>

{

await LoadPhotosFromFlickrAsync();

});

return this._LoadPhotosFromFlickrCommand;

}

private async Task LoadPhotosFromFlickrAsync() {

try {

var items = await _feedService.GetImagesAsync ("lake,como", 8);

var newCarouselPages = new List<CarouselItemViewModel>();

foreach (var flickrImage in items) {

newCarouselPages.Add( new CarouselItemViewModel() {

Title = flickrImage.title,

ImageSource=flickrImage.media.m,

Description = flickrImage.tags

} );

}

base.CarouselPages = newCarouselPages;

}

catch (Exception e) {

Debug.WriteLine (e.Message);

}

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:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="DemoApp.Views.Carousel.CarouselImageViewExtended">

  <ContentView.Resources>
        <ResourceDictionary>

             <Style x:Key="textStyle" TargetType="Label">
                <Setter Property="TextColor">
                  <Setter.Value>
                    <OnPlatform x:TypeArguments="Color"
                                Android="#0F0F0F"
                                iOS="#0F0F0F"/>
                  </Setter.Value>
                </Setter>
           </Style>

        </ResourceDictionary>
    </ContentView.Resources>

    <StackLayout  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <RelativeLayout  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Image  Source="{Binding ImageSource}"  Aspect="AspectFill"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1.0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1.0}" />

            <StackLayout Opacity="0.7" BackgroundColor="#FDDA91"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.67}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1.0}" >

                <StackLayout HorizontalOptions="FillAndExpand" BackgroundColor="#FB8216" Padding="5,0,0,0">
                    <Label Text="{Binding Title}" FontSize="Small" FontAttributes="Bold" Style="{StaticResource textStyle}" LineBreakMode="TailTruncation" />
                </StackLayout>
                <StackLayout HorizontalOptions="FillAndExpand"  Padding="5,0,0,0" >
                 <Label Text="{Binding Description}" FontSize="Micro" LineBreakMode="WordWrap" Style="{StaticResource textStyle}" />
                </StackLayout>

            </StackLayout>
        </RelativeLayout>
    </StackLayout>

</ContentView>

<?xml version="1.0" encoding="UTF-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="DemoApp.Views.Carousel.CarouselImageViewExtended">

<ContentView.Resources>

<Setter.Value>

<OnPlatform x:TypeArguments="Color"

Android="#0F0F0F"

iOS="#0F0F0F"/>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

</ContentView.Resources>

<Image Source="{Binding ImageSource}" Aspect="AspectFill"

RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1.0}"

RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1.0}" />

<StackLayout Opacity="0.7" BackgroundColor="#FDDA91"

RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.67}"

RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"

RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"

RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1.0}" >

</StackLayout>

</StackLayout>

</RelativeLayout>

</StackLayout>

</ContentView>

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:

        <corelayouts:CarouselViewDots BindingContext="{Binding Path=Carousel}" HeightRequest="200" DotColor="White" DotSize="6"
            ScrollToIndex="{Binding ScrollToIndex, Mode=TwoWay}">
            <corelayouts:CarouselViewDots.ItemTemplate>
                <DataTemplate>
                    <citem:CarouselImageViewExtended />
               </DataTemplate>
           </corelayouts:CarouselViewDots.ItemTemplate>
        </corelayouts:CarouselViewDots>

<corelayouts:CarouselViewDots BindingContext="{Binding Path=Carousel}" HeightRequest="200" DotColor="White" DotSize="6"

ScrollToIndex="{Binding ScrollToIndex, Mode=TwoWay}">

<corelayouts:CarouselViewDots.ItemTemplate>

<citem:CarouselImageViewExtended />

</DataTemplate>

</corelayouts:CarouselViewDots.ItemTemplate>

</corelayouts:CarouselViewDots>

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!