一、前言
对于<MediaElement>前两章介绍了差不多了，其实好的界面还需要UI工程师的配合，比如帮忙设计下按钮的样式等等。同样视频本身也需要吸引人，不然做的再好的播放器也没用。之后，我对代码进行了下小修改，粒子特效那部分就不再放了。
二、代码
前台代码
<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="Resources\images\cancel.png"></Image>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="IMG" Property="Source" Value="Resources\images\cancel_hover.png"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <Style x:Key="Button_Left" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image x:Name="IMG" Source="Resources\images\left.png" Stretch="Fill"></Image>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="IMG" Property="Source" Value="Resources\images\left_hover.png"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <Style x:Key="Button_Right" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image x:Name="IMG" Source="Resources\images\right.png" Stretch="Fill"></Image>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="IMG" Property="Source" Value="Resources\images\right_hover.png"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> </Window.Resources> <Grid Name="Main_Grid" MouseLeftButtonDown="Main_Drag">
<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="">
<Image Source="Resources\images\logo.png" Stretch="Uniform" Margin="10,0,20,0" ></Image>
</Grid>
<Grid Grid.Column="">
<Canvas x:Name="ParticleHost" Width="" >
<TextBlock Name="txtB_Step" Grid.Column="" Width="" Height="" TextAlignment="Center" FontSize="" FontFamily="Microsoft YaHei" Margin="100,7,0,0" ToolTip="左键单击视频—播放/暂停"/>
</Canvas>
</Grid> <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="" MouseEnter="QS_Movie_Enter" MouseLeave="QS_Movie_Leave">
<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" Margin="3,3,-3,-3" >
<Grid >
<Slider Grid.Column="" Name="timelineSlider" VerticalAlignment="Center" PreviewMouseLeftButtonDown="timelineMDown" PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,6,0,0" Height="" Margin="49,10,49,16" />
</Grid>
</Grid>
</Border>
</Grid>
</Window>
后台代码依然是老一套，就小修了一下下：
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("isBIM 算量简介");
return list_title;
}
private List<string> LoadMovies()
{
List<string> Movie_Uri = new List<string>();
Movie_Uri.Add("Resources/videos/QS_Intro.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)
{
QS_Movie.Source = new Uri(Play_Video[], UriKind.Relative);
QS_Movie.Play();
txtB_Step.Text = Title_Video[];
} 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],UriKind.Relative);
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();
}
if(play_flag==false)
{
QS_Movie.Pause();
}
play_flag = !play_flag;
} private void Close_Click(object sender, RoutedEventArgs e)
{
this.Close();
}
private void Main_Drag(object sender, MouseButtonEventArgs e)
{
this.DragMove();
} private void QS_Movie_Enter(object sender, MouseEventArgs e)
{
btn_pre.Visibility = System.Windows.Visibility.Visible;
btn_next.Visibility = System.Windows.Visibility.Visible;
}
private void QS_Movie_Leave(object sender, MouseEventArgs e)
{
btn_pre.Visibility = System.Windows.Visibility.Hidden;
btn_next.Visibility = System.Windows.Visibility.Hidden;
}
}
三、效果图
GIF录制工具用的GifCam，一搜就能搜到，就是录不到鼠标？？！！