【MediaElement】WPF视频播放器【3】

一、前言

对于<MediaElement>前两章介绍了差不多了，其实好的界面还需要UI工程师的配合，比如帮忙设计下按钮的样式等等。同样视频本身也需要吸引人，不然做的再好的播放器也没用。之后，我对代码进行了下小修改，粒子特效那部分就不再放了。

二、代码

前台代码

  1 <Window
  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6         xmlns:local="clr-namespace:WPF_Nav"
  7         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"
  8         mc:Ignorable="d"
  9         Title="MainWindow" Height="600" Width="800" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation ="CenterScreen" Loaded="Window_Loaded">
 10 
 11     <Window.Resources>
 12         <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">
 13             <GradientStop Offset="0.5" Color="#00b3fe"/>
 14         </LinearGradientBrush>
 15         <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">
 16             <GradientStop Offset="0" Color="#FFD9D3E8"/>
 17         </LinearGradientBrush>
 18 
 19         <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">
 20             <Setter Property="Focusable" Value="false" />
 21             <Setter Property="Height" Value="5"/>
 22             <Setter Property="BorderBrush" Value="Transparent"/>
 23             <Setter Property="Template">
 24                 <Setter.Value>
 25                     <ControlTemplate TargetType="RepeatButton">
 26                         <Border Background="{StaticResource SliderBackground}" />
 27                     </ControlTemplate>
 28                 </Setter.Value>
 29             </Setter>
 30         </Style>
 31 
 32         <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">
 33             <Setter Property="Focusable" Value="false" />
 34             <Setter Property="Height" Value="5"/>
 35             <Setter Property="BorderBrush" Value="Transparent"/>
 36             <Setter Property="Template">
 37                 <Setter.Value>
 38                     <ControlTemplate TargetType="RepeatButton">
 39                         <Border Background="Silver" />
 40                     </ControlTemplate>
 41                 </Setter.Value>
 42             </Setter>
 43         </Style>
 44 
 45         <Style x:Key="Slider_Thumb" TargetType="Thumb">
 46             <Setter Property="Focusable" Value="false" />
 47             <Setter Property="Template">
 48                 <Setter.Value>
 49                     <ControlTemplate TargetType="Thumb">
 50                         <Ellipse Name="e" Width="15" Height="15" Fill="White" Stroke="Gray"/>
 51                     </ControlTemplate>
 52                 </Setter.Value>
 53             </Setter>
 54         </Style>
 55 
 56         <Style  TargetType="Slider">
 57             <Setter Property="Focusable" Value="false" />
 58             <Setter Property="Template">
 59                 <Setter.Value>
 60                     <ControlTemplate TargetType="Slider">
 61                         <Grid>
 62                             <Border BorderBrush="Red" BorderThickness="0" CornerRadius="0,0,0,0">
 63                                 <Track  Name="PART_Track">
 64                                     <Track.DecreaseRepeatButton>
 65                                         <RepeatButton Style="{StaticResource Slider_RepeatButton}" Command="Slider.DecreaseLarge"/>
 66                                     </Track.DecreaseRepeatButton>
 67                                     <Track.IncreaseRepeatButton>
 68                                         <RepeatButton Style="{StaticResource Slider_RepeatButton1}" Command="Slider.IncreaseLarge"/>
 69                                     </Track.IncreaseRepeatButton>
 70                                     <Track.Thumb>
 71                                         <Thumb Style="{StaticResource Slider_Thumb}"/>
 72                                     </Track.Thumb>
 73                                 </Track>
 74                             </Border>
 75                         </Grid>
 76                     </ControlTemplate>
 77                 </Setter.Value>
 78             </Setter>
 79         </Style>
 80 
 81 
 82         <Style x:Key="Button_Close" TargetType="Button">
 83             <Setter Property="Template">
 84                 <Setter.Value>
 85                     <ControlTemplate>
 86                         <Image x:Name="IMG" Source="Resourcesimagescancel.png"></Image>
 87                         <ControlTemplate.Triggers>
 88                             <Trigger Property="IsMouseOver" Value="True">
 89                                 <Setter TargetName="IMG" Property="Source" Value="Resourcesimagescancel_hover.png"></Setter>
 90                             </Trigger>
 91                         </ControlTemplate.Triggers>
 92                     </ControlTemplate>
 93                 </Setter.Value>
 94             </Setter>
 95         </Style>
 96 
 97         <Style x:Key="Button_Left" TargetType="Button">
 98             <Setter Property="Template">
 99                 <Setter.Value>
100                     <ControlTemplate>
101                         <Image x:Name="IMG" Source="Resourcesimagesleft.png" Stretch="Fill"></Image>
102                         <ControlTemplate.Triggers>
103                             <Trigger Property="IsMouseOver" Value="True">
104                                 <Setter TargetName="IMG" Property="Source" Value="Resourcesimagesleft_hover.png"></Setter>
105                             </Trigger>
106                         </ControlTemplate.Triggers>
107                     </ControlTemplate>
108                 </Setter.Value>
109             </Setter>
110         </Style>
111 
112 
113         <Style x:Key="Button_Right" TargetType="Button">
114             <Setter Property="Template">
115                 <Setter.Value>
116                     <ControlTemplate>
117                         <Image x:Name="IMG" Source="Resourcesimages
ight.png" Stretch="Fill"></Image>
118                         <ControlTemplate.Triggers>
119                             <Trigger Property="IsMouseOver" Value="True">
120                                 <Setter TargetName="IMG" Property="Source" Value="Resourcesimages
ight_hover.png"></Setter>
121                             </Trigger>
122                         </ControlTemplate.Triggers>
123                     </ControlTemplate>
124                 </Setter.Value>
125             </Setter>
126         </Style>
127 
128     </Window.Resources>
129 
130     <Grid Name="Main_Grid" MouseLeftButtonDown="Main_Drag">
131         <Grid.RowDefinitions>
132             <RowDefinition Height="50"></RowDefinition>
133             <RowDefinition Height="500"></RowDefinition>
134             <RowDefinition Height="50"></RowDefinition>
135         </Grid.RowDefinitions>
136 
137         <Border Name="title_Border" BorderBrush="#FBD3D0CD" BorderThickness="3" Grid.Row="0">
138             <Grid Name="Title">
139                 <Grid.ColumnDefinitions>
140                     <ColumnDefinition Width="200"></ColumnDefinition>
141                     <ColumnDefinition Width="400"></ColumnDefinition>
142                     <ColumnDefinition Width="120"></ColumnDefinition>
143                     <ColumnDefinition Width="80"></ColumnDefinition>
144                 </Grid.ColumnDefinitions>
145 
146                 <Grid Grid.Column="0">
147                     <Image Source="Resourcesimageslogo.png" Stretch="Uniform" Margin="10,0,20,0" ></Image>
148                 </Grid>
149                 <Grid Grid.Column="1">
150                     <Canvas x:Name="ParticleHost" Width="400" >
151                         <TextBlock Name="txtB_Step" Grid.Column="1"  Width="200" Height="30" TextAlignment="Center" FontSize="20" FontFamily="Microsoft YaHei"  Margin="100,7,0,0" ToolTip="左键单击视频—播放/暂停"/>
152                     </Canvas>
153                 </Grid>
154 
155                 <Button Name="btn_Close" Grid.Column="3" Width="30" 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="1" ToolTipService.Placement="Bottom">
156                     <Button.RenderTransform>
157                         <RotateTransform x:Name="trans" Angle="0"/>
158                     </Button.RenderTransform>
159                     <Button.Triggers>
160                         <EventTrigger RoutedEvent="Button.MouseEnter">
161                             <BeginStoryboard >                              
162                                 <Storyboard>
163                                     <DoubleAnimation From="0" To="90"  Duration="0:0:0.4"
164                                              Storyboard.TargetName="trans"
165                                              Storyboard.TargetProperty="Angle"/>
166                                 </Storyboard>
167                             </BeginStoryboard>
168                         </EventTrigger>
169                     </Button.Triggers>
170                 </Button>
171 
172             </Grid>
173         </Border>
174 
175 
176         <Grid Name="Movie" Grid.Row="1"  MouseEnter="QS_Movie_Enter" MouseLeave="QS_Movie_Leave">
177             <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" MouseLeftButtonDown="QS_Movie_MouseLeftButtonDown"/>
178             <Button Name="btn_pre" Width="30" Height="40" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click"  Focusable="False"  Style="{StaticResource Button_Left}"/>
179             <Button Name="btn_next" Width="30" Height="40" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click" Focusable="False" Style="{StaticResource Button_Right}"/>
180         </Grid>
181 
182 
183         <Border Name="Progress_Border" BorderBrush="#FBD3D0CD" BorderThickness="3" Grid.Row="2">
184             <Grid Name="Control_Progress" Margin="3,3,-3,-3" >       
185                 <Grid >
186                     <Slider Grid.Column="0" Name="timelineSlider" VerticalAlignment="Center"  PreviewMouseLeftButtonDown="timelineMDown"  PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,6,0,0"  Height="18" Margin="49,10,49,16"  />
187                 </Grid>     
188             </Grid>
189         </Border>
190     </Grid>
191 </Window>

后台代码依然是老一套，就小修了一下下：

  1  public partial class MainWindow : Window
  2     {
  3         DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT
  4         bool play_flag = true;  //判断播放状态
  5         int play_now = 0;       //判断当前视频索引
  6         int play_target;
  7         List<string> Play_Video = new List<string>();
  8         List<string> Title_Video = new List<string>();
  9 
 10 
 11         public MainWindow()
 12         {
 13             InitializeComponent();
 14             Play_Video = LoadMovies();
 15             Title_Video = LoadTitles();
 16         }
 17 
 18         private List<string> LoadTitles()
 19         {
 20             List<string> list_title = new List<string>();
 21             list_title.Add("isBIM 算量简介");
 22             return list_title;
 23         }
 24         private List<string> LoadMovies()
 25         {
 26             List<string> Movie_Uri = new List<string>();
 27             Movie_Uri.Add("Resources/videos/QS_Intro.mp4");
 28             return Movie_Uri;
 29         }
 30 
 31         private void Play_Click(object sender, RoutedEventArgs e)
 32         {         
 33             QS_Movie.Play();          
 34         }
 35 
 36         private void Pause_Click(object sender, RoutedEventArgs e)
 37         {
 38             QS_Movie.Pause();         
 39         }
 40 
 41         private void Element_MediaOpened(object sender, EventArgs e)
 42         {
 43             timelineSlider.Maximum = QS_Movie.NaturalDuration.TimeSpan.TotalMilliseconds;  //设置slider最大值
 44             dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); //超过计时间隔时发生
 45             dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 200); //DT间隔
 46             dispatcherTimer.Start(); //DT启动 
 47         }
 48 
 49         private void dispatcherTimer_Tick(object sender, EventArgs e)
 50         {
 51             int time = (int)QS_Movie.Position.TotalSeconds;
 52             timelineSlider.ToolTip = SecToTime(time);
 53             timelineSlider.Value = QS_Movie.Position.TotalMilliseconds; //slider滑动值随播放内容位置变化
 54         }
 55 
 56         private string SecToTime(int sec)
 57         {
 58             int min = sec / 60;
 59             sec = sec - min * 60;
 60             int hour = min / 60;
 61             min = min - hour * 60;
 62             string h = hour.ToString();
 63             string mm = ((min < 10) ? "0" : "") + min.ToString();
 64             string ss = ((sec < 10) ? "0" : "") + sec.ToString();
 65             string time = h + ":" + mm + ":" + ss;
 66             return time;
 67         }
 68         private void timelineMDown(object sender, EventArgs e)
 69         {
 70             dispatcherTimer.Stop();
 71         }
 72         private void timelineMUp(object sender, EventArgs e)
 73         {
 74             QS_Movie.Position = new TimeSpan(0, 0, 0, 0, (int)timelineSlider.Value);
 75             dispatcherTimer.Start();
 76             QS_Movie.Play();
 77         }
 78 
 79         private void QS_Movie_Loaded(object sender, RoutedEventArgs e)
 80         {
 81             QS_Movie.Source = new Uri(Play_Video[0], UriKind.Relative);
 82             QS_Movie.Play();
 83             txtB_Step.Text = Title_Video[0];
 84         }
 85 
 86         private void Left_Click(object sender, RoutedEventArgs e)
 87         {
 88                 play_target = (play_now + Play_Video.Count-1) % Play_Video.Count;
 89                 PreLoad(200, play_target);
 90                 play_now = play_target; 
 91         }
 92 
 93         private void Right_Click(object sender, RoutedEventArgs e)
 94         {
 95                play_target = (play_now + 1) % Play_Video.Count;
 96                PreLoad(200, play_target);
 97                play_now = play_target;
 98         }
 99 
100         private void PreLoad(int interval, int index)
101         {
102             QS_Movie.Source = new Uri(Play_Video[index],UriKind.Relative);          
103             QS_Movie.Play();
104             System.Threading.Thread.Sleep(interval);
105             QS_Movie.Pause();
106             txtB_Step.Text = Title_Video[index];
107         }
108 
109      
110         private void QS_Movie_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
111         {
112             
113             if(play_flag==true)
114             {
115                 QS_Movie.Play();              
116             }
117             if(play_flag==false)
118             {
119                 QS_Movie.Pause();
120             }
121             play_flag = !play_flag;
122         }
123 
124         private void Close_Click(object sender, RoutedEventArgs e)
125         {
126             this.Close();
127         }
128         private void Main_Drag(object sender, MouseButtonEventArgs e)
129         {
130             this.DragMove();
131         }
132 
133         private void QS_Movie_Enter(object sender, MouseEventArgs e)
134         {
135             btn_pre.Visibility = System.Windows.Visibility.Visible;           
136             btn_next.Visibility = System.Windows.Visibility.Visible;            
137         }
138         private void QS_Movie_Leave(object sender, MouseEventArgs e)
139         {           
140             btn_pre.Visibility = System.Windows.Visibility.Hidden;            
141             btn_next.Visibility = System.Windows.Visibility.Hidden;
142         }
143 }

三、效果图

GIF录制工具用的GifCam，一搜就能搜到，就是录不到鼠标？？！！