🧪 [Experiment] MarqueeText

[niels9001]

Approved from Discussion

https://github.com/CommunityToolkit/Labs-Windows/discussions/231

Problem Statement

At times text might not fit the screen - or you'd want to have a specific experience where text can be animated / looped, similar to what you'd commonly find in newsfeeds.

Overview

This experiment adds the following components:

• MarqueeTextBlock

Using

You can try it out via the NuGet Packages here:

• UWP: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.Uwp.MarqueeText
• WinUI 3: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.MarqueeText Read more about Preview Packages here.

Code

 <labs:MarqueeText Behavior="Ticker"
                          Direction="Left"
                          FontSize="18"
                          RepeatBehavior="Forever"
                          Speed="{96"
                          Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />

Result

Documentation & samples https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/MarqueeText/samples

Additional info

No response

### Implementation Requirements
- [X] Working Prototype
- [X] Feature Complete
- [X] Documentation
- [X] Samples
- [ ] Unit Tests
- [ ] Community Feedback / Usage Testimonies

### Tested Platforms
- [X] UWP
- [X] WinAppSDK / WinUI 3
- [X] Web Assembly (WASM)
- [ ] Android
- [ ] iOS
- [ ] MacOS
- [ ] Linux / GTK

### Technical Review
- [ ] Accessibility Audit
- [ ] API/Naming Review
- [ ] Code Quality/Style
- [ ] Dependency Review
- [ ] Design/Style Review
- [ ] Final Approval

Community Help?

None

[Jay-o-Way]

Semantics: forever versus infinite.

[Lightczx]

@niels9001 Hi, I'm using this control in my project currently, I want to implement a feature that when the pointer entered the text start animation, and when pointer exited, the text should be re-placed at the very begin place. is there any way to programmatically achieve this? Or should this be a feature request?

[michael-hawker]

Hi @Lightczx, sorry just saw your message when digging this up for someone else.

Since there's a Start/Stop method on the control, you could attach a XAML Behavior/EventTrigger to the PointerEntered/Exited and then call those methods. It should be possible without needing to bake anything into the control itself.

[Lightczx]

@michael-hawker Thanks for your response, is there any way to controls the initial state? I prefer not activate it when loaded. (the Stop method seems to work)

[Arlodotexe]

Hi @Lightczx, sorry just saw your message when digging this up for someone else.

Since there's a Start/Stop method on the control, you could attach a XAML Behavior/EventTrigger to the PointerEntered/Exited and then call those methods. It should be possible without needing to bake anything into the control itself.

@Avid29 should be able to shed light on this. I'm checking the code, and this functionality appears to be built-in via the UpdateAnimation method. The first method parameter, resume, is described as "True if animation should resume from its current position, false if it should restart.", but the method is not public, nor can the value be changed indirectly via the private calls to UpdateAnimation.

@Avid29 When designing this, did you plan for the ability to pause/resume the Marquee, or to change its starting position?

[Avid29]

The resume parameter is for when the speed or control size changes while the animation is running. It is not supposed to be used for pausing or resuming the animation.

In design I intended for the Marquee to not play until StartMarquee is called. This is not the behavior because of line 56 is MarqueeText.Events link, which automatically begins the animation when the container size is changed. I should have left this behavior up to the user.

@Arlodotexe Should I release a patch? It's a technically a small breaking change.