IndexPage

Warning

IndexPage is obsolete as of version 1.5.0.

Please use Xamarin.Forms.CarouselView with Xamarin.Forms.IndicatorView or Xamarin.Forms.CarouselPage instead.

The IndexPage allows you to know in advance the number of pages you have when you configure the application on multiple pages. It also shows the number of pages you are viewing. It is an extension of Xamarin.Forms.MultiPage. When the Page is added and removed in the Xamarin.Forms.MultiPage, the number of dot marks increases or decreases automatically at the top of window. It is similar to the CarouselPage in the Xamarin.Forms, with the addition of Index. When the Page is scrolled, the Index operates internally.

Add IndexPage

You can add pages and this will increase the number of dot mark by index accordingly. The maximum number of dot mark is 20 follow as the Samsung device UI limitation. In the illustrated example, three pages are added. The number of dot mark is three. Since, it is on the first page, only the first dot mark is shown as white, and the remaining dot marks are shown as grey.

Since the maximun number of dot mark is limited by the samsung device UI guide, you will run into unwanted issue if you add pages more than the maximum number

For more information, see the following links:

• IndexPage API reference
• Xamarin.Forms.MultiPage API reference

The code example of this guide uses TCIndexPage code of WearableUIGallery. The code is available in test\WearableUIGallery\WearableUIGallery\TC\TCIndexPage.xaml

XAML file

<?xml version="1.0" encoding="utf-8" ?>
<w:IndexPage
    x:Class="WearableUIGallery.TC.TCIndexPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WearableUIGallery"
    xmlns:w="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms">
    <ContentPage>
        <StackLayout>
            <BoxView VerticalOptions="FillAndExpand" Color="Red" />
            <Label HorizontalOptions="CenterAndExpand" Text="Red" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        <StackLayout>
            <BoxView VerticalOptions="FillAndExpand" Color="Green" />
            <Label HorizontalOptions="CenterAndExpand" Text="Green" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        <StackLayout>
            <BoxView VerticalOptions="FillAndExpand" Color="Blue" />
            <Label HorizontalOptions="CenterAndExpand" Text="Blue" />
        </StackLayout>
    </ContentPage>
</w:IndexPage>