diff --git a/ReadMe.md b/ReadMe.md index e83cf795b..2c0ab01a7 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -28,7 +28,7 @@ Otherwise, you can clone the repo, open the `components` directory, navigate wit - [DataTable](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/DataTable/samples/DataTable.md) - [Extensions.DependencyInjection](https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/Extensions.DependencyInjection) - [MarkdownTextBlock](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/MarkdownTextBlock/samples/MarkdownTextBlock.md) -- [MarqueeText](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/MarqueeText/samples/MarqueeText.md) +- [Marquee](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/Marquee/samples/Marquee.md) - [Notifications](https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/Notifications) - [Ribbon](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/Ribbon/samples/Ribbon.md) - [RivePlayer](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/RivePlayer/samples/RivePlayer.md) diff --git a/components/MarqueeText/OpenSolution.bat b/components/Marquee/OpenSolution.bat similarity index 100% rename from components/MarqueeText/OpenSolution.bat rename to components/Marquee/OpenSolution.bat diff --git a/components/MarqueeText/samples/Assets/MarqueeText.png b/components/Marquee/samples/Assets/Marquee.png similarity index 100% rename from components/MarqueeText/samples/Assets/MarqueeText.png rename to components/Marquee/samples/Assets/Marquee.png diff --git a/components/MarqueeText/samples/Dependencies.props b/components/Marquee/samples/Dependencies.props similarity index 100% rename from components/MarqueeText/samples/Dependencies.props rename to components/Marquee/samples/Dependencies.props diff --git a/components/Marquee/samples/Marquee.md b/components/Marquee/samples/Marquee.md new file mode 100644 index 000000000..69f8e9a96 --- /dev/null +++ b/components/Marquee/samples/Marquee.md @@ -0,0 +1,52 @@ +--- +title: Marquee +author: Avid29 +description: A control for scrolling content in a marquee fashion. +keywords: Marquee, Control +dev_langs: + - csharp +category: Controls +subcategory: Layout +experimental: true +discussion-id: 231 +issue-id: 426 +icon: Assets/Marquee.png +--- + +The Marquee control allows text or other content to scroll in a marquee fashion. The control is heavily templated and many changes can be made by modifying the style. The control can also be adjusted using the Speed, Behavior, RepeatBehavior, and Direction properties. + +## Speed + +The speed property determines how quickly the content moves in pixels per second. The speed can be adjusted mid-animation and handled continously. + +## Behavior + +The Marquee control has 3 behaviors + +### Ticker + +Ticker mode starts with all content off the screen then scrolls the content across across the screen. When the animation finishes in the mode no content will be on screen. + +### Looping + +Looping mode will begin with the start of the content fully in frame then scroll towards the end. When the end is reached it will loop back to the start of the content. Nothing will happen if the content fits in frame. + +### Bouncing + +Looping mode will begin with the start of the content fully in frame then scroll towards the end. When the end is reached it will bounce and scroll backwards to the start of the content. Nothing will happen if the content fits in frame. + +## RepeatBehavior + +The repeat behavior determines how many times the marquee will loop before the animation finishes. It can be a number of iteration, a duration, or forever. + +## Direction + +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] diff --git a/components/Marquee/samples/MarqueeSample.xaml b/components/Marquee/samples/MarqueeSample.xaml new file mode 100644 index 000000000..5a37d7777 --- /dev/null +++ b/components/Marquee/samples/MarqueeSample.xaml @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +