[XAML] Modern Adorners

[michael-hawker]

See discussion for more details: #278

This is my modern Adorners implementation that I started a few years ago, originally here: https://github.com/michael-hawker/Labs-Windows/tree/llama/adorners/labs/Adorners

Since that was in a prior iteration of Labs, I've brought it over atop a new component template base, as well as merging in updates from XAML Studio where I've been using this a bit more already in practical scenarios.

Currently only works for UWP, debugging issue with Windows App SDK... (It used to work here I'm pretty sure, so not sure what's going on, more discussion on Discord: https://discord.com/channels/372137812037730304/672911467401445377/1440605732276801537) - Fixed, thanks @ahmed605!

Done:

• Handle Windows resizing positioning (most recent update to unblock this!)
• Add some WPF migration notes
  • Add more once Adorner helper is in
• Add Adorner base class/helper
• Added Custom Adorner Sample
• Added Input Validation Sample
• Get working with Windows App SDK again
• Move InputValidationAdorner to the base package, add some resources for customization and broaden the results it can parse (i.e. just ToString on object if not ValidationResult, maybe callback event for parsing collection?)
  • Q: Should use DataContext on base control or just have a property to pass in the VM object on the Adorner itself? (Moved to Adorner itself, makes more strongly typed, much nicer)

TODO:

• Add ResizeElementAdorner (biggest test)
  • Provide draggable image in the sample or something ala PowerPoint
• Issue with Tab sample and tab unloading on moving (lose the hook to re-attach, need to think a bit more about lifecycle)
• Fix issue with InputValidationAdorner and revalidation and adorner not clearing

Open Questions (may not be handled in initial PR):

• Handle AdornedElement unloading
  • Maybe visibility to? (little worried about overwriting dev set value if managed independently, could check if unset...)
• Do we provide a helper (maybe using the existing toolkit extension) for IsClipEnabled?
• Do we provide a hook to the positioning with similar GetDesiredTransform? (Should we use transform over Canvas coordinates?)

Demo video showing animations with an InfoBadge on a TabViewItem:

XAMLAdornerAnimations.mp4

"Squarer" video with data binding:

XAMLAdornerAnimations2.mp4

[michael-hawker]

TabView sample is cool, it works great as there's a ScrollViewer within the tabstrip, it's magic. Though removing the tab dynamically leaves the adorner, so definitely adding handling in the new Adorner container/wrapper for Visibility/Unloaded events will be good. (Much easier to do now at least with latest change introducing the Adorner class.)

I want to add a custom adorner sample, seeing how hard it'd be to do a resizer sort of helper (akin to the ImageCropper control [should look how it did it to compare]).

There's a lot of custom Adorner stuff I was looking at in XAML Studio, so I want to pull this in there to test and muck about with how I think this works now and see if it is easy to use... 😅

[michael-hawker]

I realized that this approach could maybe work for the AttachedDropShadow too, so you wouldn't need the target shadow element. I could just inject one in the tree where needed similarly like adorners do, just behind everything else instead of in front. If it did work, theoretically the wrapper I have could just hold both to work for both scenarios together like a sandwich.

I've been messing with trying to write a custom adorner sample (Fons also suggested on BlueSky as validation sample: https://bsky.app/profile/fonssonnemans.bsky.social/post/3m6cxed753c2n - that'll be my next one to look at I think), but getting tripped up on them being templated controls, which is a bit tricky. I may also be hitting some C#/WinRT stuff I don't understand...

I should try a class-based resource dictionary to see if I can enable x:Bind for ease-of-use... it's unconventional, but may be a great use-case for this scenario. Would make the sample more complex as I don't think I could inline it all (which was getting messy anyways). So, maybe the sample app needs an upgrade to have a ToolkitSampleIncludeExtraFile(...) attribute which can add another tab of code (C# and/or XAML) to the sample display...

[michael-hawker]

Bug: When I added Unloading support it broke re-appearing on the tab if you move it (need loaded or something?)

[michael-hawker]

Now supporting Input Validation... 😅 Super simple to do with the Adorner system now. Added an Adorner which just knows how to interact with INotifyDataErrorInfo and ValidationResult, should generalize it a tiny bit and just add it to the base package vs. just the sample... 😋

        <muxc:NumberBox DataContext="{x:Bind ViewModel}"
                        Header="Enter your age:"
                        PlaceholderText="Age"
                        SpinButtonPlacementMode="Inline"
                        Value="{x:Bind ViewModel.Age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
            <ui:AdornerLayer.Xaml>
                <local:InputValidationAdorner PropertyName="Age" />
            </ui:AdornerLayer.Xaml>
        </muxc:NumberBox>

Adorner implementation basically:

Thanks to @sonnemaf for the inspiration to put these two scenarios together! 🦙❤️ https://bsky.app/profile/fonssonnemans.bsky.social/post/3m6cxed753c2n

[michael-hawker]

UWP build is failing due to these properties in the samples:

5>I:\code\Labs-Windows\components\Adorners\samples\InPlaceTextEditor\InPlaceTextEditorAdorner.xaml(25,40): XamlCompiler error WMC0011: Unknown member 'DesiredPlacement' on element 'Popup'
5>I:\code\Labs-Windows\components\Adorners\samples\InPlaceTextEditor\InPlaceTextEditorAdorner.xaml(26,40): XamlCompiler error WMC0011: Unknown member 'PlacementTarget' on element 'Popup'

But I properly guard them in my XAML:

<ResourceDictionary x:Class="AdornersExperiment.Samples.InPlaceTextEditor.InPlaceTextEditorAdornerResources"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Windows11="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 14)"
                    ...
                                <Popup x:Name="PopupRoot"
                                       Windows11:DesiredPlacement="BottomEdgeAlignedLeft"
                                       Windows11:PlacementTarget="{x:Bind AdornedElement, Mode=OneWay}"

What am I missing?

@Arlodotexe would this have to do if we're not building with the newer Windows 11 based SDK or something? Thoughts on what I might be missing?

[ahmed605]

you need to build with 22000 SDK or higher to be able to use these

[michael-hawker]

Thanks for the confirmation @ahmed605, that's what I figured! I'm just a bit confused on why we're not doing that already in our CI/build setup. I'll sync with Arlo on that on Monday.

[Arlodotexe]

Thanks for the confirmation @ahmed605, that's what I figured! I'm just a bit confused on why we're not doing that already in our CI/build setup. I'll sync with Arlo on that on Monday.

TargetPlatformVersion is at 26100 for .NET 9 UWP (minimum required by platform) and 19041 for UAP UWP, which is our own choice.

This is largely unchanged since 7x, since we haven't had a reason to bump it until now. It should be safe to change with a PR to tooling, our TargetPlatformMinVersion is still set to 17763.

[michael-hawker]

Updating with the tooling fix resolves compiling locally. However, I'm getting a weird issue where it says it can't set the PlacementTarget property of the Popup even though I have the contract check and am running on Windows 11, very odd. Platform issue? Not sure if that's breaking the control example in OnApplyTemplate... it's a sample, so not as worried about it, but it is odd.

[michael-hawker]

InputValidationAdorner is pretty much ready to go, though I need to fix the general reloading issue with Adorners I introduced trying to over-optimize... (reverting that should be simple, but do need to later do some more investigations into references and clean-up and such, that can be post-PR though or for anyone with more time to pick up and investigate.)

I'm hoping CI will build seems like intermittent issues with workloads for other platforms... then there'll be a nuget package where it can be tested out. FYI @Arlodotexe

I think next step is a custom ResizeElementAdorner as another built-in... would be good to compare/contrast against how ImageCropper worked in 7.x, but basically setup a simple one-image mock Canvas like editor you'd see in a creative tool.

[michael-hawker]

Added the ResizeElementAdorner (along with ResizeThumb which is an uber ContentSizer basically). Realized after that the underlying layout/size events probably weren't firing as Canvas is weird. Should test in other circumstances. As well as make an example which shows moving the element without resizing it in combination (do we have a Behavior for that)?

XAMLAdornerResizeElement.mp4

The Adorner itself is pretty simple here just acting as a container, bridge, and overlay. The rest is handled basically by the thumb.