How to use IndicatorView in CarouselPage?

user_9565890 0
Viewed 602

I am trying to add an Indicator View style dots to my CarouselPage; However, the documentation I have found only shows how to use the new IndicatorView with CarouselView.

Is there anyway to use it with CarouselPage instead? If not, Is there anything similar to IndictorView that's used for CarouselPage? Here's my code:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Page.MainPage">
    <ContentPage>
        <StackLayout Padding="0,20,0,0">
                <Image Source="LOGO.png"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       HeightRequest="195"
                       WidthRequest="205"
                       />
                <AbsoluteLayout HorizontalOptions="Center" VerticalOptions="Center">
                      <Image Source="bg.png"
                             AbsoluteLayout.LayoutBounds="0.35, 0.6, -1, 1" 
                             AbsoluteLayout.LayoutFlags="PositionProportional"          
                             HeightRequest="330"
                             WidthRequest="200"/>
                      <Image Source="Device.png"
                             AbsoluteLayout.LayoutBounds="0.45, 0.4, -1, -1" 
                             AbsoluteLayout.LayoutFlags="PositionProportional"  
                             HeightRequest="252"
                             WidthRequest="290"/>
                </AbsoluteLayout>     
                <StackLayout>
                    <Label Text="Welcome"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       TextColor="White"
                       Padding="0,15"
                       Font="Bold,20"/>

                    <Label Text="This is page 1"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       FontSize="18"
                       Padding="25,0"
                       TextColor="White"/>
                </StackLayout>
        </StackLayout>
    </ContentPage>
    <ContentPage BackgroundColor="#3e454d">
        <StackLayout BackgroundColor="#3e454d">     
                <AbsoluteLayout>
                      <Image Source="Map.png"
                             AbsoluteLayout.LayoutBounds="0.4, 0.7, -1, -1" 
                             AbsoluteLayout.LayoutFlags="PositionProportional"          
                             HeightRequest="330"
                             WidthRequest="205"/>
                      <Image Source="Device.png"
                             AbsoluteLayout.LayoutBounds="0.45, 0.7, -1, -1" 
                             AbsoluteLayout.LayoutFlags="PositionProportional"  
                             HeightRequest="282"
                             WidthRequest="340"/>
                </AbsoluteLayout>     
                <StackLayout Padding="10,10">
                    <Label Text="Join US"
                       TextColor="White"
                       Padding="0,0,0,15"
                       Font="Bold,22"/>

                    <Label Text="This is Page 2"
                       HorizontalTextAlignment="Center"
                       FontSize="18"
                       TextColor="White"/>
                </StackLayout>
        </StackLayout>
    </ContentPage>
</CarouselPage>
xamarin.forms xamarin xamarin.android xamarin.ios
1 Answers

Use CarouselView instead of CarouselPage , embedd CarouselPage.Content to CarouselView.ItemLayout as mentioned in the documentation

Note that IndicatorView is different view, its not embedded in CarouselPage , even in CarouselView , you have to give the binding reference to CarouselView in order for it to work.

Also note that IndicatorView is still in Preview mode you need to set the experimental flag in order to make it work 

 Forms.SetFlags("IndicatorView_Experimental");

Also its showing Carouselview is in preview too(It was not, weird!)

so you may have to set experimental flag for that as well

Forms.SetFlags("CarouselView_Experimental");
user_79075910
Related