Add another Adorner example with a TabViewItem InfoBadge adorner

TODO: Need to handle the Tab closing (i.e. AdornedElement unloads/disappears should also detach/remove adorner from AdornerLayer)

Author: michael-hawker

components/Adorners/samples/Adorners.md

@@ -36,6 +36,10 @@ However, with an Adorner instead, you can abstract this behavior from the conten
 
 > [!SAMPLE AdornersInfoBadgeSample]
 
+You can see how Adorners react to more dynamic content, like a TabViewItem here:
+
+> [!SAMPLE AdornersTabBadgeSample]
+
 ## Highlight Example
 
 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:

components/Adorners/samples/AdornersTabBadgeSample.xaml

@@ -0,0 +1,26 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="AdornersExperiment.Samples.AdornersTabBadgeSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <muxc:TabView>
+        <muxc:TabViewItem Header="Home">
+            <ui:AdornerLayer.Xaml>
+                <muxc:InfoBadge Margin="-4,-8"
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Top"
+                                IsHitTestVisible="False"
+                                Opacity="0.9"
+                                Visibility="{x:Bind IsAdornerVisible, Mode=OneWay}"
+                                Value="3" />
+            </ui:AdornerLayer.Xaml>
+        </muxc:TabViewItem>
+        <muxc:TabViewItem Header="Document 1" />
+        <muxc:TabViewItem Header="Document 2" />
+    </muxc:TabView>
+</Page>

components/Adorners/samples/AdornersTabBadgeSample.xaml.cs

@@ -0,0 +1,16 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace AdornersExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsAdornerVisible", true, Title = "Is Adorner Visible")]
+
+[ToolkitSample(id: nameof(AdornersTabBadgeSample), "InfoBadge w/ Adorner in TabView", description: "A sample for showing how add an InfoBadge to a TabViewItem via an Adorner.")]
+public sealed partial class AdornersTabBadgeSample : Page
+{
+    public AdornersTabBadgeSample()
+    {
+        this.InitializeComponent();
+    }
+}