基于<MediaElement>的WPF视频播放器（带部分特效）【2】

一、前言

上回说到需要做放视频的使用向导，这两天公司里的老司机一直帮我答疑解惑，让这个任务变得挺顺的，真心感谢他们！

这次与【1】中的不同之处在于：

（1）播放和暂停按钮集成在<MediaElement>的点击事件之中，点一下是播放，再点一下是暂停

（2）加入了微软官方改写的粒子特效

（3）加上了自己琢磨的按钮旋转效果，以及按钮弹出popup效果

（4）进度条改善美观

二、代码

前台：

 <Window

         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:local="clr-namespace:WPF_Nav"

         xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" x:Class="WPF_Nav.MainWindow"

         mc:Ignorable="d"

         Title="MainWindow" Height="" Width="" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation ="CenterScreen" Loaded="Window_Loaded">

     <Window.Resources>

         <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">

             <GradientStop Offset="0.5" Color="#00b3fe"/>

         </LinearGradientBrush>

         <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">

             <GradientStop Offset="" Color="#FFD9D3E8"/>

         </LinearGradientBrush>

         <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">

             <Setter Property="Focusable" Value="false" />

             <Setter Property="Height" Value=""/>

             <Setter Property="BorderBrush" Value="Transparent"/>

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate TargetType="RepeatButton">

                         <Border Background="{StaticResource SliderBackground}" />

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">

             <Setter Property="Focusable" Value="false" />

             <Setter Property="Height" Value=""/>

             <Setter Property="BorderBrush" Value="Transparent"/>

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate TargetType="RepeatButton">

                         <Border Background="Silver" />

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="Slider_Thumb" TargetType="Thumb">

             <Setter Property="Focusable" Value="false" />

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate TargetType="Thumb">

                         <Ellipse Name="e" Width="" Height="" Fill="White" Stroke="Gray"/>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style  TargetType="Slider">

             <Setter Property="Focusable" Value="false" />

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate TargetType="Slider">

                         <Grid>

                             <Border BorderBrush="Red" BorderThickness="" CornerRadius="0,0,0,0">

                                 <Track  Name="PART_Track">

                                     <Track.DecreaseRepeatButton>

                                         <RepeatButton Style="{StaticResource Slider_RepeatButton}" Command="Slider.DecreaseLarge"/>

                                     </Track.DecreaseRepeatButton>

                                     <Track.IncreaseRepeatButton>

                                         <RepeatButton Style="{StaticResource Slider_RepeatButton1}" Command="Slider.IncreaseLarge"/>

                                     </Track.IncreaseRepeatButton>

                                     <Track.Thumb>

                                         <Thumb Style="{StaticResource Slider_Thumb}"/>

                                     </Track.Thumb>

                                 </Track>

                             </Border>

                         </Grid>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="Button_Close" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Close.jpg"></Image>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="Button_Forbidden" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Forbidden.jpg"></Image>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="Button_Left" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Left.png" Stretch="Fill"></Image>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="Button_Right" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Right.png" Stretch="Fill"></Image>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

     </Window.Resources>

     <Grid Name="Main_Grid">

         <Grid.RowDefinitions>

             <RowDefinition Height=""></RowDefinition>

             <RowDefinition Height=""></RowDefinition>

             <RowDefinition Height=""></RowDefinition>

         </Grid.RowDefinitions>

         <Border Name="title_Border" BorderBrush="#FBD3D0CD" BorderThickness="" Grid.Row="">

             <Grid Name="Title">

                 <Grid.ColumnDefinitions>

                     <ColumnDefinition Width=""></ColumnDefinition>

                     <ColumnDefinition Width=""></ColumnDefinition>

                     <ColumnDefinition Width=""></ColumnDefinition>

                     <ColumnDefinition Width=""></ColumnDefinition>

                 </Grid.ColumnDefinitions>

                 <Grid Grid.Column="">

                     <Canvas x:Name="ParticleHost" Width="" >

                         <TextBlock Name="txtB_Step" Grid.Column=""  Width="" Height="" TextAlignment="Center" FontSize="" FontFamily="Microsoft YaHei" Text="asss" Margin="100,7,0,0"/>

                     </Canvas>

                 </Grid>

                 <Grid Name="grid_Cofig" Grid.Column="">

                 <Button Name="btn_Forbidden"  Width="" Click="Config_Click" Margin="2,10,48,12" HorizontalAlignment="Center"  Focusable="False" Style="{StaticResource Button_Forbidden}" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="播放设置"  ToolTipService.InitialShowDelay="" ToolTipService.Placement="Bottom">

                     <Button.RenderTransform>

                         <RotateTransform x:Name="trans_forbidden" Angle=""/>

                     </Button.RenderTransform>

                     <Button.Triggers>

                         <EventTrigger RoutedEvent="Button.MouseEnter">

                             <BeginStoryboard >

                                 <Storyboard>

                                     <DoubleAnimation From="" To=""  Duration="0:0:0.4"

                                              Storyboard.TargetName="trans_forbidden"

                                              Storyboard.TargetProperty="Angle"/>

                                 </Storyboard>

                             </BeginStoryboard>

                         </EventTrigger>

                     </Button.Triggers>

                 </Button>

                 </Grid>

                 <Popup x:Name="Pop" PopupAnimation="Slide" Placement="Bottom"  Width="" Height="" PlacementTarget="{Binding ElementName=grid_Cofig}" AllowsTransparency="True" StaysOpen="False" IsOpen="False" >

                     <Border Background="White"  BorderBrush="#FFC4C9CD" BorderThickness="" Width="">

                         <StackPanel Margin="">

                             <StackPanel Name="sp_play" Orientation="Horizontal" Width="" Height="" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="" MouseEnter="sp_play_enter" MouseLeave="sp_play_leave" >

                                 <CheckBox x:Name="ch_play" VerticalAlignment="Center" Margin="3,4" />

                                 <TextBlock x:Name="txb_play" Text="不再播放" Margin="5,0" VerticalAlignment="Center"/>

                             </StackPanel>

                             <StackPanel Name="sp_doc" Width="" Height="" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="" MouseEnter="sp_doc_enter" MouseLeave="sp_doc_leave">

                                 <TextBlock Name="txb_Doc" Text="官方帮助文档" Margin="4,0,5,0" VerticalAlignment="Center">

                                 </TextBlock>

                             </StackPanel>

                         </StackPanel>

                     </Border>

                 </Popup>

                 <Button Name="btn_Close" Grid.Column="" Width="" Click="Close_Click" Margin="37,10,13,12" HorizontalAlignment="Center"  Focusable="False" Style="{StaticResource Button_Close}" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="关闭视频"  ToolTipService.InitialShowDelay="" ToolTipService.Placement="Bottom">

                     <Button.RenderTransform>

                         <RotateTransform x:Name="trans" Angle=""/>

                     </Button.RenderTransform>

                     <Button.Triggers>

                         <EventTrigger RoutedEvent="Button.MouseEnter">

                             <BeginStoryboard >

                                 <Storyboard>

                                     <DoubleAnimation From="" To=""  Duration="0:0:0.4"

                                              Storyboard.TargetName="trans"

                                              Storyboard.TargetProperty="Angle"/>

                                 </Storyboard>

                             </BeginStoryboard>

                         </EventTrigger>

                     </Button.Triggers>

                 </Button>

             </Grid>

         </Border>

         <Grid Name="Movie" Grid.Row="">

             <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" MouseLeftButtonDown="QS_Movie_MouseLeftButtonDown" />

             <Button Name="btn_pre" Width="" Height="" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click"  Focusable="False"  Style="{StaticResource Button_Left}"/>

             <Button Name="btn_next" Width="" Height="" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click" Focusable="False" Style="{StaticResource Button_Right}"/>

         </Grid>

         <Border Name="Progress_Border" BorderBrush="#FBD3D0CD" BorderThickness="" Grid.Row="">

             <Grid Name="Control_Progress" >

                 <Slider Grid.Column="" Width="" Name="timelineSlider" VerticalAlignment="Center"  PreviewMouseLeftButtonDown="timelineMDown"  PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,6,0,0" />

             </Grid>

         </Border>

     </Grid>

 </Window>

后台：

 using System.Windows.Media;

 using System.Windows.Media.Effects;

 using System.Windows.Shapes;

 namespace WPF_Nav

 {

     public class Particle

     {

         public Point3D Position { get; set; }

         public Point3D Velocity { get; set; }

         public double Size { get; set; }

         public Ellipse Ellipse { get; set; }

         public BlurEffect Blur { get; set; }

         public Brush Brush { get; set; }

     }

 }

 namespace WPF_Nav

 {

     public class Point3D

     {

         public double X { get; set; }

         public double Y { get; set; }

         public double Z { get; set; }

         public Point3D(double X, double Y, double Z)

         {

             this.X = X;

             this.Y = Y;

             this.Z = Z;

         }

     }

 }

主体：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Text;

 using System.Threading.Tasks;

 using System.Windows;

 using System.Windows.Controls;

 using System.Windows.Controls.Primitives;

 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;

 using System.Windows.Threading;

 using System.Windows.Media.Effects;

 namespace WPF_Nav

 {

     /// <summary>

     /// MainWindow.xaml 的交互逻辑

     /// </summary>

     public partial class MainWindow : Window

     {

         DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT

         bool play_flag = true;  //判断播放状态

         int play_now = ;       //判断当前视频索引

         int play_target;

         List<string> Play_Video = new List<string>();

         List<string> Title_Video = new List<string>();

         public MainWindow()

         {

             InitializeComponent();

             Play_Video = LoadMovies();

             Title_Video = LoadTitles();

         }

         private List<string> LoadTitles()

         {

             List<string> list_title = new List<string>();

             list_title.Add("Step1");

             list_title.Add("Step2");

             list_title.Add("Step3");

             return list_title;

         }

         private List<string> LoadMovies()

         {

             List<string> Movie_Uri = new List<string>();

             Movie_Uri.Add(@"E:\Test\WPFTest\Sources\preview.mp4");

             Movie_Uri.Add(@"E:\Test\WPFTest\Sources\preview1.mp4");

             Movie_Uri.Add(@"E:\Test\WPFTest\Sources\preview2.mp4");

             return Movie_Uri;

         }

         private void Play_Click(object sender, RoutedEventArgs e)

         {

             QS_Movie.Play();

         }

         private void Pause_Click(object sender, RoutedEventArgs e)

         {

             QS_Movie.Pause();

         }

         private void Element_MediaOpened(object sender, EventArgs e)

         {

             timelineSlider.Maximum = QS_Movie.NaturalDuration.TimeSpan.TotalMilliseconds;  //设置slider最大值

             dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); //超过计时间隔时发生

             dispatcherTimer.Interval = new TimeSpan(, , , , ); //DT间隔

             dispatcherTimer.Start(); //DT启动

         }

         private void dispatcherTimer_Tick(object sender, EventArgs e)

         {

             int time = (int)QS_Movie.Position.TotalSeconds;

             timelineSlider.ToolTip = SecToTime(time);

             timelineSlider.Value = QS_Movie.Position.TotalMilliseconds; //slider滑动值随播放内容位置变化

         }

         private string SecToTime(int sec)

         {

             int min = sec / ;

             sec = sec - min * ;

             int hour = min / ;

             min = min - hour * ;

             string h = hour.ToString();

             string mm = ((min < ) ? "" : "") + min.ToString();

             string ss = ((sec < ) ? "" : "") + sec.ToString();

             string time = h + ":" + mm + ":" + ss;

             return time;

         }

         private void timelineMDown(object sender, EventArgs e)

         {

             dispatcherTimer.Stop();

         }

         private void timelineMUp(object sender, EventArgs e)

         {

             QS_Movie.Position = new TimeSpan(, , , , (int)timelineSlider.Value);

             dispatcherTimer.Start();

             QS_Movie.Play();

         }

         private void QS_Movie_Loaded(object sender, RoutedEventArgs e)

         {

             PreLoad(,play_now);

         }

         private void Left_Click(object sender, RoutedEventArgs e)

         {

                 play_target = (play_now + Play_Video.Count-) % Play_Video.Count;

                 PreLoad(, play_target);

                 play_now = play_target;

         }

         private void Right_Click(object sender, RoutedEventArgs e)

         {

                play_target = (play_now + ) % Play_Video.Count;

                PreLoad(, play_target);

                play_now = play_target;

         }

         private void PreLoad(int interval, int index)

         {

             QS_Movie.Source = new Uri(Play_Video[index]);

             QS_Movie.Play();

             System.Threading.Thread.Sleep(interval);

             QS_Movie.Pause();

             txtB_Step.Text = Title_Video[index];

         }

         private void QS_Movie_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

         {

             if(play_flag==true)

             {

                 QS_Movie.Play();

                 btn_pre.Visibility = System.Windows.Visibility.Hidden;

                 btn_next.Visibility = btn_pre.Visibility = System.Windows.Visibility.Hidden;

             }

             if(play_flag==false)

             {

                 QS_Movie.Pause();

                 btn_pre.Visibility = System.Windows.Visibility.Visible;

                 btn_next.Visibility = System.Windows.Visibility.Visible;

             }

             play_flag = !play_flag;

         }

         private void Close_Click(object sender, RoutedEventArgs e)

         {

             this.Close();

         }

         private void Config_Click(object sender, RoutedEventArgs e)

         {

             this.Pop.IsOpen = true;

         }

         private void sp_play_enter(object sender, MouseEventArgs e)

         {

             Brush br_bg = new SolidColorBrush(Color.FromRgb(, , ));

             Brush br_white = new SolidColorBrush(Color.FromRgb(, , ));

             txb_play.Foreground = br_white;

             sp_play.Background = br_bg;

         }

         private void sp_play_leave(object sender, MouseEventArgs e)

         {

             Brush br_white = new SolidColorBrush(Color.FromRgb(, , ));

             Brush br_black = new SolidColorBrush(Color.FromRgb(, , ));

             txb_play.Foreground = br_black;

             sp_play.Background = br_white;

         }

         private void sp_doc_enter(object sender, MouseEventArgs e)

         {

             Brush br_bg = new SolidColorBrush(Color.FromRgb(, , ));

             Brush br_white = new SolidColorBrush(Color.FromRgb(, , ));

             txb_Doc.Foreground = br_white;

             sp_doc.Background = br_bg;

         }

         private void sp_doc_leave(object sender, MouseEventArgs e)

         {

             Brush br_white = new SolidColorBrush(Color.FromRgb(, , ));

             Brush br_black = new SolidColorBrush(Color.FromRgb(, , ));

             txb_Doc.Foreground = br_black;

             sp_doc.Background = br_white;

         }

         /// <summary>

         /// 特效部分

         /// </summary>

         List<Particle> particles = new List<Particle>();

         List<Particle> deadList = new List<Particle>();

         Random random = new Random();

         private void Window_Loaded(object sender, RoutedEventArgs e)

         {

             timer.Interval = TimeSpan.FromMilliseconds();

             timer.Tick += new EventHandler(timer_Tick);

             timer.Start();

         }

         void timer_Tick(object sender, EventArgs e)

         {

             UpdateParticules();

         }

         DispatcherTimer timer = new DispatcherTimer();

         double elapsed = 0.1;

         private void UpdateParticules()

         {

             //更新粒子信息

             deadList.Clear();

             foreach (Particle p in this.particles)

             {

                 if (p.Position.Y < -p.Size || p.Position.X < -p.Size || p.Position.X > Width + p.Size)

                 {

                     deadList.Add(p);

                 }

                 else

                 {

                     //更新位置

                     p.Position.X += p.Velocity.X * elapsed;

                     p.Position.Y += p.Velocity.Y * elapsed;

                     p.Position.Z += p.Velocity.Z * elapsed;

                     TranslateTransform t = (p.Ellipse.RenderTransform as TranslateTransform);

                     t.X = p.Position.X;

                     t.Y = p.Position.Y;

                     //更新颜色信息

                     p.Ellipse.Fill = p.Brush;

                     p.Ellipse.Effect = p.Blur;

                 }

             }

             //创建新的粒子

             for (int i = ; i <  && this.particles.Count < ; i++)

             {

                 //尝试循环使用已有例子

                 if (deadList.Count -  >= i)

                 {

                     SpawnParticle(deadList[i].Ellipse);

                     deadList[i].Ellipse = null;

                 }

                 else

                 {

                     SpawnParticle(null);

                 }

             }

             foreach (Particle p in deadList)

             {

                 if (p.Ellipse != null) ParticleHost.Children.Remove(p.Ellipse);

                 this.particles.Remove(p);

             }

         }

         private void SpawnParticle(Ellipse e)

         {

             double x = RandomWithVariance(Width / , Width / );

             double y = Height;

             double z =  * (random.NextDouble() * );

             double speed = RandomWithVariance(, );

             double size = RandomWithVariance(,);

             Particle p = new Particle();

             p.Position = new Point3D(x, y, z);

             p.Size = size;

             //模糊

             var blur = new BlurEffect();

             blur.RenderingBias = RenderingBias.Performance;

             blur.Radius = RandomWithVariance(, );

             p.Blur = blur;

             //颜色

             var brush = (Brush)Brushes.Lime.Clone();

             brush.Opacity = RandomWithVariance(0.6, 0.5);

             p.Brush = brush;

             TranslateTransform t;

             if (e != null)

             {

                 e.Fill = null;

                 e.Width = e.Height = size;

                 p.Ellipse = e;

                 t = e.RenderTransform as TranslateTransform;

             }

             else

             {

                 p.Ellipse = new Ellipse();

                 p.Ellipse.Width = p.Ellipse.Height = size;

                 this.ParticleHost.Children.Add(p.Ellipse);

                 t = new TranslateTransform();

                 p.Ellipse.RenderTransform = t;

                 p.Ellipse.RenderTransformOrigin = new Point(0.5, 0.5);

             }

             t.X = p.Position.X;

             t.Y = p.Position.Y;

             double velocityMultiplier = (random.NextDouble() + 0.25) * speed;

             double vX = (1.0 - (random.NextDouble() * 2.0)) * velocityMultiplier;

             double vY = -Math.Abs((1.0 - (random.NextDouble() * 2.0)) * velocityMultiplier);

             p.Velocity = new Point3D(vX, vY, );

             this.particles.Add(p);

         }

         private double RandomWithVariance(double midvalue, double variance)

         {

             double min = Math.Max(midvalue - (variance / ), );

             double max = midvalue + (variance / );

             double value = min + ((max - min) * random.NextDouble());

             return value;

         }

     }

 }

三、效果

基于<MediaElement>的WPF视频播放器（带部分特效）【2】

四、小结

WPF挺好玩的！前台就能解决一些基本的动画效果，加上后台简直爽。最后，感谢单位的老司机们！

秒客网

基于的WPF视频播放器（带部分特效）【2】

相关文章