Question

[santiagotactivos]

Hi!

I'm Santiago Montero a developer from MURAL. We are trying to get our hands on the Composite API to improve performance in our product. We have tried it out already and we have a few questions.

To give some context of our needs, I wanted to show you what we are working on. "MURAL for Windows" is a UWP written in C# and XAML. It's a multi-platform app that allow teams to collaborate adding different types of content (sticky notes, inking, images, SVGs, links, etc) in a zoomable and pannable canvas. Here is an example:

We currently use a ScrollViewer with multiple UIElements (grids/stackpanels/texblocks, inkcanvas, even webviews) as children of a Grid, which is the content of it. Our main concern right now with it is that the ScrollViewer, it is not as responsive as we need it to be and we want to handle touch events differently.

The problems we have with ScrollViewer are these:

• The pinch is not immediate, it takes a little to kick in. This is for us the most used and central gesture, and it unresponsiveness makes the app look laggy.
• When you try to pinch the ScrollViewer and one finger is on a child it doesn't pinch, just moves the child and tap-drag the scrollview. We want to make it like if we got two fingers in the control (even if one finger is in a child) to pinch always. But if we pinch inside a scrollview child (two fingers touching the child) the pinch should be trigger in that element.
• Also it would be cool to detect two touches tap, we could use that gesture for shortcuts.

So, I've been through a bunch of composite samples, and we wanted you to give us a hint on this:

• What kind of control should we use to replace the ScrollViewer? In the slideshow sample I've notice that you use a Grid. Should we use that?
• We can mix XAML defined visual with this container? I've notice that in the sample after you create the grid you use all composite elements
• I don't know if this is a composite question, but... is there a way to get more control of the touches and input in UWP?
• It is there any way to detect pinch as an unique gesture? Something like how gestures are implemented on iOS.
• What version of Windows and which SDKs do we need to run your latest implementations? We don't mind if it's not ready for the Store, but we need to start implementing this so we can upload it as soon as it is public.

Thank you, Santiago

[pgills]

@santiagotactivos There's a lot to unpack for this question so we'll try to answer some in parts if possible.

For the last known good configuration you can see our wiki. Currently, the most stable Insider Build + SDK is 14295.

For manipulations and gestures you can start with this article on Touch Interactions. It does cover some of the manipulation events that you can leverage with UIElements. Note that these API's are focused around UIElements. Also keep in mind that your customers will also have other inputs like mouse and keyboard so ensure that your interactions are inclusive.

Also I would try to use a combination of those APIs with the ScrollViewer to try to achieve your desired experience. We have lower level API's that connect input and Composition Objects together, however, they are more lower level in the aspects that you'll essentially start to implement your own custom ScrollViewer. However, if you start going down that route, you'll definitely need to start thinking more about input as you'll loose that inclusive input handling if you move away from ScrollViewer. @likuba for FYI on input.

Currently the pattern for hosting Composition content within XAML:

• UIElements have a backing handoff visual you can access with ElementCompositionPreview.GetVisualElement(UIElement element)
• Create a visual tree of Composition objects (ContainerVisuals, SpriteVisuals, etc.)
• Set the content of the handoff visual of your visual tree with `ElementCompositionPreview.SetElementChildVisual(UIElement element, Visual visual)

That content visual content will render over top of the XAML content. Currently there's no true "mixing" where you could directly host XAML content within a Composition Visual.

Hopefully, that article will be a good starting point.

[likuba]

@santiagotactivos

If you want to investigate more customized scrolling feel free to start by watching this build talk: https://channel9.msdn.com/Events/Build/2016/P405

As Paul mentioned, you will lose the ease of use that ScrollViewer provides as this API is lower level, but it will allow you more control/customization over your manipulations.

[santiagotactivos]

Thank you both Paul and Lindsay! That's awesome!

[pgills]

Cleaning up issues.