Add sample for FrameworkElementExtensions.Ancestor/Type

Author: michael-hawker

components/Extensions/samples/FrameworkElementAncestorSample.xaml

@@ -0,0 +1,22 @@
+<Page x:Class="ExtensionsExperiment.Samples.FrameworkElementAncestorSample"
+      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:local="using:ExtensionsExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+      mc:Ignorable="d">
+
+    <StackPanel Padding="16"
+                Spacing="{x:Bind ValueSlider.Value, Mode=OneWay}">
+        <Slider x:Name="ValueSlider"
+                Maximum="16"
+                Minimum="4"
+                StepFrequency="4"
+                Value="8" />
+        <TextBlock Text="This is some text in a StackPanel with Spacing:" />
+        <TextBlock ui:FrameworkElementExtensions.AncestorType="StackPanel"
+                   Text="{Binding (ui:FrameworkElementExtensions.Ancestor).Spacing, RelativeSource={RelativeSource Self}}" />
+    </StackPanel>
+</Page>

components/Extensions/samples/FrameworkElementAncestorSample.xaml.cs

@@ -0,0 +1,17 @@
+// 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 ExtensionsExperiment.Samples;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+[ToolkitSample(id: nameof(FrameworkElementAncestorSample), nameof(FrameworkElementAncestorSample), description: $"A sample for showing how to use the FrameworkElementExtensions.Ancestor attached property.")]
+public sealed partial class FrameworkElementAncestorSample : Page
+{
+    public FrameworkElementAncestorSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Extensions/samples/FrameworkElementExtensions.md

@@ -102,11 +102,9 @@ The `AncestorType` attached property will walk the visual tree from the attached
 
 Here is an example of how this can be used:
 
-```xaml
-<Button
-    ui:FrameworkElementExtensions.AncestorType="Grid"
-    Visibility="{Binding (ui:FrameworkElementExtensions.Ancestor).Visibility,RelativeSource={RelativeSource Self}}"/>
-```
+> [!SAMPLE FrameworkElementAncestorSample]
+
+While this example is trivial, it shows you how to properly setup and bind to the parent element's property, in this case `Spacing`.
 
 ## Cursor