WPF開發者QQ群： 340500857
前言
需要實作類似音樂播放器字幕滾動影片，
歡迎轉發、分享、點贊，謝謝大家~，
效果預覽（更多效果請下載原始碼體驗）：
一、TextBlockCustomControl.cs代碼如下：
public class TextBlockCustomControl : TextBlock { public static readonly DependencyProperty DurationProperty = DependencyProperty.Register("Duration", typeof(TimeSpan), typeof(TextBlockCustomControl), new PropertyMetadata(TimeSpan.FromSeconds(1))); public TimeSpan Duration { get { return (TimeSpan)GetValue(DurationProperty); } set { SetValue(DurationProperty, value); } } public TimeSpan StartDuration { get { return (TimeSpan)GetValue(StartDurationProperty); } set { SetValue(StartDurationProperty, value); } } public static readonly DependencyProperty StartDurationProperty = DependencyProperty.Register("StartDuration", typeof(TimeSpan), typeof(TextBlockCustomControl), new PropertyMetadata(TimeSpan.FromSeconds(1))); public TextBlockCustomControl() { NameScope.SetNameScope(this, new NameScope()); var gradientBrush = new LinearGradientBrush(); gradientBrush.EndPoint = new Point(1, 0.5); gradientBrush.StartPoint = new Point(0, 0.5); var stop1 = new GradientStop(Colors.White, 0); var stop2 = new GradientStop(Colors.White, 1); var stop3 = new GradientStop(Colors.Gray, 1); this.RegisterName("GradientStop1", stop1); this.RegisterName("GradientStop2", stop2); this.RegisterName("GradientStop3", stop3); gradientBrush.GradientStops.Add(stop1); gradientBrush.GradientStops.Add(stop2); gradientBrush.GradientStops.Add(stop3); this.Foreground = gradientBrush; this.Loaded += (s, e) => { Animate(); }; } public override void OnApplyTemplate() { base.OnApplyTemplate(); } private void Animate() { var storyboard = new Storyboard(); var animation1 = new DoubleAnimation(); animation1.From = 0; animation1.To = 1; animation1.Duration = Duration; animation1.BeginTime = StartDuration; Storyboard.SetTargetName(animation1, "GradientStop2"); Storyboard.SetTargetProperty(animation1, new PropertyPath(GradientStop.OffsetProperty)); var animation2 = new DoubleAnimation(); animation2.From = 0; animation2.To = 1; animation2.Duration = Duration; animation2.BeginTime = StartDuration; Storyboard.SetTargetName(animation2, "GradientStop3"); Storyboard.SetTargetProperty(animation2, new PropertyPath(GradientStop.OffsetProperty)); storyboard.Children.Add(animation1); storyboard.Children.Add(animation2); storyboard.Begin(this); } }
二、MainWindow.xaml代碼如下：
<Window x:Class="WPFSongWords.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell" xmlns:local="clr-namespace:WPFSongWords" mc:Ignorable="d" Title="WPFDevelopers" Height="650" Width="400" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" TextOptions.TextFormattingMode="Display" UseLayoutRounding="True" SnapsToDevicePixels="True" WindowStyle="None" Background="Transparent" Foreground="White" FontSize="14"> <Window.Resources> <LinearGradientBrush x:Key="DefaultBackgroundBrush" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FF33B9AD" Offset="0" /> <GradientStop Color="#FF007ACC" Offset="1" /> </LinearGradientBrush> </Window.Resources> <shell:WindowChrome.WindowChrome> <shell:WindowChrome GlassFrameThickness="-1" CaptionHeight="40"/> </shell:WindowChrome.WindowChrome> <Grid> <Border Background="{StaticResource DefaultBackgroundBrush}" UseLayoutRounding="True" SnapsToDevicePixels="True" Margin="10"> <Border.Effect> <DropShadowEffect ShadowDepth="1" BlurRadius="6" Direction="270" Opacity="0.75" Color="#FF211613"/> </Border.Effect> </Border> <Grid Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition Height="60"/> </Grid.RowDefinitions> <Grid Height="40" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBlock Text="WPF開發者" VerticalAlignment="Center" Padding="10,0" FontSize="16"/> <Button Grid.Column="1" Style="{StaticResource CloseButton}" Width="30" Click="BtnCloseClick"> <Button.Content> <Path Data=https://www.cnblogs.com/yanjinhua/archive/2021/06/09/"{StaticResource ClosePath}" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" Height="12" Width="12" Stretch="Uniform" StrokeThickness="0"/> </Button.Content> </Button> </Grid> <StackPanel HorizontalAlignment="Center" Grid.Row="1"> <TextBlock Text="中華人民共和國國歌" HorizontalAlignment="Center" FontSize="20" Margin="0,10"/> <ItemsControl ItemsSource="{Binding MusicWordArray,RelativeSource={RelativeSource AncestorType=local:MainWindow}}"> <ItemsControl.ItemTemplate> <DataTemplate> <local:TextBlockCustomControl Text="{Binding SongWords}" StartDuration="{Binding StarTime}" Duration="{Binding RunTime}" Block.TextAlignment="Center" FontSize="15" Margin="0,4"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </Grid> </Grid> </Window>
三、MainWindow.xaml.cs代碼如下：
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPFSongWords { /// <summary> /// MainWindow.xaml 的互動邏輯 /// </summary> public partial class MainWindow : Window { public IEnumerable MusicWordArray { get { return (IEnumerable)GetValue(MusicWordArrayProperty); } set { SetValue(MusicWordArrayProperty, value); } } public static readonly DependencyProperty MusicWordArrayProperty = DependencyProperty.Register("MusicWordArray", typeof(IEnumerable), typeof(MainWindow), new PropertyMetadata(null)); public MainWindow() { InitializeComponent(); this.Loaded += MainWindow_Loaded; } private void MainWindow_Loaded(object sender, RoutedEventArgs e) { var musicWords = new List<MusicWord>(); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(1), StarTime = TimeSpan.FromSeconds(0), SongWords = "作詞 : 田漢" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(1), StarTime = TimeSpan.FromSeconds(1), SongWords = "作曲 : 聶耳" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(2), SongWords = "起來！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(2), StarTime = TimeSpan.FromSeconds(2.5), SongWords = "不愿做奴隸的人們！！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(4), StarTime = TimeSpan.FromSeconds(4.5), SongWords = "把我們的血肉，筑成我們新的長城！"}); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(3), StarTime = TimeSpan.FromSeconds(8.5), SongWords = "中華民族到了最危險的時候，" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(3.5), StarTime = TimeSpan.FromSeconds(11.5), SongWords = "每個人被迫著發出最后的吼聲，" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(15), SongWords = "起來！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(15.5), SongWords = "起來！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(16), SongWords = "起來！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(4.5), StarTime = TimeSpan.FromSeconds(16.5), SongWords = "我們萬眾一心，冒著敵人的炮火前進！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(2), StarTime = TimeSpan.FromSeconds(21), SongWords = "冒著敵人的炮火前進！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(23), SongWords = "前進！" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(23.5), SongWords = "前進！進！" }); MusicWordArray = musicWords; } private void BtnCloseClick(object sender, RoutedEventArgs e) { Close(); } } public class MusicWord { public TimeSpan RunTime { get; set; } public TimeSpan StarTime { get; set; } public string SongWords { get; set; } } }
更多教程歡迎關注微信公眾號：
WPF開發者QQ群： 340500857
blogs： https://www.cnblogs.com/yanjinhua/p/14345136.html
原始碼Github：https://github.com/yanjinhuagood/WPFDevelopers.git
gitee：https://gitee.com/yanjinhua/WPFDevelopers.git
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/285393.html
標籤：.NET技术