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.
1 2 3 4 5 6 7 8 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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); } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?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> |
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:
1 2 3 4 5 6 7 8 |
<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> |
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!