Marquee Text Control

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -279,9 +279,10 @@
     <Content Include="SamplePages\Graph\LoginButton.png" />
     <Content Include="SamplePages\Graph\PeoplePicker.png" />
     <Content Include="SamplePages\Graph\PersonView.png" />
+    <Content Include="SamplePages\RichSuggestBox\RichSuggestBox.png" />
     <Content Include="SamplePages\Primitives\ConstrainedBox.png" />
     <Content Include="SamplePages\Primitives\SwitchPresenter.png" />
-    <Content Include="SamplePages\RichSuggestBox\RichSuggestBox.png" />
+    <Content Include="SamplePages\MarqueeText\MarqueeText.png" />
     <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.png" />
     <Content Include="SamplePages\Animations\Effects\FadeBehavior.png" />
     <Content Include="SamplePages\ColorPicker\ColorPicker.png" />
@@ -647,6 +648,7 @@
     <Content Include="SamplePages\Animations\Shadows\AnimatedCardShadowXaml.bind" />
     <Content Include="SamplePages\KeyDownTriggerBehavior\KeyDownTriggerBehaviorXaml.bind" />
     <Content Include="SamplePages\RichSuggestBox\RichSuggestBoxCode.bind" />
+    <Content Include="SamplePages\MarqueeText\MarqueeTextXaml.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarqueeText/MarqueeTextXaml.bind

@@ -0,0 +1,17 @@
+<Page
+    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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    mc:Ignorable="d">
+
+  <Grid>
+    <controls:MarqueeText Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                          Speed="@[Speed:Slider:96:32-256]"
+                          Behavior="@[Behavior:Enum:MarqueeBehavior.Ticker]"
+                          Direction="@[Direction:Enum:MarqueeDirection.Left]"
+                          RepeatBehavior="2x"
+                          FontSize="18"/>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -517,6 +517,15 @@
         "XamlCodeFile": "RichSuggestBoxXaml.bind",
         "Icon": "/SamplePages/RichSuggestBox/RichSuggestBox.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/RichSuggestBox.md"
+      },
+      {
+        "Name": "MarqueeText",
+        "Subcategory": "Status and Info",
+        "About": "A text control that shows a marquee scrolling across the screen.",
+        //"CodeUrl": ,
+        "XamlCodeFile": "MarqueeTextXaml.bind",
+        "Icon": "/SamplePages/MarqueeText/MarqueeText.png"
+        //"DocumentationUrl": 
       }
     ]
   },

Microsoft.Toolkit.Uwp.UI.Controls.Core/MarqueeText/MarqueeBehavior.cs

@@ -0,0 +1,30 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// How the Marquee moves.
+    /// </summary>
+    public enum MarqueeBehavior
+    {
+        /// <summary>
+        /// The text flows across the screen from start to finish.
+        /// </summary>
+        Ticker,
+
+        /// <summary>
+        /// As the text flows across the screen a duplicate follows.
+        /// </summary>
+        /// <remarks>
+        /// Looping text won't move if all the text already fits on the screen.
+        /// </remarks>
+        Looping,
+
+        /// <summary>
+        /// The text bounces back and forth across the screen.
+        /// </summary>
+        Bouncing,
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Core/MarqueeText/MarqueeDirection.cs

@@ -0,0 +1,32 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// The direction a Marquee moves.
+    /// </summary>
+    public enum MarqueeDirection
+    {
+        /// <summary>
+        /// The text will flow from left to right.
+        /// </summary>
+        Left,
+
+        /// <summary>
+        /// The text will flow from right to left.
+        /// </summary>
+        Right,
+
+        /// <summary>
+        /// The text will flow from bottom to top.
+        /// </summary>
+        Up,
+
+        /// <summary>
+        /// The text will flow from top to bottom.
+        /// </summary>
+        Down,
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Core/MarqueeText/MarqueeText.Events.cs

@@ -0,0 +1,61 @@
+// 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 System;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Media;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A Control that displays Text in a Marquee style.
+    /// </summary>
+    public partial class MarqueeText
+    {
+        /// <summary>
+        /// Event raised when the Marquee begins scrolling.
+        /// </summary>
+        public event EventHandler MarqueeBegan;
+
+        /// <summary>
+        /// Event raised when the Marquee stops scrolling for any reason.
+        /// </summary>
+        public event EventHandler MarqueeStopped;
+
+        /// <summary>
+        /// Event raised when the Marquee completes scrolling.
+        /// </summary>
+        public event EventHandler MarqueeCompleted;
+
+        private void MarqueeText_Unloaded(object sender, RoutedEventArgs e)
+        {
+            this.Unloaded -= MarqueeText_Unloaded;
+            _marqueeContainer.SizeChanged -= Container_SizeChanged;
+
+            if (_marqueeStoryboard != null)
+            {
+                _marqueeStoryboard.Completed -= StoryBoard_Completed;
+            }
+        }
+
+        private void Container_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            if (_marqueeContainer != null)
+            {
+                RectangleGeometry clip = new RectangleGeometry();
+                clip.Rect = new Rect(0, 0, e.NewSize.Width, e.NewSize.Height);
+                _marqueeContainer.Clip = clip;
+            }
+
+            StartMarquee();
+        }
+
+        private void StoryBoard_Completed(object sender, object e)
+        {
+            StopMarquee(true);
+            MarqueeCompleted?.Invoke(this, EventArgs.Empty);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Core/MarqueeText/MarqueeText.Properties.cs

@@ -0,0 +1,144 @@
+// 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 Windows.UI.Text;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Media.Animation;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A Control that displays Text in a Marquee style.
+    /// </summary>
+    public partial class MarqueeText
+    {
+        private static readonly DependencyProperty TextProperty =
+            DependencyProperty.Register(nameof(Text), typeof(string), typeof(MarqueeText), new PropertyMetadata(null, PropertyChanged));
+
+        private static readonly DependencyProperty SpeedProperty =
+            DependencyProperty.Register(nameof(Speed), typeof(double), typeof(MarqueeText), new PropertyMetadata(32d, PropertyChanged));
+
+        private static readonly DependencyProperty RepeatBehaviorProperty =
+            DependencyProperty.Register(nameof(RepeatBehavior), typeof(RepeatBehavior), typeof(MarqueeText), new PropertyMetadata(new RepeatBehavior(1), PropertyChanged));
+
+        private static readonly DependencyProperty BehaviorProperty =
+            DependencyProperty.Register(nameof(Behavior), typeof(MarqueeBehavior), typeof(MarqueeText), new PropertyMetadata(false, BehaviorPropertyChanged));
+
+        private static readonly DependencyProperty DirectionProperty =
+            DependencyProperty.Register(nameof(Direction), typeof(MarqueeDirection), typeof(MarqueeText), new PropertyMetadata(MarqueeDirection.Left, DirectionPropertyChanged));
+
+        private static readonly DependencyProperty TextDecorationsProperty =
+            DependencyProperty.Register(nameof(TextDecorations), typeof(TextDecorations), typeof(MarqueeText), new PropertyMetadata(TextDecorations.None));
+
+        /// <summary>
+        /// Gets or sets the text being displayed in Marquee.
+        /// </summary>
+        public string Text
+        {
+            get { return (string)GetValue(TextProperty); }
+            set { SetValue(TextProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the speed the text moves in the Marquee.
+        /// </summary>
+        public double Speed
+        {
+            get { return (double)GetValue(SpeedProperty); }
+            set { SetValue(SpeedProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether or not the marquee scroll repeats.
+        /// </summary>
+        public RepeatBehavior RepeatBehavior
+        {
+            get { return (RepeatBehavior)GetValue(RepeatBehaviorProperty); }
+            set { SetValue(RepeatBehaviorProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the marquee behavior.
+        /// </summary>
+        public MarqueeBehavior Behavior
+        {
+            get { return (MarqueeBehavior)GetValue(BehaviorProperty); }
+            set { SetValue(BehaviorProperty, value); }
+        }
+
+        private bool IsTicker => Behavior == MarqueeBehavior.Ticker;
+
+        private bool IsLooping => Behavior == MarqueeBehavior.Looping;
+
+        private bool IsBouncing => Behavior == MarqueeBehavior.Bouncing;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether or not the marquee text wraps.
+        /// </summary>
+        /// <remarks>
+        /// Wrappping text won't scroll if the text can already fit in the screen.
+        /// </remarks>
+        public MarqueeDirection Direction
+        {
+            get { return (MarqueeDirection)GetValue(DirectionProperty); }
+            set { SetValue(DirectionProperty, value); }
+        }
+
+        private bool IsDirectionHorizontal => Direction == MarqueeDirection.Left || Direction == MarqueeDirection.Right;
+
+        private bool IsDirectionInverse => Direction == MarqueeDirection.Up || Direction == MarqueeDirection.Right;
+
+        /// <summary>
+        /// Gets or sets a value that indicates what decorations are applied to the text.
+        /// </summary>
+        public TextDecorations TextDecorations
+        {
+            get { return (TextDecorations)GetValue(TextDecorationsProperty); }
+            set { SetValue(TextDecorationsProperty, value); }
+        }
+
+        private static void BehaviorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var control = d as MarqueeText;
+            bool active = control._isActive;
+            var newBehavior = (MarqueeBehavior)e.NewValue;
+
+            VisualStateManager.GoToState(control, GetVisualStateName(newBehavior), true);
+
+            control.StopMarquee(false);
+            if (active)
+            {
+                control.StartMarquee();
+            }
+        }
+
+        private static void DirectionPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var control = d as MarqueeText;
+            bool active = control._isActive;
+            var oldDirection = (MarqueeDirection)e.OldValue;
+            var newDirection = (MarqueeDirection)e.NewValue;
+            bool oldAxisX = oldDirection == MarqueeDirection.Left || oldDirection == MarqueeDirection.Right;
+            bool newAxisX = newDirection == MarqueeDirection.Left || newDirection == MarqueeDirection.Right;
+
+            VisualStateManager.GoToState(control, GetVisualStateName(newDirection), true);
+
+            if (oldAxisX != newAxisX)
+            {
+                control.StopMarquee(false);
+            }
+
+            if (active)
+            {
+                control.StartMarquee();
+            }
+        }
+
+        private static void PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var control = d as MarqueeText;
+            control.UpdateAnimation(true);
+        }
+    }
+}