[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!

TODO:

• 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
• Add Resize Sample (biggest test)
• Get working with Windows App SDK again
• Issue with Tab sample and tab unloading on moving (lose the hook to re-attach, need to think a bit more about lifecycle)
• 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?

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.