Carousel Page In Xamarin.Forms

The following topics will be discussed in this article.

• Carousel page
• Uses of Carousel page
• Practical example of Carousel page

Targeted Audience

Targeted audience is people with basic knowledge of XAML and C#.

What Carousel page is

In your mobile, you may use some application that contains different navigation between pages by a swipe gesture. You may touch and swipe to move to next page and you can navigate from one page to another page by swipe gesture which is swiped from ‘left to right’ or ‘right to left’. Carousel page is a page that contains different pages and each page has its own content depending upon the type and logic of application.

You can also see it in the image. Let’s discuss some of its uses and move towards its practical example.

Uses of a Carousel page

• Access multiple pages by a swipe gesture
• Navigation between pages become easy by swiping
• Easy to use
• One of the most-used tabbed and carousel page applications is “Instagram”. In Instagram, you can navigate between pages via tabs and via a swipe gesture.

Creating a Carousel page

Here I am using Visual Studio 2017 for Windows OS with Xamarin workload installed in it. Now we are going to make a carousel page application --  follow the steps to make it.

First make a xamarin.forms project. If you are new to xamarin.forms then learn to create your first cross-platform mobile application using Visual Studio 2017 here.

Now right click on your portable project -> Add -> New item



Then go to Cross – Platform -> Forms Carousel Page Xaml (rename it) -> click Add

Now, you will see some code in your Carousel page.

XAML 

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CsharpCorner.CarouselPageExample"
             Title="CarouselPage">
  <ContentPage>
    <StackLayout>
      <Label Text="This is a CarouselPage, you can swipe left and right to browse through additional pages." Margin="5" />
      <Label Text="Red" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Red" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage>
    <StackLayout>
      <Label Text="Green" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5"  />
      <BoxView Color="Green" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage>
    <StackLayout>
      <Label Text="Blue" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5"  />
      <BoxView Color="Blue" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
</CarouselPage>

Now, discuss the scenarios which are used to make Carousel page. A Carousel page is a parent page that contains multiple pages in it. You can add child pages by adding content page in your parent Carousel page. You can code multiple content pages in your parent page. Or you can also use reference of other page as a child of Carousel page.

But in this example, all the code is done on a main carousel page by adding content pages.

Add reference of other page

<pages:Anypagename/>

This line used is used to add ra eference of other page. Now this page will act as one of the page in your carousel page application. But in this application we are not using any other page reference but all the code is done in main page.

Add Content Page

And the code above is,

<ContentPage>
  <StackLayout>
    <Label Text="This is a CarouselPage, you can swipe left and right to browse through additional pages." Margin="5" />
    <Label Text="Red" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
    <BoxView Color="Red" VerticalOptions="FillAndExpand" />
  </StackLayout>
</ContentPage>

This code will add a content page in your application but this is not the reference of the other page. This code will add another content page. You can add multiple content pages in your carousel page.

You can simply add content page by a single <ContentPage> tag.

Let’s run the application and see how your carousel page looks.

Output on android and windows desktop



So, this is the final output of our Carousel page application. Now you can navigate from one page to another by a swipe gesture and in windows desktop application navigation button is present, which is used for navigation between pages.

You can modify the page according to your desire and make cool applications with a carousel page.