🧪 [Experiment] CanvasView - Template and Manipulation enabled Canvas

[michael-hawker]

Approved from Toolkit

See previous work here:

• A CanvasView Control WindowsCommunityToolkit#3716
• A CanvasView Control WindowsCommunityToolkit#854
• Also Related to Experiment 🧪 [Experiment] CanvasLayout - A virtualized canvas for ItemsRepeater #213

Problem Statement (copied from Discussion):

I find myself writing this control over and over in various projects and it's never very 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.

Overview

This experiment adds the following components:

• CanvasView a light-weight ItemsControl backed by a Canvas that allows templating and manipulation of its items (if desired).

Using

You can try it out via the NuGet Packages here:

• UWP: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.Uwp.CanvasView
• WinUI 3: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.CanvasView

Read more about Preview Packages here.

CommunityToolkit members can also try it out with Codespaces.

TO DO

• Investigate WASM support? (see Update version of Uno being used. #174 first)
• Drift (Delta -> switch to Cumulative) (note blocked by WinUI3 - ManipulationStarting Event only occurs on first touch -> e.Container Property is null in following manipulation events microsoft/microsoft-ui-xaml#6847)
• Needs to be able to handle some scenarios, like sizing Canvas Width/Height to the contents position/size so it can better support being hosted in a ScrollViewer for a Canvas area that can work larger than a screen. This means keeping track of items which wasn't part of how this initially worked... 🤔

Implementation Requirements

Not all these items are required to submit a PR. This list is here to help track what is remaining to implement before a technical review and discussion of moving into the main repository can occur.

• Working Prototype
• Feature Complete
• Documentation
• Samples
• Tests
• Community Feedback / Usage Testimonies

Tested Platforms

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Technical Review

These items can sometimes be done ahead of time, but are usually started and completed after all implementation details are finished.

• Accessibility Audit
• API/Naming Review
• Code Quality/Style
• Dependency Review
• Design/Style Review
• Final Approval

[michael-hawker]

Have a local stash switching the Manipulation code to Cumulative over Delta, indeed resolves the drift issue I was seeing just like we did with the SizerBase. However, in testing, I noticed a big issue with ManipulationStarting not working in WinUI 3 - see microsoft/microsoft-ui-xaml#6847. This is effecting SizerBase too most likely (not sure how we didn't notice earlier).

[michael-hawker]

Realized that to work for more than the current screen (i.e. you want large canvas area in a ScrollViewer) we need to resize the Canvas Width/Height to wrap around contents of Canvas. This will involve more tracking than currently done by the control.

Added as a TODO.

[kmgallahan]

In the sample app the shapes don't follow drag input correctly. The shape and cursor start drifting apart immediately after starting movement, and the gap gets larger as more dragging is done.

Unsure if a DPI scaling issue. I was using 125%, but switching to 100% and relaunching the app didn't help.

[michael-hawker]

Thanks @kmgallahan, was that using UWP or the WindowsAppSDK (or both)? Definitely need to look back into this, was going to investigate trying to do absolute vs. relative positioning like I did for the splitter controls, but that requires storing state, which I don't think I had an easy way to do in the current setup.

[Basnederveen]

I've removed the height/width properties and the drift is gone.

Could it be related to the fact that the clicked position is relative to origin of the dragged control but we are setting the position of the origin of the dragged control?

[Basnederveen]

How would you approach switching the ItemsControl for a Selector?