Image Gallery in Xamarin.Forms – 18 Months Later

A lot of time has passed since my last post about how to implement an image gallery in Xamarin.Forms. At the time the best solution was to use an ImageGallery control provided by the awesome people of XLabs but since the release of Xamarin.Forms 2.3 we can finally use a more versatile control named CarouselView.

CarouselView has a two main advantages over the Xlab’s ImageGallery:

  • It is fully customizable through the use of DataTemplates
  • We can avoid to install all the Xlab’s packages just for the ImageGallery

What makes this control awesome is that thanks to the use of DataTemplates we can put everything we want inside its “pages”. In this post we will use Images but nothing prevents us from using whatever control we want from Labels to complex layouts!

 

HOW-TO

First thing we need to add the CarouselView Nuget to all our projects  (it works on Android, iOS & UWP) paying attention to check the “Include prerelease” option otherwise the package will not appear:

Screen Shot 2016-08-01 at 23.03.57

Then we need to add the namespace in the XAML files in which we intend to use this control:

Done that we can simply use it in XAML like a normal Xamarin.Forms control:

If we are targeting also UWP it is necessary to add this in the app resources of the App.xaml (of the UWP project, not the shared/PCL)

where the uwp namespace is given by:

 

LINKER

One thing to keep in mind is that this control is inside another assembly.
This means that the linker will “link it out” because we are not actually using it: when we use xaml file they are copied in the application package and then parsed only at run time so the linker doesn’t know yet that we are going to use something from that assembly.

Screen Shot 2016-08-02 at 19.50.25

In order to avoid the linker to exclude carouselView’s assembly we can proceed in two ways:

  • Use Compiled XAML, in this way our XAML will be parsed at compile time and the linker will know that we are using CarouselView
  • Load the Assembly somewhere in our code so that, again, the liker  knows that we are using it

I personally prefer the first solution as with XAMLC also comes more speed a smaller package.
To enable XAMLC we need to add

somewhere in our assembly. A good place is in the App.cs:

 

POSITIONCHANGEDCOMMAND

Strangely enough this control doesn’t expose a bindable command property to manage what happens when the user changes “page”.
We could give a name to the control in the xaml and then subscribe the PositionSelected event but if we are using the MVVM pattern that is not ideal.

Luckily we can transform every event into a command using Behaviours:

To use this Behaviour simply add this to the CarouselView

 

PAGINATION

Now that we have a command we have all we need to create a pagination element! Simply create a command to manage what should happen when the user changes “page”.

 

SAMPLE

If you are encountering problems implementing the CarouselView or you just want to see how it renders on all the platforms look at this sample: Poz1.ImageGallery

Poz1.ImageGallery

 

MAKEMEMVP

If you found this post useful consider nominating me for the MVP Award 🙂