NET MAUI - XAML - PinchGesture - How to implement in a ContentPage

Riffy 276 Reputation points
2023-05-19T19:39:48.2+00:00

Hi

I have a number of XAML ContentPages where I want to be able to allow the user to be able to zoom in/zoom out by being able to pinch Text/Image.

I know you can use the PinchGestureRecognizer, but I am not sure how to implement it in a ContentPage which has a ContentView. Eg:


    <RefreshView x:DataType="local:Level2ViewModel" Command="{Binding LoadItemDetailsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <ScrollView VerticalOptions="FillAndExpand"  Padding="{OnIdiom 6, Tablet=6,Phone=5}">
            <ContentView>
            <CollectionView x:Name="ItemsDetailListView" BackgroundColor="{StaticResource PageBckColour}"  
                        ItemsSource="{Binding ItemDets}"   
                        SelectionMode="Single">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout  x:DataType="model:ItemDets" Padding="5" >
                                <Label Text="{Binding DetDesc}"  Padding="{OnIdiom 7, Tablet=4,Phone=4}"
                            LineBreakMode="WordWrap"    
                            FontAttributes="Bold" 
                            FontSize="{OnIdiom 13, Tablet=14,Phone=13}"/>

                        <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer 
                                NumberOfTapsRequired="1"
                                Command="{Binding Source={RelativeSource AncestorType={x:Type local:Level2ViewModel}}, Path=ItemTapped}"		
                                CommandParameter="{Binding .}">
                                </TapGestureRecognizer>
                            </StackLayout.GestureRecognizers>

                    </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            </ContentView>

        </ScrollView>

I would welcome any suggestions as to what xaml and C# code I need to implement to achieve the above in my MVVM solution.

Some pages will have images that the user could zoom in/zoom out.

Thanks

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,206 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,622 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
789 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 71,926 Reputation points Microsoft Vendor
    2023-05-22T03:04:41.51+00:00

    Hello,

    Firstly, ContentPage cannot add PinchGestureRecognizer.

    I want to be able to allow the user to be able to zoom in/zoom out by being able to pinch Text/Image.

    Add the PinchGestureRecognizer to the Label and Image controls directly. You can control the controls' zoom in/zoom out at the layout's background code.

    Best Regards,

    Leon Lu


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.