Adding pinch gesture to several images and filling space in grid (2 questions in one)

awerberawerber Member ✭✭

First question: I found some code at https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/workingwithgestures-pinchgesture/ which adds a pinch gesture to one image. I modified the code a bit so that everything happens in the C# code. Now I'm trying to add the pinch gesture to several image controls. Here is the XAML for the content:

<ContentPage.Content>
    <Grid VerticalOptions="CenterAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.0*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label x:Name="directoryNameDisplay" Text="Pictures from directory"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />

        <ScrollView Grid.Row="1" Orientation="Horizontal">
            <StackLayout  x:Name="sl" Orientation="Horizontal">

            </StackLayout>

        </ScrollView>
    </Grid>
</ContentPage.Content>

The key part of the code creating the pinch gesture containers and adding the images is:

        foreach (string fileName in picFiles)
        {
            string picFileWebAddress = calls.Domain + "PictureFolder/" + actualDirectoryName + "/" + fileName;
            Image imgControl = new Image();
            imgControl.Source = picFileWebAddress;

            PinchToZoomContainer cont = new PinchToZoomContainer();

            cont.Content = imgControl;
            sl.Children.Add(cont);
        }

This code is just like what I used in the sample code that I downloaded. I added an issue about this to the GitHub project with this code, but no answer yet.

If anybody here has an idea to make the pinch gesture work, or can tell me that there's no way to get it work like I want, I would appreciate your help.

Second question: In the XAML above, I want the images in the Stack Layout to fill as much vertical space as possible below the label. I've tried a lot of different things, but no luck. Any help would be appreciated.

Thank you.

Best Answer

  • awerberawerber ✭✭
    Accepted Answer

    I got this to work (pretty much, there's a problem if you zoom in a lot) by this code to add the gesture to each image:

                var pinchGesture = new PinchGestureRecognizer();
                pinchGesture.PinchUpdated += (s, e) => {
                    OnPinchUpdated(s, e);                
                };
                imgControl.GestureRecognizers.Add(pinchGesture);
    

    and copying the method OnPinchUpdated into the code file with this code. The image control is then added to the Stack Layout that's in a Scroll View.

Answers

  • awerberawerber Member ✭✭

    One of my coworkers thinks that the ScrollView is intercepting the pinch gesture and I would have to write some special code to pass the gesture event handling to the Pinch Gesture container. Does anyone here have any information on that?

  • awerberawerber Member ✭✭
    Accepted Answer

    I got this to work (pretty much, there's a problem if you zoom in a lot) by this code to add the gesture to each image:

                var pinchGesture = new PinchGestureRecognizer();
                pinchGesture.PinchUpdated += (s, e) => {
                    OnPinchUpdated(s, e);                
                };
                imgControl.GestureRecognizers.Add(pinchGesture);
    

    and copying the method OnPinchUpdated into the code file with this code. The image control is then added to the Stack Layout that's in a Scroll View.

Sign In or Register to comment.