基于<MediaElement>的WPF视频播放器（可拖拽进度条播放）【1】

一、前言

      前两天上峰要求做一个软件使用向导，使用WPF制作。这不，这两天从一张白纸开始学起，做一个播放演示视频的使用向导。以下是粗设计的原型代码：

二、效果图

三、代码

前台代码：

 <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">
     <Grid Name="Main_Grid">
         <Grid.RowDefinitions>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition Height=""></RowDefinition>
         </Grid.RowDefinitions>
         <Grid Name="Title" Grid.Row="">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width=""></ColumnDefinition>
                 <ColumnDefinition Width=""></ColumnDefinition>
                 <ColumnDefinition Width=""></ColumnDefinition>
                 <ColumnDefinition Width=""></ColumnDefinition>
             </Grid.ColumnDefinitions>
             <Button Grid.Column="" HorizontalAlignment="Center" Width="" Height="" Click="Button_Click" Margin="16,0,0,0" >关闭</Button>
         </Grid>
         <Grid Name="Movie" Grid.Row="">
             <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></MediaElement>
             <Button Name="LeftButton" Width="" Height="" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click">上一个</Button>
             <Button Name="RightButton" Width="" Height="" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click">下一个</Button>
         </Grid>
         <Grid Name="Control_Progress" Grid.Row="">
             <Slider Height="" Width="" Name="timelineSlider" VerticalAlignment="Center"  PreviewMouseLeftButtonDown="timelineMDown"  PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,5,0,0" ></Slider>
         </Grid>
         <Grid Name="Movie_Control" Grid.Row="" Margin="0,0,0,0">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width=""></ColumnDefinition>
                 <ColumnDefinition Width=""></ColumnDefinition>
                 <ColumnDefinition Width=""></ColumnDefinition>
                 <ColumnDefinition Width=""></ColumnDefinition>
             </Grid.ColumnDefinitions>
             <StackPanel Grid.Column="" Orientation="Horizontal" HorizontalAlignment="Center">
                 <Button Height="" Width="" x:Name="Play" Click="Play_Click" Margin="20,0">播放</Button>
                 <Button Height="" Width="" x:Name="Pause" Click="Pause_Click" Margin="20,0">暂停</Button>
             </StackPanel>
             <Slider Height="" Width="" Name="Volunme" Minimum="" Maximum="" Value="{Binding ElementName=QS_Movie,Path=Volume,Mode=TwoWay}" Grid.Column="" HorizontalAlignment="Left" Margin="0,5,0,0" ></Slider>
             <Button Height="" Width="" Name="Horn" Grid.Column="" HorizontalAlignment="Right" Margin="0,13">音量</Button>
         </Grid>
     </Grid>
 </Window>

后台代码：

 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.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;

 namespace WPF_Nav
 {
     /// <summary>
     /// MainWindow.xaml 的交互逻辑
     /// </summary>
     public partial class MainWindow : Window
     {
         DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT
         public MainWindow()
         {
             InitializeComponent();
         }

         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最大值
             int sec = (int)QS_Movie.NaturalDuration.TimeSpan.TotalSeconds;
             dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); //超过计时间隔时发生
             dispatcherTimer.Interval = new TimeSpan(, , , , ); //DT间隔
             dispatcherTimer.Start(); //DT启动
         }

         private void dispatcherTimer_Tick(object sender, EventArgs e)
         {
             timelineSlider.Value = QS_Movie.Position.TotalMilliseconds; //slider滑动值随播放内容位置变化
         }

         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)
         {
             QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview.mp4");
             QS_Movie.Play();
             System.Threading.Thread.Sleep();
             QS_Movie.Pause();
         }

         private void Left_Click(object sender, RoutedEventArgs e)
         {
             QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview1.mp4");
             QS_Movie.Play();
             System.Threading.Thread.Sleep();
             QS_Movie.Pause();
         }

         private void Right_Click(object sender, RoutedEventArgs e)
         {
             QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview2.mp4");
             QS_Movie.Play();
             System.Threading.Thread.Sleep();
             QS_Movie.Pause();
         }

         private void Button_Click(object sender, RoutedEventArgs e)
         {
             this.Close();
         }

     }

 }

四、小结

刚玩WPF两天，可能有些地方写的不好望见谅，听江湖传言<MediaElement>可能对Win8不支持，我也不清楚，我是Win7的。所以以上代码仅供参考。

PS：使用向导该怎么做？因为公司软件里的按钮都能按F1直接切到官方文档，还有Tooltips自带小视频演示，我这使用向导思来想去还是用视频的方式呈现，但是组长说做的像个播放器，不像使用向导，我是想把软件每步操作都做成视频左右翻页的，确是是像播放器。这可怎么整？求万能的博友指明一条活路！