You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/Adorners/samples/Adorners.md
+21-5Lines changed: 21 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,9 +18,7 @@ Adorners allow a developer to overlay any content on top of another UI element i
18
18
19
19
## Background
20
20
21
-
Adorners originally existed in WPF as a main integration part as part of the framework. [You can read more about how they worked in WPF here.](https://learn.microsoft.com/dotnet/desktop/wpf/controls/adorners-overview)
22
-
23
-
UWP/WinUI unfortunately never ported this integration point into the new framework, this experiment hopes to fill that gap with a similar and modernized version of the API surface.
21
+
Adorners originally existed in WPF as a main integration part as part of the framework. [You can read more about how they worked in WPF here.](https://learn.microsoft.com/dotnet/desktop/wpf/controls/adorners-overview) See more about the commonalities and differences to WinUI adorners in the migration section below.
24
22
25
23
### Without Adorners
26
24
@@ -30,7 +28,7 @@ You could try and incorporate a [`InfoBadge`](https://learn.microsoft.com/window
30
28
31
29
> [!SAMPLE InfoBadgeWithoutAdorner]
32
30
33
-
It also by default gets confined to the perimeter of the button and clipped, as seen above.
31
+
It also, by default, gets confined to the perimeter of the button and clipped, as seen above.
34
32
35
33
### With Adorners
36
34
@@ -40,6 +38,24 @@ However, with an Adorner instead, you can abstract this behavior from the conten
40
38
41
39
## Highlight Example
42
40
43
-
Adorners can be used in a variety of scenarios. For instance, if you wanted to highlight an element and show it's alignment to other elements in a creativity app.
41
+
Adorners can be used in a variety of scenarios. For instance, if you wanted to highlight an element and show it's alignment to other elements in a creativity app:
44
42
45
43
> [!SAMPLE ElementHighlightAdornerSample]
44
+
45
+
## TODO: Resize Example
46
+
47
+
Another common use case for adorners is to allow a user to resize a visual element.
48
+
49
+
// TODO: Make a simple example here for this soon...
50
+
51
+
## Migrating from WPF
52
+
53
+
The WinUI Adorner API surface adapts many similar names and concepts as WPF Adorners; however, WinUI Adorners are XAML based and make use of the attached properties to make using Adorners much simpler, like Behaviors. Where as defining Adorners in WPF required custom drawing routines. It's possible to replicate many similar scenarios with this new API surface and make better use of XAML features like data binding; however, it will mean rewriting any existing WPF code.
54
+
55
+
### Concepts
56
+
57
+
The `AdornerLayer` is still an element of the visual tree which resides atop other content within your app and is the parent of all adorners. In WPF, this is usually already automatically a component of your app or `ScrollViewer`. Like WPF, adorners parent's in the visual tree will be the `AdornerLayer` and not the adorned element.
58
+
59
+
The `AdornerDecorator` provides a similar purpose to that of its WPF counterpart, it will host an `AdornerLayer`. The main difference with the WinUI API is that the `AdornerDecorator` will wrap your contained content vs. in WPF it sat as a sibling to your content. We feel this makes it easier to use and ensure your adorned elements reside atop your adorned content, it also makes it easier to find within the Visual Tree for performance reasons.
0 commit comments