UIElement.TranslatePoint

[drdream]

Hello Im trying to implement a pan/zoom on canvas relative to the mouse pointer. I found some example online which has a Canvas inside a ViewBox inside a Scrollviewer. from this example

I have translated the code from WPF and most translates except this line
Vector3 offset = MainCanvas.TranslatePoint(mouseAtImage, ScrollViewer_CanvasMain) - mouseAtScrollViewer;

Says Vector3 and TranslatePoint and Layout is not supported in UWP. Are there replacements for these or is there any example of pan/zoom relative to mouse in UNO?

[dr1rrb]

Hey @drdream, the TranslatePoint is a WPF API while we are matching the UWP and WinUI APIs (both UWP and WinUI are almost the same, just not in the same namespace). Even if they are close to WPF, there are still some differences like this.

An equivalent API in Uno/UWP/WinUI is UIElement.TransformToVisual().

But if your goal is to manipulate an image, I would recommend that you use directly the "manipulation" events, e.g.:

public MyPage()
{
   InitializeComponent();
   MyImage.ManipulationDelta += OnImageManipualtionDelta;
   MyImage.ManipulationMode = ManipulationModes.Scale | ManipulationModes.Translate;
}

private void OnImageManipualtionDelta(object sender, ManipulationDeltaRoutedEventArgs args)
{
    var transform = MyImage.RenderTransform as CompositeTransform;
    if (transform is null)
   {
       MyImage.RenderTransform = transform = new CompositeTransform();
   }
   transform.TranslateX += args.Delta.Translation.X;
   transform.TranslateY += args.Delta.Translation.Y;
   transform.Scale *= args.Delta.Scale;
}

Regarding the scaling, the manipulation events are already supporting multi-touch, but you will have to handle the "ctrl + scroll" for mouse support.

[drdream]

Hello thanks for your answer but I believe the API has changed,

ManipulationModes does not contain a definition for 'Translate'
CompositeTransform does not contain a definition for 'Scale'

I tried
MainCanvas.ManipulationMode = ManipulationModes.Scale | ManipulationModes.TranslateX | ManipulationModes.TranslateY;

and

transform.ScaleX *= args.Delta.Scale;
transform.ScaleY *= args.Delta.Scale;

but the event OnImageManipualtionDelta is never triggered with Ctrl-MouseWheel