一、前言
对于<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="Resources\images\cancel.png"></Image> 87 <ControlTemplate.Triggers> 88 <Trigger Property="IsMouseOver" Value="True"> 89 <Setter TargetName="IMG" Property="Source" Value="Resources\images\cancel_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="Resources\images\left.png" Stretch="Fill"></Image> 102 <ControlTemplate.Triggers> 103 <Trigger Property="IsMouseOver" Value="True"> 104 <Setter TargetName="IMG" Property="Source" Value="Resources\images\left_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="Resources\images\right.png" Stretch="Fill"></Image> 118 <ControlTemplate.Triggers> 119 <Trigger Property="IsMouseOver" Value="True"> 120 <Setter TargetName="IMG" Property="Source" Value="Resources\images\right_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="Resources\images\logo.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，一搜就能搜到，就是录不到鼠标？？！！