How to implement zoom in, Zoom out and scrolling functionality for GraphicsView element?

S GAIKWAD 231 Reputation points
2023-01-25T04:31:29.35+00:00

Currently I'm trying on Dot Net 7 only for android and iOS platforms. I am trying to zoom in on GraphicsView. Zoom in zoom out functionality is working fine but getting issue for scroll vertical and horizontal. scroll is not working. I want to scroll vertical and horizontal GraphicsView after zoom in.

Here is Code sample


<ScrollView>
   <GraphicsView x:Name="graphicsView">  
          <GraphicsView.GestureRecognizers>
              <PanGestureRecognizer PanUpdated="OnPanUpdated" />
              <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
          </GraphicsView.GestureRecognizers>
  </GraphicsView>
</ScrollView>


private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
    switch (e.Status)
    {
        case GestureStatus.Started:
            // Store the current scale factor applied to the wrapped user interface element,
            // and zero the components for the center point of the translate transform.
            startScale = graphicsView.Scale;
            graphicsView.AnchorX = e.ScaleOrigin.X;
            graphicsView.AnchorY = e.ScaleOrigin.Y;
            break;
      case GestureStatus.Running:
           // Calculate the scale factor to be applied.
          currentScale += (e.Scale - 1) * startScale;
          currentScale = Math.Max(1, currentScale);
          graphicsView.Scale = currentScale;
          break;
     case GestureStatus.Completed:
          // Store the final scale factor applied to the wrapped user interface element.
          startScale = currentScale;
          break;
    } 
}

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
   graphicsView.TranslationX += e.TotalX;
   graphicsView.TranslationY += e.TotalY; 
}

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,861 questions
{count} votes