A CanvasView Control

[enghch]

I find myself writing this control over and over in various projects and it's never vey good. I'd love a control that would be a sibling to ListView or GridView only it was backed by a 2D Canvas instead of an ItemsStackPanel. The control should allow the placement of rectangular items in 2D, allow the user to select items, drag them around and resize them. (An optional bonus would be to allow the user to rotate the items.) The control should allow panning and zooming. The look and content of the items should, of course, be customizable.

Uservoice link: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/17902486-a-canvasview-control

[hermitdave]

I think @jamesmcroft created one and mentioned it in #490 maybe he can comment

[hermitdave]

Either way we are going to open uservoice in coming days and we can let community help us prioritise ideas and requests

[enghch]

Thanks! Yeah, #490 does look a lot like what I was imagining. I will go comment on that issue as well. I would love to submit this as a UserVoice request. Just so I don't forget, here are my various use cases:

1. I want to enable my users to tag faces and other things in an image. I want to let them stretch out a rectangular selection (or multiple selections) overlaying the image.

2. I want to create an hourly schedule control to imitate Outlook or the Calendar app. This would require selectable rectangular regions but they would not be in a stack (because multiple appointments can overlap).

3. I would like to let users create a Digital Scrapbook by dragging, rotating and stretching images just like in Add draggable content control #490.

4. I would like to create a visualization of an AudioGraph where each node is a selectable rectangle. The nodes can be dragged around to rearrange them.

5. I would like to create a family pedigree chart where each person in the family is represented by a "card" control. Each person can be selected to show more information.

[Odonno]

@enghch I suppose that all your use cases can be achieved using the Canvas control. So I think that your question is not about a new control but on all the possible ways to achieve more use cases easily using the Canvas control. Each child of the Canvas could have these attached properties :

• Drag & Drop properties
• Rotation properties
• Stretching properties
• Touch properties ? (like selection)
• Ink properties ? (like selection or writing)

I know that's a totally different solution. I would be really happy if we can simplify the Drag & Drop.

[ScottIsAFool]

Simplifying drag and drop, you mean like this https://metronuggets.com/2016/08/29/introducing-dropfilesbehaviour/?

[Odonno]

@ScottIsAFool Yeah! That is one possible example.

[enghch]

Yeah, that's a good solution too, @ScottIsAFool and @Odonno. When you say "rotation properties" or "stretching properties" are you referring to using behaviors? If all the items in your list were easy-to-add behaviors that played together well then I think that's a great solution.

[deltakosh]

Hey @enghch !
In order to evaluate if a feature can be added to the toolkit we created a new category on WPDEV Uservoice: https://wpdev.uservoice.com/forums/110705-universal-windows-platform?query=A%20CanvasView%20Control

Can you please create an entry for your idea? based on upvote we will be able to know if this is something we can add to the toolkit!
Thank you very much

[enghch]

OK, thanks! I've got it recorded here: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/17902486-a-canvasview-control

We can close this issue now if you'd like.

[deltakosh]

I'll keep it open. Please start socializing it :)

[enghch]

Thanks! Tweets are on the way! :)

[gbarcho]

Whats the status? Can we archive/close it?

[michael-hawker]

Not sure about all the interactive elements, but agree just a general helper to utilize Canvas for layout of items would be useful. Going to add to 6.0 for now to think about more later. I've done some initial testing with doing this with ItemsControl and using a Style setter binding helper.

[michael-hawker]

Moving out of 6.1, think this needs a bit more clearer definition if it's just an ItemsControl using Canvas to help layout items or something more detailed...

[Kyaa-dost]

Will be moving this to the discussion as that will our new platform for all the older discussions that still requires clarity and further input.

[michael-hawker]

I've been messing around with a super-simple, but also super-basic implementation of this. It effectively just let's you provide an ItemsSource of items and a template to use for each one. Then you can provide a few properties like the Canvas attached ones to pass-thru as well as the ManipulationMode.

Therefore, it lets you do basic bounded positioning and optionally dragging the items around within the backing Canvas control.

I'm messing around with how I can get it to work within a ScrollViewer (optionally), but think zooming would be a stretch. I think there may be some basic merit in it since it's a pretty simple implementation.

However, I think long-term for larger scenarios with many items, something virtualized on ItemsRepeater would be better. I know @liquidboy has something they were working on in that department: https://twitter.com/josefajardo/status/1314669837201801216

Is that something you'd think of contributing to the Toolkit in the future @liquidboy?

[liquidboy]

it really was just a weekend hack .. worked great for demoing thou ..

I'll see if i can clean it up and share to the public to see if there's anything salvagable , at the very least maybe can start a discussion on how best to do massive ui virtualization on the canvas ..

(the demo highlighted so many problems that needed solving) :)

[michael-hawker]

Thanks @liquidboy for letting us know. For sure, if anything it's a starting point, especially if you have a list of known challenges you faced.

My solution I've been working on seems to be working well for building on top of Canvas but is going to fall over pretty quick for scenarios with large number of items or for folks who want larger pan-able/zoomable surfaces. It's going to be mainly focused I think for the scenario where you have a few dozen items that you want to be moving around on the single viewport or for binding specific positions to a templated set of items...

In the end I think they'll both have merits of solutions, and it'll be interesting to see how they can both evolve. 🙂

[michael-hawker]

Planning to add my CanvasView to Toolkit Labs that's based on Canvas when we get that started after our upcoming release.

I wanted to play with ItemsRepeater too more to see if we could have a CanvasLayout type experience.

@liquidboy was your implementation completely custom or built on ItemsRepeater or something else?

[jamesmcroft]

Not wanting to rock the boat on this as it looks like it is already in full swing. Back in 2017 when the issue I opened had been closed, I decided to publish that control as part of what was my WinUX library back then.

Code is still up if it is of any use.

https://github.com/jamesmcroft/WinUX-App-Toolkit/tree/develop/WinUX.UWP.Xaml.Controls/DraggableContentControl

[jamesmcroft]

It was a very crude touch-based implementation mind you.

[michael-hawker]

Thanks that's super useful to know! 🦙❤ The control I've been working on does a little bit of that too (though leaves turning on manipulation to the developer still); so would love to chat with you when I have a PR up and get more insight. I am a bit curious about the extra pointer logic you have and what that helps with?

Also noticed you archived your repo and there was this issue open, anything else in your library you think is missing from the Toolkit you want to port over?

[jamesmcroft]

The second pointer logic was to ensure the users intent was to move or resize the control. Allowed them to not accidentally move the control if they were trying to interact with an element inside of it.

I can have a look through, I think when we started the community toolkit, a fair few features of the WinUX toolkit were brought across (HeaderedTextBlock and Expander for example). I can have a dig through the codebase though and see if anything shouts out as being useful today. A lot has changed in the Windows dev space since 2017 😄