Add Data Binding to Adorner TabViewItem sample

Author: michael-hawker

components/Adorners/samples/Adorners.md

@@ -36,10 +36,12 @@ 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:
+You can see how Adorners react to more dynamic content with this more complete example here:
 
 > [!SAMPLE AdornersTabBadgeSample]
 
+The above example shows how to leverage XAML animations and data binding alongside the XAML-based Adorner with a `TabViewItem` which can also move or disappear.
+
 ## 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

@@ -18,7 +18,7 @@
                                 IsHitTestVisible="False"
                                 Opacity="0.9"
                                 Visibility="{x:Bind IsAdornerVisible, Mode=OneWay}"
-                                Value="3">
+                                Value="{x:Bind (x:Int32)BadgeValue, Mode=OneWay}">
                     <animations:Implicit.ShowAnimations>
                         <animations:RotationInDegreesAnimation From="45"
                                                                To="0"

components/Adorners/samples/AdornersTabBadgeSample.xaml.cs

@@ -5,6 +5,7 @@
 namespace AdornersExperiment.Samples;
 
 [ToolkitSampleBoolOption("IsAdornerVisible", true, Title = "Is Adorner Visible")]
+[ToolkitSampleNumericOption("BadgeValue", 3, 1, 5, 1, true, Title = "Badge Value")]
 
 [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