Xamarin.Forms - Image Slider Using Image Carousel Plugin

Introduction

 

 

 

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files are most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Image Carousel

With Image Carousel users can swipe from side to side to swipe images, like a gallery. This article demonstrates how to use an Image Carousel to swipe through a collection of images.

Prerequisites

• Visual Studio 2017 (Windows or Mac)

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You’ll learn more by going through the steps yourself.

Choose the Xamarin.Forms App Project type under Cross-platform/App in the New Project dialog.

 

 

Name your app, select “Use Portable Class Library” for shared code, and target both Android and iOS.

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click Create.

You now have a basic Xamarin.Forms app. Click the play button to try it out.

Add Image Carousel Plugin

 

In this step, add Image Carousel to your project. You can install Image Carousel via NuGet, or you can browse the source code on GitHub.

 

Go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for Solution". Search "Xamd.Plugins.Forms.ImageCarousel" and add Package. Remember to install it for each project (PCL, Android, iO, and UWP).

Image Carousel requires platform-specific setup

Android

In the Android project's MainActivity,  Image Carousel must be initialized in the OnCreate method.

MainActivity.cs

ImageCarouselRenderer.Init();

iOS

In the iOS project, Image Carousel must be initialized in the FinishedLaunching method on AppDelegate.

AppDelegate.cs

ImageCarouselRenderer.Init();

Add xmlns namespace

MainPage.xaml

xmlns:controls="clr-namespace:Xamd.ImageCarousel.Forms.Plugin.Abstractions;assembly=Xamd.ImageCarousel.Forms.Plugin.Abstractions"

Setting up the User Interface

Go to MainPage.Xaml and write the following code.

 

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinImageSlider"
             xmlns:controls="clr-namespace:Xamd.ImageCarousel.Forms.Plugin.Abstractions;assembly=Xamd.ImageCarousel.Forms.Plugin.Abstractions"
             x:Class="XamarinImageSlider.MainPage">
    <StackLayout>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Start">
            <Image Margin="0,50,0,0" x:Name="imgBanner" Source="banner.png" ></Image>
        </StackLayout>
        <StackLayout HorizontalOptions="Center" VerticalOptions="End">
            <controls:ImageCarousel x:Name="imgSlider" HeightRequest="300" WidthRequest="300" />
        </StackLayout>
    </StackLayout>
</ContentPage>

In this step, write the following code for slide images using ImageCarousel.

MainPage.xaml.cs

using Xamarin.Forms;
using Xamd.ImageCarousel.Forms.Plugin.Abstractions;
namespace XamarinImageSlider
{
    public partial class MainPage : ContentPage
    {
        ObservableCollection<FileImageSource> imageSources = new ObservableCollection<FileImageSource>();
        public MainPage()
        {
            InitializeComponent();

            imageSources.Add("XamarinmonkeyLogo.png");
            imageSources.Add("github.png");
            imageSources.Add("microsoft.png");


            imgSlider.Images = imageSources;
        }
    }
}

Click the play button to try it out.

 

 

• Download source from GitHub Repository

I hope you have understood how to slide images using Image Carousel in Xamarin.Forms.

Thanks for reading. Please share comments and feedback.