Skip to content

Commit 6052375

Browse files
Avid29Avid29
committed
Updated Marquee samples
1 parent 0d8b18f commit 6052375

File tree

7 files changed

+113
-7
lines changed

7 files changed

+113
-7
lines changed

‎components/Marquee/samples/Marquee.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,9 @@ The default direction is left, meaning the content will move leftwards, but this
5050
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.
5151

5252
> [!Sample MarqueeSample]
53+
54+
# Level Up with Behaviors
55+
56+
Use behaviors to triggers the Marquee on events
57+
58+
> [!Sample MarqueeBehaviorSample]

‎components/Marquee/samples/MarqueeBehaviorSample.xaml‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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.MarqueeBehaviorSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
6+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
7+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
9+
xmlns:local="MarqueeExperiment.Samples"
10+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
11+
mc:Ignorable="d">
12+
13+
<StackPanel Padding="16">
14+
<TextBlock FontWeight="Bold"
15+
Text="This Marquee will loop once when hovered." />
16+
<controls:Marquee x:Name="Loop1Marquee"
17+
Background="Transparent"
18+
Behavior="Ticker"
19+
Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
20+
FontSize="18"
21+
RepeatBehavior="1x"
22+
Speed="256">
23+
<interactivity:Interaction.Behaviors>
24+
<interactivity:EventTriggerBehavior EventName="PointerEntered"
25+
SourceObject="{Binding ElementName=Loop1Marquee}">
26+
<interactivity:CallMethodAction MethodName="StartMarquee"
27+
TargetObject="{Binding ElementName=Loop1Marquee}" />
28+
</interactivity:EventTriggerBehavior>
29+
</interactivity:Interaction.Behaviors>
30+
</controls:Marquee>
31+
32+
<TextBlock Margin="0,16,0,0"
33+
FontWeight="Bold"
34+
Text="This Marquee will loop while hovered and pause when not hovered." />
35+
<controls:Marquee x:Name="MarqueeControl"
36+
Background="Transparent"
37+
Behavior="Looping"
38+
Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
39+
FontSize="18"
40+
RepeatBehavior="Forever"
41+
Speed="96">
42+
<interactivity:Interaction.Behaviors>
43+
<interactivity:EventTriggerBehavior EventName="PointerEntered"
44+
SourceObject="{Binding ElementName=MarqueeControl}">
45+
<interactivity:CallMethodAction MethodName="StartMarquee"
46+
TargetObject="{Binding ElementName=MarqueeControl}" />
47+
</interactivity:EventTriggerBehavior>
48+
<interactivity:EventTriggerBehavior EventName="PointerExited"
49+
SourceObject="{Binding ElementName=MarqueeControl}">
50+
<interactivity:CallMethodAction MethodName="PauseMarquee"
51+
TargetObject="{Binding ElementName=MarqueeControl}" />
52+
</interactivity:EventTriggerBehavior>
53+
</interactivity:Interaction.Behaviors>
54+
</controls:Marquee>
55+
</StackPanel>
56+
</Page>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
namespace MarqueeExperiment.Samples;
6+
7+
[ToolkitSample(id: nameof(MarqueeBehaviorSample), "Marquee", description: "A control for scrolling content in a marquee fashion.")]
8+
public sealed partial class MarqueeBehaviorSample : Page
9+
{
10+
public MarqueeBehaviorSample()
11+
{
12+
this.InitializeComponent();
13+
}
14+
}

‎components/Marquee/samples/MarqueeSample.xaml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
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. -->
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. -->
22
<Page x:Class="MarqueeExperiment.Samples.MarqueeSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -9,7 +9,8 @@
99
mc:Ignorable="d">
1010

1111
<StackPanel Padding="16">
12-
<controls:Marquee Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
12+
<controls:Marquee AutoPlay="True"
13+
Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
1314
Content="{x:Bind Data}"
1415
Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
1516
FontSize="18"

‎components/Marquee/samples/MarqueeText.Samples.csproj‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@
77
<!-- Sets this up as a toolkit component's sample project -->
88
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
99
<ItemGroup>
10+
<PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402" />
11+
</ItemGroup>
12+
13+
<ItemGroup>
14+
<Compile Update="MarqueeBehaviorSampl.xaml.cs">
15+
<DependentUpon>MarqueeBehaviorSample.xaml</DependentUpon>
16+
</Compile>
17+
<Compile Update="MarqueeBehaviorSample.xaml.cs">
18+
<DependentUpon>MarqueeBehaviorSample.xaml</DependentUpon>
19+
</Compile>
1020
<Compile Update="MarqueeTextSample.xaml.cs">
1121
<DependentUpon>MarqueeTextSample.xaml</DependentUpon>
1222
</Compile>
13-
</ItemGroup>
14-
<ItemGroup>
1523
<Compile Update="MarqueeSample.xaml.cs">
1624
<DependentUpon>MarqueeSample.xaml</DependentUpon>
1725
</Compile>

‎components/Marquee/samples/MarqueeTextSample.xaml‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
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. -->
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. -->
22
<Page x:Class="MarqueeExperiment.Samples.MarqueeTextSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -8,12 +8,24 @@
88
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
99
mc:Ignorable="d">
1010

11-
<StackPanel Padding="16">
12-
<controls:Marquee Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
11+
<StackPanel Padding="16"
12+
Spacing="8">
13+
<controls:Marquee x:Name="MarqueeControl"
14+
AutoPlay="{x:Bind MQAuto, Mode=OneWay}"
15+
Behavior="{x:Bind ConvertStringToMarqueeBehavior(MQBehavior), Mode=OneWay}"
1316
Content="{x:Bind MQText, Mode=OneWay}"
1417
Direction="{x:Bind ConvertStringToMarqueeDirection(MQDirection), Mode=OneWay}"
1518
FontSize="18"
1619
RepeatBehavior="Forever"
1720
Speed="{x:Bind MQSpeed, Mode=OneWay}" />
21+
22+
<Button Click="StartMarquee_Click"
23+
Content="Start Marquee" />
24+
<Button Click="StopMarquee_Click"
25+
Content="Stop Marquee" />
26+
<Button Click="PauseMarquee_Click"
27+
Content="Pause Marquee" />
28+
<Button Click="ResumeMarquee_Click"
29+
Content="Resume Marquee" />
1830
</StackPanel>
1931
</Page>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ namespace MarqueeExperiment.Samples;
1616
#else
1717
[ToolkitSampleMultiChoiceOption("MQBehavior", "Ticker", "Looping", Title = "Marquee Behavior")]
1818
#endif
19+
[ToolkitSampleBoolOption("MQAuto", true, Title = "Auto Play")]
1920
public sealed partial class MarqueeTextSample : Page
2021
{
2122
public MarqueeTextSample()
@@ -41,4 +42,12 @@ public MarqueeTextSample()
4142
"Down" => MarqueeDirection.Down,
4243
_ => throw new System.NotImplementedException(),
4344
};
45+
46+
private void StartMarquee_Click(object sender, RoutedEventArgs e) => MarqueeControl.StartMarquee();
47+
48+
private void StopMarquee_Click(object sender, RoutedEventArgs e) => MarqueeControl.StopMarquee();
49+
50+
private void ResumeMarquee_Click(object sender, RoutedEventArgs e) => MarqueeControl.ResumeMarquee();
51+
52+
private void PauseMarquee_Click(object sender, RoutedEventArgs e) => MarqueeControl.PauseMarquee();
4453
}

0 commit comments

Comments
 (0)