How to display the image full screen by tapping on it ?

[Julien Barach]

Hi,

I tried something like this to be able to detect a tap event on the currently selected image but then it's breaking the native behavior of the carousel :

<carousel:SfCarousel.ItemTemplate>
    <DataTemplate>
        <Image Source="{Binding ImageSource}" Aspect="AspectFill" MinimumHeightRequest="40" MinimumWidthRequest="40">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding Path=BindingContext.PhotoTappedCommand, Source={Reference Name=PictureListPage}}" CommandParameter="{Binding Id}" />
            </Image.GestureRecognizers>
        </Image>
    </DataTemplate>
</carousel:SfCarousel.ItemTemplate>

When you tap the previous or next photo, they won't become the currently selected item .
Furthermore it's not convenient to do this as we want to be able to display full screen the currently selected image by tapping on it, and we need to prevent the full screen mode when tapping on the previous/next image.

Is there a better way to do this ?

Regards,

Julien

[Kamalesh Periyasamy]

Hi Julien, 
 
Thank you for reaching out to us.  
We have reviewed your query and as you mentioned, using a TapGestureRecognizer directly on the Image inside the SfCarousel.ItemTemplate causes the native selection and swipe behavior of the carousel to break, particularly when tapping on the previous or next image. 

After reviewing your requirement, we’ve implemented a solution that allows the following behavior: 

• When tapping the currently selected item, the full-screen action is triggered via a command. 
• When tapping on the previous or next items, the carousel behaves as expected by moving the tapped image to the selected position, without triggering the full-screen action. 

How We Achieved This: 

To avoid the gesture conflict on the Image, we placed a transparent Label over the image and attached the TapGestureRecognizer to it instead. This prevents the Image gesture from interfering with the carousel’s touch logic.  
 
We also dynamically enable or disable the Label's gesture based on whether the item is currently selected, ensuring that only the selected image responds to taps for full screen. 
 
This approach has been tested and verified across all platforms. 
 
To assist you further, we’ve attached a working sample below. Kindly review it and let us know if it meets your requirement. 

Regards, 

Kamalesh P 

Attachment: CarouselSample_5bd3a828.zip