InteractionTracker: move contents rather than widget?

[adrientetar]

So I use an InteractionTracker with a Win2D canvas control to make an infinite canvas (with zoom/pan).

When I transform the canvas' Visual, it moves the canvas widget around in the window. I'm looking to rather move (scale/zoom) the contents, without changing the geometry of the widget (sort of like the zoom in Edge I guess). How can I do that?

Code for reference: https://github.com/adrientetar/Fonte

RS5/17763

[adrientetar]

Btw, I strumbled upon UIElement.RegisterAsScrollPort where docs say:

This method is intended for use by custom controls that do not use the platform's native controls to display a scrollable area. For example, a custom scrolling control could be built using InteractionTracker.

That sounds like what I'm looking for, I don't fully understand what this method does though. Is there a snippet out there using RegisterAsScrollPort?

[adrientetar]

cc @crutkas if you can provide more info on how to use UIElement.RegisterAsScrollPort.

[crutkas]

@adrientetar did you leave this feedback on the doc's page? Bottom right has a popup for "was this page helpful". Looking at this, I see Danielle assigned to Lindsay which would have been some of the first people i would have asked so you're in good hands.

Good job also providing a repro

[likuba]

Hey @adrientetar

I've played around with your sample a bit and I'm not sure I understand what behavior you want to change :) Typically when I think of content that can be manipulated like this I think of there being a "content" and "viewport" where the content is the canvas getting manipulated, and the viewport is the window looking into the content that is moving around.

In your case, it seems like the canvas with the letter a is being manipulated (the content) and the host of that canvas is the viewport. What are you trying to change behavior-wise here?

Thanks!

[adrientetar]

Thanks for looking at this, @likuba.

As you said I'm using InteractionTracker to scroll the canvas.

In the initial position it looks like this (in blue, I'm drawing a selection rectangle with the mouse):

When I scroll though, the drawing is clipped to the original viewport – the selection rectangle won't draw all the way to the edge:

I would like that when I scroll, I can still draw on all visible area. So I tried to make the canvas size much larger than viewport size, but the drawing area is still limited to original viewport.

Can InteractionTracker behave like ScrollViewer, where scrolling around can display more content?

[micahl]

The Windows UI Library contains an InteractionTracker-based scrolling control. You could take a look at its code to see what its doing, or you could use it directly and save quite a bit of effort and code rather than create a custom scrolling control.
In fact, here's a fork of your repo that I modified to use the WinUI Scroller. It addresses the issue you initially raised. It also enables zooming via mousewheel as well as more natural motion by default. The caveat here is that the control is in 'preview' so its API may (very likely) change in the future.

[adrientetar]

Wow! thanks so much Micah. Guess I'll be using Scroller and looking at the code to see how it works (;

Btw, are you guys gonna post pm specs for this control? Looking at this PR, will Scroller stop being exposed in favor of ScrollerView?

[micahl]

I posted a new proposal that should start to address your question. Take a look and feel free to comment / ask more questions.

Proposal: A more flexible ScrollViewer