Added documenting sample for content templating in Marquee control

Author: Avid29

components/Marquee/samples/Marquee.md

@@ -43,4 +43,10 @@ The repeat behavior determines how many times the marquee will loop before the a
 
 The default direction is left, meaning the content will move leftwards, but this can be changed to right, up, or down. Direction changed between left and right or up and down are handled continously, meaning that the animation will resume from its current position if changed between these directions.
 
+> [!Sample MarqueeTextSample]
+
+## Non-Text Content
+
+It is possible to use non-text content in the Marquee control. However templating must be used because the control will need to be duplicated for the looping animation.
+
 > [!Sample MarqueeSample]

components/Marquee/samples/MarqueeSample.xaml

@@ -10,13 +10,14 @@
 
     <StackPanel Padding="16">
         <controls:Marquee Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
-                              Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
-                              FontSize="18"
-                              RepeatBehavior="Forever"
-                              Speed="{x:Bind MQSpeed, Mode=OneWay}">
+                          Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
+                          FontSize="18"
+                          RepeatBehavior="Forever"
+                          Speed="{x:Bind MQSpeed, Mode=OneWay}"
+                          Content="This is a demonstration of using templating to added non-text content to the Marquee control.">
             <controls:Marquee.ContentTemplate>
-                <DataTemplate>
-                    <Button Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
+                <DataTemplate x:DataType="x:String">
+                    <Button Content="{x:Bind}"/>
                 </DataTemplate>
             </controls:Marquee.ContentTemplate>
         </controls:Marquee>

components/Marquee/samples/MarqueeText.Samples.csproj

@@ -1,10 +1,20 @@
-<Project>
+<Project>
   <Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
   <PropertyGroup>
     <ToolkitComponentName>Marquee</ToolkitComponentName>
   </PropertyGroup>
 
   <!-- Sets this up as a toolkit component's sample project -->
   <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+  <ItemGroup>
+    <Compile Update="MarqueeTextSample.xaml.cs">
+      <DependentUpon>MarqueeTextSample.xaml</DependentUpon>
+    </Compile>
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Update="MarqueeSample.xaml.cs">
+      <DependentUpon>MarqueeSample.xaml</DependentUpon>
+    </Compile>
+  </ItemGroup>
 
 </Project>

components/Marquee/samples/MarqueeTextSample.xaml

@@ -0,0 +1,19 @@
+<!--  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="MarqueeExperiment.Samples.MarqueeTextSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="MarqueeExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Padding="16">
+        <controls:Marquee Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
+                          Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
+                          FontSize="18"
+                          RepeatBehavior="Forever"
+                          Speed="{x:Bind MQSpeed, Mode=OneWay}"
+                          Content="{x:Bind MQText, Mode=OneWay}"/>
+    </StackPanel>
+</Page>

components/Marquee/samples/MarqueeTextSample.xaml.cs

@@ -0,0 +1,44 @@
+// 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.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace MarqueeExperiment.Samples;
+
+[ToolkitSample(id: nameof(MarqueeTextSample), "Marquee", description: "A control for scrolling content in a marquee fashion.")]
+[ToolkitSampleNumericOption("MQSpeed", initial: 96, min: 48, max: 196, step: 1, Title = "Speed")]
+[ToolkitSampleMultiChoiceOption("MQDirection", "Left", "Right", "Up", "Down", Title = "Marquee Direction")]
+[ToolkitSampleTextOption("MQText", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")]
+//[ToolkitSampleMultiChoiceOption("MarqueeRepeat", "Repeat", "Forever", "1x", "2x")]
+#if !HAS_UNO
+[ToolkitSampleMultiChoiceOption("MQBehavior", "Ticker", "Looping", "Bouncing", Title = "Marquee Behavior")]
+#else
+[ToolkitSampleMultiChoiceOption("MQBehavior", "Ticker", "Looping", Title = "Marquee Behavior")]
+#endif
+public sealed partial class MarqueeTextSample : Page
+{
+    public MarqueeTextSample()
+    {
+        this.InitializeComponent();
+    }
+
+    private MarqueeBehavior ConvertStringToMarqueeBehavior(string str) => str switch
+    {
+        "Looping" => MarqueeBehavior.Looping,
+        "Ticker" => MarqueeBehavior.Ticker,
+#if !HAS_UNO
+        "Bouncing" => MarqueeBehavior.Bouncing,
+#endif
+        _ => throw new System.NotImplementedException(),
+    };
+
+    private MarqueeDirection ConvertStringToMarqueeDirection(string str) => str switch
+    {
+        "Left" => MarqueeDirection.Left,
+        "Up" => MarqueeDirection.Up,
+        "Right" => MarqueeDirection.Right,
+        "Down" => MarqueeDirection.Down,
+        _ => throw new System.NotImplementedException(),
+    };
+}