'CarouselView Xamarin forms indicator view not showing
Im trying to see the indicator views , but for some reason I cant see them , also , I tried horizontals options : fill and expand , it does work on ios on landscaping orientation.However, I cant get it to expand when the android is on landscape
this is what I have
<StackLayout HorizontalOptions="FillAndExpand">
<CarouselView EmptyView="No items to display." IndicatorView="indicatorView" ItemsSource="{Binding CarouselImages}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="StartAndExpand" >
<Image Source="{Binding ImagePath}"
Aspect="AspectFill"
HorizontalOptions="StartAndExpand" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorsShape="Square"
MaximumVisible="6"
IndicatorColor="DarkRed"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
</StackLayout>
Solution 1:[1]
Just manage to set the VerticalOptions
and HorizontalOptions
of the indicatorView to FillAndExpand
like below:
<IndicatorView x:Name="indicatorView"
IndicatorsShape="Square"
MaximumVisible="6"
IndicatorColor="DarkRed"
SelectedIndicatorColor="DarkGray"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
Solution 2:[2]
Give it a size
, for example IndicatorSize="12"
<IndicatorView
x:Name="indicatorView"
HorizontalOptions="Center"
IndicatorColor="DarkRed"
IndicatorsShape="Square"
MaximumVisible="6"
IndicatorSize="12"
SelectedIndicatorColor="DarkGray" />
Solution 3:[3]
In your case, Indicator view is actually displayed. You haven't noticed it since it's present at the bottom edge of the mobile screen. Please refer the screenshot below:
Indicator view present at the bottom edge of the screen.
This is happening because the carousel view expands to most of the screen size available. You can fix this issue by providing a Heightrequest to carouselview control, say 200.
For example:
<StackLayout HorizontalOptions="FillAndExpand">
<CarouselView EmptyView="No items to display." HeightRequest="200" VerticalOptions="Center" IndicatorView="indicatorView" ItemsSource="{Binding CarouselImages}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="StartAndExpand">
<Image Source="{Binding ImagePath}"
Aspect="AspectFill"
HorizontalOptions="StartAndExpand" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorsShape="Square"
MaximumVisible="6"
IndicatorColor="DarkRed"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
</StackLayout>
Please refer the screenshot after providing HeightRequest to the carouselview control:
Screenshot after adding HeightRequest to the carousel control
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Alexandar May - MSFT |
Solution 2 | |
Solution 3 | elzajames |