Xamarin Android CarouselView with IndicatorView position below the image

Question

How can i put the indicatorview below and center of the image?

https://i.stack.imgur.com/4PJ6P.jpg

I tried position and other stuff but i can't seem to move the indicatorview below the image.

<StackLayout Grid.Row="0" Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
                        <!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
                            Style="{StaticResource RetailHeaderImage}"
                            Source="{Binding ImageSource}">
                        </ffimageloading:CachedImage>-->
                            <CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
                                <CarouselView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid
                                    HorizontalOptions="CenterAndExpand"
                                    VerticalOptions="CenterAndExpand">

                                            <ffimageloading:CachedImage
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand"
                            LoadingPlaceholder="loading.gif"
                            Aspect="AspectFill"
                            BackgroundColor="Black"
                            Source="{Binding}">
                                            </ffimageloading:CachedImage>

                                        </Grid>
                                    </DataTemplate>
                                </CarouselView.ItemTemplate>

                            </CarouselView>
                        <IndicatorView x:Name="indicatorView"
                           IndicatorColor="LightGray"
                           SelectedIndicatorColor="DarkGray"
                           HorizontalOptions="StartAndExpand" 
                           VerticalOptions="End"/>
                        
                        <Label Text="{Binding ReferenceSku.Name}" Style="{StaticResource RetailHeaderText}" HorizontalOptions="FillAndExpand" LineBreakMode="WordWrap"/>
                       
                    </StackLayout>

Answer 1

Set the Orientation of the StackLayout to Vertical. And then set the IndicatorView in the center of the StackLayout.

Refer to the xaml below:

  <StackLayout   Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
        <!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
                        Style="{StaticResource RetailHeaderImage}"
                        Source="{Binding ImageSource}">
                    </ffimageloading:CachedImage>-->
        <CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid
                                HorizontalOptions="CenterAndExpand"
                                VerticalOptions="CenterAndExpand">
                        <Image Source="{Binding image}"></Image>

                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>

        </CarouselView>
        <IndicatorView x:Name="indicatorView"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="DarkGray"
                       HorizontalOptions="CenterAndExpand" 
                       VerticalOptions="CenterAndExpand"/>

        <Label Text="Name"    LineBreakMode="WordWrap"/>
    </StackLayout>