CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Vitalii Feduniak
Vitalii Feduniak

Reputation: 113

Xamarin - How to display current position in CarouselView control?

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.

Upvotes: 0

Views: 2856

Answers (2)

zpouip
zpouip

Reputation: 787

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));    
});

Upvotes: 1

Markus Michel
Markus Michel

Reputation: 2299

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).

Upvotes: 0

Related Questions