Xamarin - How to display current position in CarouselView control? - xaml

Question

Please help with CarouselView.
Xaml:
<carousel:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding ImSource}" Aspect="AspectFill" Grid.Row="0" Grid.RowSpan="3" HeightRequest="220"/>
<Button
Grid.Row="0"
Text="1/1"
CornerRadius ="40"
FontSize="10"
HorizontalOptions="End"
BackgroundColor="Black"
TextColor="White"
WidthRequest="40"
HeightRequest="20"
Margin="0, 10, 10, 0"
Opacity="0.7"
Padding="0"/>
<controls:CircleImage
Grid.Row="2"
Source="users.png"
HorizontalOptions="Start"
WidthRequest="22"
Opacity="0.7"
Margin="10, 0, 0, 10"/>
</Grid>
</DataTemplate>
</carousel:CarouselViewControl.ItemTemplate>
</carousel:CarouselViewControl>
On my Button I need to display current position in Carousel.
But if in list one image - need to hide this button.
Button text must be like - 2(position)/3(list.Count)
I used: https://github.com/alexrainman/CarouselView
Please tell me - how I can do this.

Answer 1

Try to bind carousel position property to your ViewModel and then bind text from ViewModel to your button. So, something like this for CarouselViewControl:
<carousel:CarouselViewControl x:Name="CarouselView"
Position="{Binding CarouselPosition}"
ItemsSource="{Binding CarouselViewItems}">
...
</carousel:CarouselViewControl>
Your Button:
<Button
Grid.Row="0"
Text="{Binding CarouselPositionDisplayCounter}" .../>
In your ViewModel, add properties like it follows.
Carousel's current position:
private int _carouselPosition;
public int CarouselPosition
{
get { return _carouselPosition; }
set
{
_carouselPosition = value;
OnPropertyChanged();
}
}
Text binded to button:
public string CarouselPositionDisplayCounter =>
$"{(CarouselPosition + 1).ToString()}/{CarouselViewItems.Count.ToString()}";
And command when swiped:
public ICommand CarouselSwipedCommand => new Command(() =>
{
OnPropertyChanged(nameof(CarouselPositionDisplayCounter));
});

Answer 2

The carouselView already comes with it's own implementation of what you want:
You just need to add the ShowIndicators property to your xaml declaration:
<controls:CarouselViewControl ShowIndicators="True" ... />
Also there are properties for specifying shape and color of the indicators:
IndicatorsTintColor: page dot indicators fill color (default #C0C0C0).
CurrentPageIndicatorTintColor: selected page dot indicator fill color (default #808080).
IndicatorsShape: Indicators shape (default Circle).