Carousel Page:
The Carousel Page Provide the Navigation Experience where the user is able to Navigate Through Pages, Forward and Backwards as Desired Using a Swipe Gesture. In Carousel Page, User can Swipe from side to side to Navigates through Pages of Content.
Carousel Page contains different Pages and each Pages has its own content. User can Navigate the Pages through by Swiping right to left to Navigate Forwards through the collection, and Left to Right to Navigate Backwards through the Collection.
Declaration:
We Use the Following Syntax to Create the Main Carousel Page.
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CarouselPageDemo"
x:Class="CarouselPageDemo.MainPage"
Title="Carousel Page">
<!-- Content Pages -->
</CarouselPage>
using Xamarin.Forms;
namespace CarouselPageDemo
{
public partial class MainPage : CarouselPage
{
public MainPage()
{
//content pages
}
}
}
In Above Code, we create a Carousel Page. The Carousel Page is the Parent page that contains Multiple content pages. Now it’s time to Create a Content Pages. We Can Create the Content Pages by Two Ways:
Adding Content Pages in The Parent Page.
We can Create Different Content Pages in the Parent Carousel Page. The Carousel Page will then display each page in turn, with a swipe interaction Moving to the next page to be displayed. Consider the Following Example, where we create three Content Pages in the Parent Page.
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CarouselPageDemo"
x:Class="CarouselPageDemo.MainPage"
Title="Carousel Page">
<!--First Content Page-->
<ContentPage>
<StackLayout>
<Label
Text="First Page"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontSize="Large"
TextColor="#184757"
Font="bold, 36"
/>
<Image Source="swipe-right.png"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ContentPage>
<!--Second Content Page-->
<ContentPage>
<!--Page Contents-->
</ContentPage>
<!--Third Content Page-->
<ContentPage>
<!--Page Contents-->
</ContentPage>
</CarouselPage>
public partial class MainPage : CarouselPage
{
public MainPage()
{
InitializeComponent();
//First Content Page
var firstPage = new ContentPage
{
Content = new StackLayout
{
Children =
{
new Label
{
Text = "First Page",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
TextColor = Color.FromHex("184757"),
FontAttributes = FontAttributes.Bold
},
new Image
{
Source= "swipe-right.png",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
}
}
}
};
//Second Content Page
var SecondPage = new ContentPage
{
//second Page contents:
};
//Third Content Page
var thirdPage = new ContentPage
{
//Third Page contents
};
Children.Add(firstPage);
Children.Add(SecondPage);
Children.Add(thirdPage);
}
}
In Above Example, we create Three Content Pages, and each page simply displays a Label and a Picture. As shown in the following screenshots.
Create Separate Content Page and Use its Reference.
We Can Create Separate Content Pages To make carousel Page. In Order to do this, first we need to create separate page, And use the Reference of that content page as a child of a Carousel Page.
Consider the Following example where we create three different Contents pages and use their reference as a child of carousel Page.
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CarouselPageDemo"
x:Class="CarouselPageDemo.MainPage"
Title="Carousel Page">
<local:FirstPage/>
<local:SecondPage/>
<local:ThirdPage/>
</CarouselPage>
using Xamarin.Forms;
namespace CarouselPageDemo
{
public partial class MainPage : CarouselPage
{
public MainPage()
{
InitializeComponent();
Children.Add(new FirstPage());
Children.Add(new SecondPage());
Children.Add(new ThirdPage());
}
}
}
In Above Code Example, We Add the Reference of three contents pages as the child of Parent Carousel Page. Now these child pages will act as one of the pages in our carousel page.
