Fixed virtualization issues and handled segment size changing in Marquee

Author: Avid29

components/Marquee/samples/MarqueeSample.xaml

@@ -4,7 +4,7 @@
       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:local="using:MarqueeExperiment.Samples"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
@@ -14,12 +14,25 @@
                           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.">
+                          Content="{x:Bind Data}">
             <controls:Marquee.ContentTemplate>
-                <DataTemplate x:DataType="x:String">
-                    <Button Content="{x:Bind}"/>
+                <DataTemplate x:DataType="local:MarqueeSampleItems">
+                    <ItemsRepeater ItemsSource="{x:Bind Items}">
+                        <ItemsRepeater.Layout>
+                            <StackLayout Orientation="Horizontal" Spacing="8"/>
+                        </ItemsRepeater.Layout>
+                        <ItemsRepeater.ItemTemplate>
+                            <DataTemplate x:DataType="local:MarqueeSampleItem">
+                                <Border Width="100" Height="48" Background="{x:Bind Brush}">
+                                    <TextBlock Text="{x:Bind Name}" />
+                                </Border>
+                            </DataTemplate>
+                        </ItemsRepeater.ItemTemplate>
+                    </ItemsRepeater>
                 </DataTemplate>
             </controls:Marquee.ContentTemplate>
         </controls:Marquee>
+        
+        <Button Content="Add something" Click="AddItem_Click"/>
     </StackPanel>
 </Page>

components/Marquee/samples/MarqueeSample.xaml.cs

@@ -3,12 +3,14 @@
 // See the LICENSE file in the project root for more information.
 
 using CommunityToolkit.WinUI.Controls;
+using Windows.UI;
 
 namespace MarqueeExperiment.Samples;
 
 [ToolkitSample(id: nameof(MarqueeSample), "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")]
@@ -20,6 +22,11 @@ public sealed partial class MarqueeSample : Page
     public MarqueeSample()
     {
         this.InitializeComponent();
+        
+        for (int i = 0; i < 15; i++)
+        {
+            AddItem_Click(this, null);
+        }
     }
 
     private MarqueeBehavior ConvertStringToMarqueeBehavior(string str) => str switch
@@ -29,15 +36,38 @@ public MarqueeSample()
 #if !HAS_UNO
         "Bouncing" => MarqueeBehavior.Bouncing,
 #endif
-        _ => throw new System.NotImplementedException(),
+        _ => throw new NotImplementedException(),
     };
 
+    public MarqueeSampleItems Data = new();
+
     private MarqueeDirection ConvertStringToMarqueeDirection(string str) => str switch
     {
         "Left" => MarqueeDirection.Left,
         "Up" => MarqueeDirection.Up,
         "Right" => MarqueeDirection.Right,
         "Down" => MarqueeDirection.Down,
-        _ => throw new System.NotImplementedException(),
+        _ => throw new NotImplementedException(),
     };
+
+    private void AddItem_Click(object sender, RoutedEventArgs? e)
+    {
+        Data.Items.Add(new MarqueeSampleItem()
+        {
+            Name = $"Item {Data.Items.Count + 1}",
+            Brush = new SolidColorBrush(Color.FromArgb(255, (byte)Random.Shared.Next(256), (byte)Random.Shared.Next(256), (byte)Random.Shared.Next(256))),
+        });
+    }
+}
+
+public class MarqueeSampleItems
+{
+    public ObservableCollection<MarqueeSampleItem> Items { get; } = new();
+}
+
+public record MarqueeSampleItem
+{
+    public required string Name { get; set; }
+    
+    public required Brush Brush { get; set; }
 }

components/Marquee/src/Marquee.Events.cs

@@ -76,6 +76,18 @@ private void Container_SizeChanged(object sender, SizeChangedEventArgs e)
         StartMarquee();
     }
 
+    private void Segment_SizeChanged(object sender, SizeChangedEventArgs e)
+    {
+        if (_segment1 is null)
+        {
+            return;
+        }
+
+        // If the segment size changes, we need to update the storyboard,
+        // and seek to the correct position to maintain a smooth animation.
+        UpdateAnimation(true);
+    }
+
     private void StoryBoard_Completed(object? sender, object e)
     {
         StopMarquee(true);

components/Marquee/src/Marquee.cs

@@ -67,6 +67,7 @@ protected override void OnApplyTemplate()
         _marqueeTransform = (TranslateTransform)GetTemplateChild(MarqueeTransformPartName);
 
         _marqueeContainer.SizeChanged += Container_SizeChanged;
+        _segment1.SizeChanged += Segment_SizeChanged;
 
         // Swapping tabs in TabView caused errors where the control would unload and never reattach events.
         // Hotfix: Track the loaded event. This should be fine because the GC will handle detaching the Loaded
@@ -174,6 +175,7 @@ _segment1 is null ||
         double containerSize;
         double segmentSize;
         double value;
+        DependencyProperty dp;
         string targetProperty;
 
         if (IsDirectionHorizontal)
@@ -183,6 +185,7 @@ _segment1 is null ||
             containerSize = _marqueeContainer.ActualWidth;
             segmentSize = _segment1.ActualWidth;
             value = _marqueeTransform.X;
+            dp = TranslateTransform.XProperty;
             targetProperty = "(TranslateTransform.X)";
         }
         else
@@ -192,6 +195,7 @@ _segment1 is null ||
             containerSize = _marqueeContainer.ActualHeight;
             segmentSize = _segment1.ActualHeight;
             value = _marqueeTransform.Y;
+            dp = TranslateTransform.YProperty;
             targetProperty = "(TranslateTransform.Y)";
         }
 
@@ -261,6 +265,15 @@ _segment1 is null ||
             double progress = Math.Abs(start - value) / distance;
             _marqueeStoryboard.Seek(TimeSpan.FromTicks((long)(duration.Ticks * progress)));
         }
+        
+        // NOTE: Can this be optimized to remove or reduce the need for this callback?
+        // Invalidate the segment measures when the transform changes.
+        // This forces virtualized panels to re-measure the segments
+        _marqueeTransform.RegisterPropertyChangedCallback(dp, (sender, dp) =>
+        {
+            _segment1.InvalidateMeasure();
+            _segment2.InvalidateMeasure();
+        });
 
         return true;
     }