WPF 4 媒体播放器（MediaElement）

赞助商

        在WPF 中可以使用MediaElement 为应用程序添加媒体播放控件，以完成播放音频、视频功能。由于MediaElement 属于UIElement，所以它同时也支持鼠标及键盘的操作.

           在XAML 中放入一个MediaElement 控件（支持视频播放），五个Button 控件（分别用于“打开视频文档”、“播放/暂停”、“停止”、“快退”、“快进”），一个Slider 控件（控制音量）。

 

1. <StackPanel HorizontalAlignment="Center" Margin="20">
   
2.     <Border BorderThickness="3" Background="Black">
   
3.         <Border.BorderBrush>
   
4.             <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
   
5.                 <GradientStop Offset="0" Color="White"/>
   
6.                 <GradientStop Offset="0.5" Color="Gold"/>
   
7.             </LinearGradientBrush>
   
8.         </Border.BorderBrush>
   
9.         <MediaElement Height="300" Width="450" Name="mediaElement"
   
10.                       Volume="0.5" LoadedBehavior="Manual"
    
11.                       MouseLeftButtonUp="mediaElement_MouseLeftButtonUp"/>
    
12.     </Border>
    
13.     <StackPanel Orientation="Horizontal" Height="40" HorizontalAlignment="Center">
    
14.         <Button x:Name="openBtn" Content="Open File"
    
15.                 Style="{StaticResource btnStyle}" Click="openBtn_Click"/>
    
16.         <Button x:Name="playBtn" Content="Play"
    
17.                 Style="{StaticResource btnStyle}" Click="playBtn_Click"/>
    
18.         <Button x:Name="stopBtn" Content="Stop"
    
19.                 Style="{StaticResource btnStyle}" Click="stopBtn_Click"/>
    
20.         <Button x:Name="backBtn" Content="Back"
    
21.                 Style="{StaticResource btnStyle}" Click="backBtn_Click"/>
    
22.         <Button x:Name="forwardBtn" Content="Forward"
    
23.                 Style="{StaticResource btnStyle}" Click="forwardBtn_Click"/>
    
24.     </StackPanel>
    
25.     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
    
26.         <TextBlock Text="Volume" Foreground="Gold"/>
    
27.         <Slider x:Name="volumeSlider" Minimum="0" Maximum="1" Value="0.5" Width="200"/>
    
28.     </StackPanel>
    
29. </StackPanel>
    注意，MediaElement 的LoadedBehavior 需要设置为Manual，这样才可以手动控制视频的播放状态。

        界面样式

        上面代码中已经为部分控件设置了一些简单样式，其中Button 控件通过静态资源btnStyle 进行了较为复杂的样式设定。首先修改了Button 的默认样式，并且在鼠标移至上方时字体颜色也会产生变化。

      

1. <Window.Resources>
2.     <Style x:Key="btnStyle" TargetType="Button">
3.         <Setter Property="Background">
4.             <Setter.Value>
5.                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
6.                     <GradientStop Offset="0" Color="White"/>
7.                     <GradientStop Offset="0.5" Color="#FF554D4A"/>
8.                 </LinearGradientBrush>
9.             </Setter.Value>
10.         </Setter>
11.         <Setter Property="FontStyle" Value="Italic"/>
12.         <Setter Property="Margin" Value="5"/>
13.         <Setter Property="Width" Value="60"/>
14.         <Setter Property="Foreground" Value="Gold"/>
15.             <Trigger Property="Button.IsMouseOver" Value="True">
16.                 <Setter Property="Foreground" Value="Black"/>
17.             </Trigger>
18.         </Style.Triggers>
19.     </Style>
20. </Window.Resources>