Forum Xamarin.Forms

How to make image in carouselview clickable

Hi, I've been using the carouselview for the past week and so far so good. I have setup code so I can see the progress indicator and can swipe my images flawlessly.
However I'm trying to add the functionality to click on an image in the carouselview and none of the efforts I have made seem to work. I've tried adding a gesturerecognizer to the carouselview, grid and image, tried overlapping it with a button, tried a Boxview inside of the Datatemplate and tried adding it to the allready existing behavior.
Any ideas?

<Grid x:Name="carouselgrid" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!--Position used for starting position of carouselimage--> <cv:CarouselView Grid.Row="0" Grid.RowSpan="2" x:Name="MainCarouselView" ItemsSource="{Binding Images}" Position="{Binding Position}" HorizontalOptions="FillAndExpand"> <cv:CarouselView.ItemTemplate> <DataTemplate> <Image Source="{Binding ImageUrl}"/> </DataTemplate> </cv:CarouselView.ItemTemplate> <cv:CarouselView.Behaviors> <local:CarouselImageBehavior/> </cv:CarouselView.Behaviors> </cv:CarouselView> <!--buttons to navigate through carousel--> <StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" Margin="0,0,0,10"> <Image Source="{Binding CarouselPosition[0]}"/> <Image Source="{Binding CarouselPosition[1]}"/> <Image Source="{Binding CarouselPosition[2]}"/> <Image Source="{Binding CarouselPosition[3]}"/> <Image Source="{Binding CarouselPosition[4]}"/> <Image Source="{Binding CarouselPosition[5]}"/> <Image Source="{Binding CarouselPosition[6]}"/> </StackLayout> </Grid>

Best Answer


  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited April 2017

    Can you include the behaviors code as well? I would think the issue to be in code, not markup.

  • DimiVanLangenhovenDimiVanLangenhoven USMember ✭✭

    Behavior code is following, however adding ItemSelected to the code didn't work for taps only swipe.


        protected override void OnAttachedTo(CarouselView bindable)
            AssociatedObject = bindable;
            bindable.PositionSelected += Bindable_PositionSelected;
        protected override void OnDetachingFrom(CarouselView bindable)
            bindable.PositionSelected -= Bindable_PositionSelected;
            AssociatedObject = null;
        protected void Bindable_PositionSelected(object sender, SelectedPositionChangedEventArgs args)
            if(base.BindingContext != null)
  • DimiVanLangenhovenDimiVanLangenhoven USMember ✭✭

    Still haven't found a solution on this topic... any help or leads would be welcome.

  • mikeacostamikeacosta USUniversity ✭✭✭

    PositionSelected fires when you move to a different item, not when the item is clicked or tapped.

    Get TapGestureRecognizer and event handler working on a single image in a simple ContentPage, then extend that to the image in the DataTemplate.

  • Vaka.GopiNadhReddyVaka.GopiNadhReddy USMember ✭✭✭


    i done a small sample on carousel view with Tap Gesture. i think this will help you.

  • DimiVanLangenhovenDimiVanLangenhoven USMember ✭✭

    Thanks for your replies, I have tried implementing following solution in my xaml and VM. I have verified my TapgestureRecognizer works on other images, yet no response at the Tapevent.
    @Vaka.GopiNadhReddy I went through your code but you seem to do the same I do but in full C# instead of xaml or am I mistaken and am I overlooking something?

    Following adjustment in the xaml. Backend for tap is working.

    <cv:CarouselView Grid.Row="0" Grid.RowSpan="2" x:Name="MainCarouselView" ItemsSource="{Binding Images}" Position="{Binding Position}" HorizontalOptions="FillAndExpand"> <cv:CarouselView.ItemTemplate> <DataTemplate> <StackLayout> <StackLayout.GestureRecognizers> <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="Carouseltap" /> </StackLayout.GestureRecognizers> <Image Source="{Binding ImageUrl}" Aspect="Fill"/> </StackLayout> </DataTemplate> </cv:CarouselView.ItemTemplate> <cv:CarouselView.Behaviors> <local:CarouselImageBehavior/> </cv:CarouselView.Behaviors> </cv:CarouselView>

    @mikeacosta I believe the above is what you meant?

    Thanks for your help so far.

  • mikeacostamikeacosta USUniversity ✭✭✭

    @DimiVanLangenhoven Assigning the TapGestureRecognizer to the image is what I had in mind

    <Image Source="{Binding ImageUrl}" Aspect="Fill">
        <TapGestureRecognizer Command="{Binding TapCommand}” NumberOfTapsRequired="1" />

    but if what you have works for you, it s/b fine.

  • DimiVanLangenhovenDimiVanLangenhoven USMember ✭✭

    @mikeacosta I tried both your and my way but both didn't respond, didn't include the NumberOfTapsRequired but that should not be the problem.

  • Vaka.GopiNadhReddyVaka.GopiNadhReddy USMember ✭✭✭


                                TapGestureRecognizer tapGesture = new TapGestureRecognizer();
                tapGesture.SetBinding(TapGestureRecognizer.CommandParameterProperty, "BackgroundColor");

    you have to implement above code in xaml.

  • mikeacostamikeacosta USUniversity ✭✭✭

    @DimiVanLangenhoven Also, maybe share your code where you implement the Command and corresponding EventHandler, the issue could be in there.

  • DimiVanLangenhovenDimiVanLangenhoven USMember ✭✭
    edited April 2017

    @mikeacosta The following code is what I use to handle my command.

    > class HomePageViewModel : INotifyPropertyChanged
    >         {
    >         private ICommand tapCommand;
    >          public HomePageViewModel()
    >          {
    >               tapCommand = new Command(OnTapped);
    >           }
    >         async void OnTapped(Object s)
    >          {
    >           String param= (String)s;
    >           switch (param)
    >           {
    >               case "Carouseltap":
    >               {
    >                   //logic
    >               }
    >           }
    >         }
    >         public ICommand TapCommand
    >                 {
    >                     get
    >                     {
    >                         return tapCommand;
    >                     }
    >                 }
    >     }
  • DimiVanLangenhovenDimiVanLangenhoven USMember ✭✭

    Thank you @mikeacosta , adding a EventHandler to my Image class and giving this handler the OnTapped method in my ViewModel did the trick. Your help is much appreciated, wouldn't have found the solution without it!

Sign In or Register to comment.