Skip to content

Commit c71cac4

Browse files
ArlodotexeArlodotexe
authored
Merge pull request #732 from Avid29/marquee
MarqueeText conversion to broad Marquee control
2 parents 6b70af1 + 20ed84f commit c71cac4

27 files changed

Lines changed: 337 additions & 218 deletions

‎ReadMe.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Otherwise, you can clone the repo, open the `components` directory, navigate wit
2828
- [DataTable](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/DataTable/samples/DataTable.md)
2929
- [Extensions.DependencyInjection](https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/Extensions.DependencyInjection)
3030
- [MarkdownTextBlock](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/MarkdownTextBlock/samples/MarkdownTextBlock.md)
31-
- [MarqueeText](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/MarqueeText/samples/MarqueeText.md)
31+
- [Marquee](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/Marquee/samples/Marquee.md)
3232
- [Notifications](https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/Notifications)
3333
- [Ribbon](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/Ribbon/samples/Ribbon.md)
3434
- [RivePlayer](https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/RivePlayer/samples/RivePlayer.md)

components/MarqueeText/OpenSolution.bat renamed to components/Marquee/OpenSolution.bat

File renamed without changes.

components/MarqueeText/samples/Assets/MarqueeText.png renamed to components/Marquee/samples/Assets/Marquee.png

File renamed without changes.

components/MarqueeText/samples/Dependencies.props renamed to components/Marquee/samples/Dependencies.props

File renamed without changes.

‎components/Marquee/samples/Marquee.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Marquee
3+
author: Avid29
4+
description: A control for scrolling content in a marquee fashion.
5+
keywords: Marquee, Control
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
experimental: true
11+
discussion-id: 231
12+
issue-id: 426
13+
icon: Assets/Marquee.png
14+
---
15+
16+
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.
17+
18+
## Speed
19+
20+
The speed property determines how quickly the content moves in pixels per second. The speed can be adjusted mid-animation and handled continously.
21+
22+
## Behavior
23+
24+
The Marquee control has 3 behaviors
25+
26+
### Ticker
27+
28+
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.
29+
30+
### Looping
31+
32+
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.
33+
34+
### Bouncing
35+
36+
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.
37+
38+
## RepeatBehavior
39+
40+
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.
41+
42+
## Direction
43+
44+
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.
45+
46+
> [!Sample MarqueeTextSample]
47+
48+
## Non-Text Content
49+
50+
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.
51+
52+
> [!Sample MarqueeSample]

‎components/Marquee/samples/MarqueeSample.xaml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!-- 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. -->
2+
<Page x:Class="MarqueeExperiment.Samples.MarqueeSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="using:MarqueeExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<StackPanel Padding="16">
12+
<controls:Marquee Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
13+
Content="{x:Bind Data}"
14+
Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
15+
FontSize="18"
16+
RepeatBehavior="Forever"
17+
Speed="{x:Bind MQSpeed, Mode=OneWay}">
18+
<controls:Marquee.ContentTemplate>
19+
<DataTemplate x:DataType="local:MarqueeSampleItems">
20+
<ItemsControl ItemsSource="{x:Bind Items}">
21+
<ItemsControl.ItemsPanel>
22+
<ItemsPanelTemplate>
23+
<StackPanel Orientation="Horizontal"
24+
Spacing="8" />
25+
</ItemsPanelTemplate>
26+
</ItemsControl.ItemsPanel>
27+
<ItemsControl.ItemTemplate>
28+
<DataTemplate x:DataType="local:MarqueeSampleItem">
29+
<Border Width="100"
30+
Height="48"
31+
Background="{x:Bind Brush}">
32+
<TextBlock Text="{x:Bind Name}" />
33+
</Border>
34+
</DataTemplate>
35+
</ItemsControl.ItemTemplate>
36+
</ItemsControl>
37+
</DataTemplate>
38+
</controls:Marquee.ContentTemplate>
39+
</controls:Marquee>
40+
41+
<Button Click="AddItem_Click"
42+
Content="Add something" />
43+
</StackPanel>
44+
</Page>

‎components/Marquee/samples/MarqueeSample.xaml.cs‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Controls;
6+
using Windows.UI;
7+
8+
namespace MarqueeExperiment.Samples;
9+
10+
[ToolkitSample(id: nameof(MarqueeSample), "Marquee", description: "A control for scrolling content in a marquee fashion.")]
11+
[ToolkitSampleNumericOption("MQSpeed", initial: 96, min: 48, max: 196, step: 1, Title = "Speed")]
12+
[ToolkitSampleMultiChoiceOption("MQDirection", "Left", "Right", "Up", "Down", Title = "Marquee Direction")]
13+
//[ToolkitSampleMultiChoiceOption("MarqueeRepeat", "Repeat", "Forever", "1x", "2x")]
14+
#if !HAS_UNO
15+
[ToolkitSampleMultiChoiceOption("MQBehavior", "Ticker", "Looping", "Bouncing", Title = "Marquee Behavior")]
16+
#else
17+
[ToolkitSampleMultiChoiceOption("MQBehavior", "Ticker", "Looping", Title = "Marquee Behavior")]
18+
#endif
19+
public sealed partial class MarqueeSample : Page
20+
{
21+
public MarqueeSample()
22+
{
23+
this.InitializeComponent();
24+
25+
for (int i = 0; i < 15; i++)
26+
{
27+
AddItem_Click(this, null);
28+
}
29+
}
30+
31+
private MarqueeBehavior ConvertStringToMarqueeBehavior(string str) => str switch
32+
{
33+
"Looping" => MarqueeBehavior.Looping,
34+
"Ticker" => MarqueeBehavior.Ticker,
35+
#if !HAS_UNO
36+
"Bouncing" => MarqueeBehavior.Bouncing,
37+
#endif
38+
_ => throw new NotImplementedException(),
39+
};
40+
41+
public MarqueeSampleItems Data = new();
42+
43+
private MarqueeDirection ConvertStringToMarqueeDirection(string str) => str switch
44+
{
45+
"Left" => MarqueeDirection.Left,
46+
"Up" => MarqueeDirection.Up,
47+
"Right" => MarqueeDirection.Right,
48+
"Down" => MarqueeDirection.Down,
49+
_ => throw new NotImplementedException(),
50+
};
51+
52+
private void AddItem_Click(object sender, RoutedEventArgs? e)
53+
{
54+
var rand = new Random();
55+
Data.Items.Add(new MarqueeSampleItem()
56+
{
57+
Name = $"Item {Data.Items.Count + 1}",
58+
Brush = new SolidColorBrush(Color.FromArgb(255, (byte)rand.Next(256), (byte)rand.Next(256), (byte)rand.Next(256))),
59+
});
60+
}
61+
}
62+
63+
public class MarqueeSampleItems
64+
{
65+
public ObservableCollection<MarqueeSampleItem> Items { get; } = new();
66+
}
67+
68+
public record MarqueeSampleItem
69+
{
70+
public string? Name { get; set; }
71+
72+
public Brush? Brush { get; set; }
73+
}

components/MarqueeText/samples/MarqueeText.Samples.csproj renamed to components/Marquee/samples/MarqueeText.Samples.csproj

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
<Project>
22
<Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
33
<PropertyGroup>
4-
<ToolkitComponentName>MarqueeText</ToolkitComponentName>
4+
<ToolkitComponentName>Marquee</ToolkitComponentName>
55
</PropertyGroup>
66

7+
<!-- Sets this up as a toolkit component's sample project -->
8+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
79
<ItemGroup>
810
<Compile Update="MarqueeTextSample.xaml.cs">
911
<DependentUpon>MarqueeTextSample.xaml</DependentUpon>
1012
</Compile>
11-
12-
<UpToDateCheckInput Remove="MarqueeTextSample.xaml" />
1313
</ItemGroup>
14-
15-
<!-- Sets this up as a toolkit component's sample project -->
16-
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
17-
1814
<ItemGroup>
19-
<None Remove="Assets\MarqueeText.png" />
20-
21-
<Content Include="Assets\MarqueeText.png">
22-
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
23-
</Content>
15+
<Compile Update="MarqueeSample.xaml.cs">
16+
<DependentUpon>MarqueeSample.xaml</DependentUpon>
17+
</Compile>
2418
</ItemGroup>
19+
2520
</Project>

‎components/Marquee/samples/MarqueeTextSample.xaml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- 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. -->
2+
<Page x:Class="MarqueeExperiment.Samples.MarqueeTextSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="MarqueeExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<StackPanel Padding="16">
12+
<controls:Marquee Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
13+
Content="{x:Bind MQText, Mode=OneWay}"
14+
Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
15+
FontSize="18"
16+
RepeatBehavior="Forever"
17+
Speed="{x:Bind MQSpeed, Mode=OneWay}" />
18+
</StackPanel>
19+
</Page>

components/MarqueeText/samples/MarqueeTextSample.xaml.cs renamed to components/Marquee/samples/MarqueeTextSample.xaml.cs

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44

55
using CommunityToolkit.WinUI.Controls;
66

7-
namespace MarqueeTextExperiment.Samples;
8-
[ToolkitSample(id: nameof(MarqueeTextSample), "MarqueeText", description: "A control for scrolling text in a marquee fashion.")]
7+
namespace MarqueeExperiment.Samples;
8+
9+
[ToolkitSample(id: nameof(MarqueeTextSample), "Marquee", description: "A control for scrolling content in a marquee fashion.")]
910
[ToolkitSampleNumericOption("MQSpeed", initial: 96, min: 48, max: 196, step: 1, Title = "Speed")]
1011
[ToolkitSampleMultiChoiceOption("MQDirection", "Left", "Right", "Up", "Down", Title = "Marquee Direction")]
12+
[ToolkitSampleTextOption("MQText", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")]
1113
//[ToolkitSampleMultiChoiceOption("MarqueeRepeat", "Repeat", "Forever", "1x", "2x")]
1214
#if !HAS_UNO
1315
[ToolkitSampleMultiChoiceOption("MQBehavior", "Ticker", "Looping", "Bouncing", Title = "Marquee Behavior")]

0 commit comments

Comments
 (0)