一、前言
前两天上峰要求做一个软件使用向导,使用WPF制作。这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导。以下是粗设计的原型代码:
二、效果图
三、代码
前台代码:
1 <Window 2 "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 "http://schemas.microsoft.com/winfx/2006/xaml" 4 "http://schemas.microsoft.com/expression/blend/2008" 5 "http://schemas.open" 6 "clr-namespace:WPF_Nav" 7 "http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" "http://schemas.devexpress.com/winfx/2008/xaml/windowsui" x:Class="WPF_Nav.MainWindow" 8 mc:Ignorable="d" 9 Title="MainWindow" Height="480" Width="900" WindowStyle="None">10 <Grid Name="Main_Grid">11 <Grid.RowDefinitions>12 <RowDefinition Height="40"></RowDefinition>13 <RowDefinition Height="343"></RowDefinition>14 <RowDefinition Height="30"></RowDefinition>15 <RowDefinition Height="50"></RowDefinition>16 </Grid.RowDefinitions>17 <Grid Name="Title" Grid.Row="0">18 <Grid.ColumnDefinitions>19 <ColumnDefinition Width="200"></ColumnDefinition>20 <ColumnDefinition Width="500"></ColumnDefinition>21 <ColumnDefinition Width="120"></ColumnDefinition>22 <ColumnDefinition Width="80"></ColumnDefinition>23 </Grid.ColumnDefinitions>24 <Button Grid.Column="3" HorizontalAlignment="Center" Width="40" Height="40" Click="Button_Click" Margin="16,0,0,0" >关闭</Button>25 </Grid>26 <Grid Name="Movie" Grid.Row="1">27 <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></MediaElement>28 <Button Name="LeftButton" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click">上一个</Button>29 <Button Name="RightButton" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click">下一个</Button>30 </Grid>31 <Grid Name="Control_Progress" Grid.Row="2">32 <Slider Height="30" Width="700" Name="timelineSlider" VerticalAlignment="Center" PreviewMouseLeftButtonDown="timelineMDown" PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,5,0,0" ></Slider>33 </Grid>34 <Grid Name="Movie_Control" Grid.Row="3" Margin="0,0,0,0">35 <Grid.ColumnDefinitions>36 <ColumnDefinition Width="200"></ColumnDefinition>37 <ColumnDefinition Width="500"></ColumnDefinition>38 <ColumnDefinition Width="50"></ColumnDefinition>39 <ColumnDefinition Width="150"></ColumnDefinition>40 </Grid.ColumnDefinitions>41 <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">42 <Button Height="40" Width="40" x:Name="Play" Click="Play_Click" Margin="20,0">播放</Button>43 <Button Height="40" Width="40" x:Name="Pause" Click="Pause_Click" Margin="20,0">暂停</Button>44 </StackPanel>45 <Slider Height="25" Width="120" Name="Volunme" Minimum="0" Maximum="1" Value="{Binding ElementName=QS_Movie,Path=Volume,Mode=TwoWay}" Grid.Column="3" HorizontalAlignment="Left" Margin="0,5,0,0" ></Slider>46 <Button Height="25" Width="40" Name="Horn" Grid.Column="2" HorizontalAlignment="Right" Margin="0,13">音量</Button>47 </Grid>48 </Grid>49 </Window>
后台代码:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Windows; 7 using System.Windows.Controls; 8 using System.Windows.Data; 9 using System.Windows.Documents;10 using System.Windows.Input;11 using System.Windows.Media;12 using System.Windows.Media.Imaging;13 using System.Windows.Navigation;14 using System.Windows.Shapes;15 using System.Windows.Threading;16 17 namespace WPF_Nav18 {19 /// <summary>20 /// MainWindow.xaml 的交互逻辑21 /// </summary>22 public partial class MainWindow : Window23 {24 DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT25 public MainWindow()26 {27 InitializeComponent();28 }29 30 private void Play_Click(object sender, RoutedEventArgs e)31 { 32 QS_Movie.Play(); 33 }34 35 private void Pause_Click(object sender, RoutedEventArgs e)36 {37 QS_Movie.Pause(); 38 }39 40 private void Element_MediaOpened(object sender, EventArgs e)41 {42 timelineSlider.Maximum = QS_Movie.NaturalDuration.TimeSpan.TotalMilliseconds; //设置slider最大值43 int sec = (int)QS_Movie.NaturalDuration.TimeSpan.TotalSeconds; 44 dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); //超过计时间隔时发生45 dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500); //DT间隔46 dispatcherTimer.Start(); //DT启动 47 }48 49 private void dispatcherTimer_Tick(object sender, EventArgs e)50 {51 timelineSlider.Value = QS_Movie.Position.TotalMilliseconds; //slider滑动值随播放内容位置变化52 }53 54 private void timelineMDown(object sender, EventArgs e)55 {56 dispatcherTimer.Stop();57 }58 private void timelineMUp(object sender, EventArgs e)59 {60 QS_Movie.Position = new TimeSpan(0, 0, 0, 0, (int)timelineSlider.Value);61 dispatcherTimer.Start();62 QS_Movie.Play();63 }64 65 private void QS_Movie_Loaded(object sender, RoutedEventArgs e)66 {67 QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview.mp4");68 QS_Movie.Play();69 System.Threading.Thread.Sleep(500);70 QS_Movie.Pause();71 }72 73 private void Left_Click(object sender, RoutedEventArgs e)74 {75 QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview1.mp4");76 QS_Movie.Play();77 System.Threading.Thread.Sleep(500);78 QS_Movie.Pause();79 }80 81 private void Right_Click(object sender, RoutedEventArgs e)82 {83 QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview2.mp4"); 84 QS_Movie.Play();85 System.Threading.Thread.Sleep(500);86 QS_Movie.Pause();87 }88 89 private void Button_Click(object sender, RoutedEventArgs e)90 {91 this.Close();92 }93 94 95 96 }97 98 99 }
四、小结
刚玩WPF两天,可能有些地方写的不好望见谅,听江湖传言<MediaElement>可能对Win8不支持,我也不清楚,我是Win7的。所以以上代码仅供参考。
PS:使用向导该怎么做?因为公司软件里的按钮都能按F1直接切到官方文档,还有Tooltips自带小视频演示,我这使用向导思来想去还是用视频的方式呈现,但是组长说做的像个播放器,不像使用向导,我是想把软件每步操作都做成视频左右翻页的,确是是像播放器。这可怎么整?求万能的博友指明一条活路!
原标题:基于MediaElement的WPF视频播放器(可拖拽进度条播放)
关键词:wpf