🧪 [Experiment] MarqueeText

niels9001 commented 1 year ago

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:

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 Marquee

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 commented 1 year ago

Semantics: forever versus infinite.

Lightczx commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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.

CommunityToolkit / Labs-Windows