Skip to content

Commit 692ce77

Browse files
ghost1372ghost1372
committed
Add BetterLyric Sample
1 parent a97e3c6 commit 692ce77

5 files changed

Lines changed: 389 additions & 0 deletions

File tree

‎dev/DevWinUI.Gallery/Assets/Fluent/BetterLyric.png‎

9.45 KB
Loading

‎dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -903,6 +903,13 @@
903903
"Title": "Features (Win2D)",
904904
"ImagePath": "ms-appx:///Assets/Fluent/Canvas.png",
905905
"Items": [
906+
{
907+
"UniqueId": "DevWinUIGallery.Views.BetterLyricPage",
908+
"Title": "Better Lyric",
909+
"Subtitle": "An elegant and deeply customizable lyrics visualizer",
910+
"IsNew": true,
911+
"ImagePath": "ms-appx:///Assets/Fluent/BetterLyric.png"
912+
},
906913
{
907914
"UniqueId": "DevWinUIGallery.Views.MorphingAnimationPage",
908915
"Title": "Morphing Animation",

‎dev/DevWinUI.Gallery/Views/Pages/Win2d/BetterLyricPage.xaml‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<Page x:Class="DevWinUIGallery.Views.BetterLyricPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:dev="using:DevWinUI"
7+
xmlns:local="using:DevWinUIGallery"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
xmlns:views="using:DevWinUIGallery.Views"
10+
mc:Ignorable="d">
11+
12+
<ScrollViewer>
13+
<StackPanel Margin="10" dev:PanelAttach.ChildrenTransitions="Default" Spacing="10">
14+
<local:ControlExample DocPage="controls/animatedTextBlock" HeaderText="AnimatedTextBlock">
15+
<local:ControlExample.Xaml>
16+
<x:String>
17+
&lt;dev:BetterLyric x:Name="MyBetterLyric" CurrentLyricsData="{x:Bind CurrentLyricData}" CurrentIsPlaying="True" IsLyricsVisible="True" /&gt;
18+
</x:String>
19+
</local:ControlExample.Xaml>
20+
<Grid Height="400">
21+
<Grid.ColumnDefinitions>
22+
<ColumnDefinition />
23+
<ColumnDefinition />
24+
<ColumnDefinition />
25+
</Grid.ColumnDefinitions>
26+
<Grid.RowDefinitions>
27+
<RowDefinition />
28+
<RowDefinition Height="Auto" />
29+
</Grid.RowDefinitions>
30+
<dev:BetterLyric x:Name="MyBetterLyric" Margin="10" CurrentIsPlaying="{x:Bind TgCurrentIsPlaying.IsOn, Mode=OneWay}" IsLyricsVisible="{x:Bind TgIsLyricVisible.IsOn, Mode=OneWay}" />
31+
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Margin="16,0,16,16" VerticalAlignment="Bottom" Spacing="4">
32+
<Slider x:Name="ProgressSlider" PointerPressed="ProgressSlider_PointerPressed" PointerReleased="ProgressSlider_PointerReleased" ValueChanged="ProgressSlider_ValueChanged" />
33+
<TextBlock x:Name="PositionText" HorizontalAlignment="Center" FontSize="12" Opacity="0.7" />
34+
</StackPanel>
35+
36+
<ScrollViewer Grid.Column="1">
37+
<StackPanel Spacing="5">
38+
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="Styles" />
39+
<ToggleSwitch x:Name="TgIsLyricVisible" Header="Is Lyric Visible" IsOn="True" />
40+
<ToggleSwitch x:Name="TgCurrentIsPlaying" Header="Is Playing" IsOn="True" />
41+
42+
<ComboBox x:Name="CmbLyricsAlignment" Header="Lyrics Alignment" SelectionChanged="CmbLyricsAlignment_SelectionChanged">
43+
<ComboBoxItem Content="Left" Tag="Left" />
44+
<ComboBoxItem Content="Center" Tag="Center" />
45+
<ComboBoxItem Content="Right" Tag="Right" />
46+
</ComboBox>
47+
48+
<ComboBox x:Name="CmbLyricsLineContentOrientation" Header="Lyrics Line Content Orientation" SelectionChanged="CmbLyricsLineContentOrientation_SelectionChanged">
49+
<ComboBoxItem Content="Horizontal" Tag="Horizontal" />
50+
<ComboBoxItem Content="Vertical" Tag="Vertical" />
51+
</ComboBox>
52+
53+
<ToggleSwitch Header="Auto Wrap" IsOn="{x:Bind MyBetterLyric.AutoWrap, Mode=TwoWay}" />
54+
55+
<Slider Header="Center Top Offset" Maximum="99" Minimum="1" Value="{x:Bind MyBetterLyric.PlayingLineTopOffset, Mode=TwoWay}" />
56+
57+
<dev:SettingsExpander Header="Line Spacing Factor">
58+
<dev:SettingsExpander.Items>
59+
<dev:SettingsCard Header="Line Overall Spacing Factor">
60+
<Slider Maximum="2" Minimum="0" StepFrequency="0.1" Value="{x:Bind MyBetterLyric.LyricsLineOverallSpacingFactor, Mode=TwoWay}" />
61+
</dev:SettingsCard>
62+
<dev:SettingsCard Header="Line Inner Spacing Factor">
63+
<Slider Maximum="2" Minimum="-2" StepFrequency="0.1" Value="{x:Bind MyBetterLyric.LyricsLineInnerSpacingFactor, Mode=TwoWay}" />
64+
</dev:SettingsCard>
65+
</dev:SettingsExpander.Items>
66+
</dev:SettingsExpander>
67+
<dev:SettingsExpander Header="Lyrics Opacity">
68+
<dev:SettingsExpander.Items>
69+
<dev:SettingsCard Header="Phonetic Text">
70+
<Slider Maximum="100" Minimum="0" StepFrequency="1" Value="{x:Bind MyBetterLyric.PhoneticLyricsOpacity, Mode=TwoWay}" />
71+
</dev:SettingsCard>
72+
<dev:SettingsCard Header="Played Original Text">
73+
<Slider Maximum="100" Minimum="0" StepFrequency="1" Value="{x:Bind MyBetterLyric.PlayedOriginalLyricsOpacity, Mode=TwoWay}" />
74+
</dev:SettingsCard>
75+
<dev:SettingsCard Header="Unplayed Original Text">
76+
<Slider Maximum="100" Minimum="0" StepFrequency="1" Value="{x:Bind MyBetterLyric.UnplayedOriginalLyricsOpacity, Mode=TwoWay}" />
77+
</dev:SettingsCard>
78+
<dev:SettingsCard Header="Translated Text">
79+
<Slider Maximum="100" Minimum="0" StepFrequency="1" Value="{x:Bind MyBetterLyric.TranslatedLyricsOpacity, Mode=TwoWay}" />
80+
</dev:SettingsCard>
81+
</dev:SettingsExpander.Items>
82+
</dev:SettingsExpander>
83+
</StackPanel>
84+
</ScrollViewer>
85+
86+
<ScrollViewer Grid.Column="2">
87+
<StackPanel Spacing="5">
88+
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="Effects" />
89+
90+
<ComboBox x:Name="CmbWordByWord" Header="Word By Word Effect" SelectionChanged="CmbWordByWord_SelectionChanged">
91+
<ComboBoxItem Content="Auto" Tag="Auto" />
92+
<ComboBoxItem Content="Never" Tag="Never" />
93+
<ComboBoxItem Content="Always" Tag="Always" />
94+
</ComboBox>
95+
96+
<ToggleSwitch Header="Blur Effect" IsOn="{x:Bind MyBetterLyric.IsLyricsBlurEffectEnabled, Mode=TwoWay}" />
97+
98+
<ToggleSwitch Header="Fade Out Effect" IsOn="{x:Bind MyBetterLyric.IsLyricsFadeOutEffectEnabled, Mode=TwoWay}" />
99+
100+
<ToggleSwitch Header="Out Of Sight Effect" IsOn="{x:Bind MyBetterLyric.IsLyricsOutOfSightEffectEnabled, Mode=TwoWay}" />
101+
102+
<dev:SettingsExpander Header="Glow Effect">
103+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.IsLyricsGlowEffectEnabled, Mode=TwoWay}" />
104+
<dev:SettingsExpander.Items>
105+
<dev:SettingsCard Header="Scope">
106+
<ComboBox x:Name="CmbLyricsGlowEffectScope" SelectionChanged="CmbLyricsGlowEffectScope_SelectionChanged">
107+
<ComboBoxItem Content="LongDurationSyllable" Tag="LongDurationSyllable" />
108+
<ComboBoxItem Content="LineStartToCurrentChar" Tag="LineStartToCurrentChar" />
109+
</ComboBox>
110+
</dev:SettingsCard>
111+
<Slider Header="Long Syllable Duration" Maximum="1000" Minimum="0" Value="{x:Bind MyBetterLyric.LyricsGlowEffectLongSyllableDuration, Mode=TwoWay}" />
112+
<ToggleSwitch Header="Auto Adjust" IsOn="{x:Bind MyBetterLyric.IsLyricsGlowEffectAmountAutoAdjust, Mode=TwoWay}" />
113+
<Slider Header="Amount" IsEnabled="{x:Bind MyBetterLyric.IsLyricsGlowEffectAmountAutoAdjust, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" Maximum="16" Minimum="0" Value="{x:Bind MyBetterLyric.LyricsGlowEffectAmount, Mode=TwoWay}" />
114+
</dev:SettingsExpander.Items>
115+
</dev:SettingsExpander>
116+
117+
<dev:SettingsExpander Header="Scale Effect">
118+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.IsLyricsScaleEffectEnabled, Mode=TwoWay}" />
119+
<dev:SettingsExpander.Items>
120+
<dev:SettingsCard Header="Long Syllable Duration">
121+
<Slider Maximum="1000" Minimum="0" Value="{x:Bind MyBetterLyric.LyricsScaleEffectLongSyllableDuration, Mode=TwoWay}" />
122+
</dev:SettingsCard>
123+
<dev:SettingsCard Header="Auto Adjust">
124+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.IsLyricsScaleEffectAmountAutoAdjust, Mode=TwoWay}" />
125+
</dev:SettingsCard>
126+
<dev:SettingsCard Header="Amount" IsEnabled="{x:Bind MyBetterLyric.IsLyricsScaleEffectAmountAutoAdjust, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
127+
<Slider Maximum="200" Minimum="100" Value="{x:Bind MyBetterLyric.LyricsScaleEffectAmount, Mode=TwoWay}" />
128+
</dev:SettingsCard>
129+
</dev:SettingsExpander.Items>
130+
</dev:SettingsExpander>
131+
132+
<dev:SettingsExpander Header="Float Animation">
133+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.IsLyricsFloatAnimationEnabled, Mode=TwoWay}" />
134+
<dev:SettingsExpander.Items>
135+
<dev:SettingsCard Header="Auto Adjust">
136+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.IsLyricsFloatAnimationAmountAutoAdjust, Mode=TwoWay}" />
137+
</dev:SettingsCard>
138+
<dev:SettingsCard Header="Amount" IsEnabled="{x:Bind MyBetterLyric.IsLyricsFloatAnimationAmountAutoAdjust, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
139+
<Slider Maximum="16" Minimum="0" Value="{x:Bind MyBetterLyric.LyricsFloatAnimationAmount, Mode=TwoWay}" />
140+
</dev:SettingsCard>
141+
<dev:SettingsCard Header="Animation Duration">
142+
<Slider Maximum="2000" Minimum="0" Value="{x:Bind MyBetterLyric.LyricsFloatAnimationDuration, Mode=TwoWay}" />
143+
</dev:SettingsCard>
144+
</dev:SettingsExpander.Items>
145+
</dev:SettingsExpander>
146+
147+
<dev:SettingsExpander Header="Fan">
148+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.IsFanLyricsEnabled, Mode=TwoWay}" />
149+
<dev:SettingsExpander.Items>
150+
<dev:SettingsCard IsEnabled="{x:Bind MyBetterLyric.IsFanLyricsEnabled, Mode=OneWay}">
151+
<Slider Maximum="90" Minimum="-90" Value="{x:Bind MyBetterLyric.FanLyricsAngle, Mode=TwoWay}" />
152+
</dev:SettingsCard>
153+
</dev:SettingsExpander.Items>
154+
</dev:SettingsExpander>
155+
156+
<dev:SettingsExpander Header="3D Lyrics">
157+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.Is3DLyricsEnabled, Mode=TwoWay}" />
158+
<dev:SettingsExpander.Items>
159+
<dev:SettingsCard Header="X" IsEnabled="{x:Bind MyBetterLyric.Is3DLyricsEnabled, Mode=OneWay}">
160+
<Slider Maximum="90" Minimum="-90" Value="{x:Bind MyBetterLyric.Lyrics3DXAngle, Mode=TwoWay}" />
161+
</dev:SettingsCard>
162+
<dev:SettingsCard Header="Y" IsEnabled="{x:Bind MyBetterLyric.Is3DLyricsEnabled, Mode=OneWay}">
163+
<Slider Maximum="90" Minimum="-90" Value="{x:Bind MyBetterLyric.Lyrics3DYAngle, Mode=TwoWay}" />
164+
</dev:SettingsCard>
165+
<dev:SettingsCard Header="Z" IsEnabled="{x:Bind MyBetterLyric.Is3DLyricsEnabled, Mode=OneWay}">
166+
<Slider Maximum="90" Minimum="-90" Value="{x:Bind MyBetterLyric.Lyrics3DZAngle, Mode=TwoWay}" />
167+
</dev:SettingsCard>
168+
<dev:SettingsCard Header="3D Lyrics Auto Fit Layout">
169+
<ToggleSwitch IsOn="{x:Bind MyBetterLyric.Lyrics3DAutoFitLayout, Mode=TwoWay}" />
170+
</dev:SettingsCard>
171+
<dev:SettingsCard Header="3D Lyrics Depth" IsEnabled="{x:Bind MyBetterLyric.Is3DLyricsEnabled, Mode=OneWay}">
172+
<Slider Maximum="1000" Minimum="100" StepFrequency="10" Value="{x:Bind MyBetterLyric.Lyrics3DDepth, Mode=TwoWay}" />
173+
</dev:SettingsCard>
174+
</dev:SettingsExpander.Items>
175+
</dev:SettingsExpander>
176+
177+
<dev:SettingsExpander Header="Scroll Easing">
178+
<ComboBox x:Name="CmbLyricsScrollEasingType" SelectionChanged="CmbLyricsScrollEasingType_SelectionChanged">
179+
<ComboBoxItem Content="Linear" Tag="Linear" />
180+
<ComboBoxItem Content="SmoothStep" Tag="SmoothStep" />
181+
<ComboBoxItem Content="Sine" Tag="Sine" />
182+
<ComboBoxItem Content="Quad" Tag="Quad" />
183+
<ComboBoxItem Content="Cubic" Tag="Cubic" />
184+
<ComboBoxItem Content="Quart" Tag="Quart" />
185+
<ComboBoxItem Content="Quint" Tag="Quint" />
186+
<ComboBoxItem Content="Expo" Tag="Expo" />
187+
<ComboBoxItem Content="Circle" Tag="Circle" />
188+
<ComboBoxItem Content="Back" Tag="Back" />
189+
<ComboBoxItem Content="Elastic" Tag="Elastic" />
190+
<ComboBoxItem Content="Bounce" Tag="Bounce" />
191+
</ComboBox>
192+
<dev:SettingsExpander.Items>
193+
<dev:SettingsCard Header="Easing Mode">
194+
<ComboBox x:Name="CmbLyricsScrollEasingMode" SelectionChanged="CmbLyricsScrollEasingMode_SelectionChanged">
195+
<ComboBoxItem Content="In" Tag="In" />
196+
<ComboBoxItem Content="Out" Tag="Out" />
197+
<ComboBoxItem Content="InOut" Tag="InOut" />
198+
</ComboBox>
199+
</dev:SettingsCard>
200+
<dev:SettingsCard Header="Scroll Top Duration">
201+
<Slider Maximum="1000" Minimum="0" StepFrequency="50" Value="{x:Bind MyBetterLyric.LyricsScrollTopDuration, Mode=TwoWay}" />
202+
</dev:SettingsCard>
203+
<dev:SettingsCard Header="Scroll Duration">
204+
<Slider Maximum="1000" Minimum="0" StepFrequency="50" Value="{x:Bind MyBetterLyric.LyricsScrollDuration, Mode=TwoWay}" />
205+
</dev:SettingsCard>
206+
<dev:SettingsCard Header="Scroll Bottom Duration">
207+
<Slider Maximum="1000" Minimum="0" StepFrequency="50" Value="{x:Bind MyBetterLyric.LyricsScrollBottomDuration, Mode=TwoWay}" />
208+
</dev:SettingsCard>
209+
<dev:SettingsCard Header="Scroll Top Delay">
210+
<Slider Maximum="2000" Minimum="0" StepFrequency="50" Value="{x:Bind MyBetterLyric.LyricsScrollTopDelay, Mode=TwoWay}" />
211+
</dev:SettingsCard>
212+
<dev:SettingsCard Header="Scroll Bottom Delay">
213+
<Slider Maximum="2000" Minimum="0" StepFrequency="50" Value="{x:Bind MyBetterLyric.LyricsScrollBottomDelay, Mode=TwoWay}" />
214+
</dev:SettingsCard>
215+
</dev:SettingsExpander.Items>
216+
</dev:SettingsExpander>
217+
</StackPanel>
218+
</ScrollViewer>
219+
</Grid>
220+
</local:ControlExample>
221+
</StackPanel>
222+
</ScrollViewer>
223+
</Page>

0 commit comments

Comments
 (0)