WPF自學筆記（二）：媒體播放器（MediaElement）

     在WPF 中可以使用MediaElement 爲應用程序添加媒體播放控件，以完成播放音頻、視頻功能。由於MediaElement 屬於UIElement，所以它同時也支持鼠標及鍵盤的操作。本篇將使用MediaElement 類和Windows API Code Pack 創建一個簡單的視頻播放器實現一些基本功能。

界面框架

     在XAML 中放入一個MediaElement 控件（支持視頻播放），五個Button 控件（分別用於“打開視頻文檔”、“播放/暫停”、“停止”、“快退”、“快進”），一個Slider 控件（控制音量）。

<StackPanel HorizontalAlignment="Center" Margin="20">
    <Border BorderThickness="3" Background="Black">
        <Border.BorderBrush>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Offset="0" Color="White"/>
                <GradientStop Offset="0.5" Color="Gold"/>
            </LinearGradientBrush>
        </Border.BorderBrush>
        <MediaElement Height="300" Width="450" Name="mediaElement" 
                      Volume="0.5" LoadedBehavior="Manual" 
                      MouseLeftButtonUp="mediaElement_MouseLeftButtonUp"/>
    </Border>
    <StackPanel Orientation="Horizontal" Height="40" HorizontalAlignment="Center">
        <Button x:Name="openBtn" Content="Open File" 
                Style="{StaticResource btnStyle}" Click="openBtn_Click"/>
        <Button x:Name="playBtn" Content="Play" 
                Style="{StaticResource btnStyle}" Click="playBtn_Click"/>
        <Button x:Name="stopBtn" Content="Stop" 
                Style="{StaticResource btnStyle}" Click="stopBtn_Click"/>
        <Button x:Name="backBtn" Content="Back" 
                Style="{StaticResource btnStyle}" Click="backBtn_Click"/>
        <Button x:Name="forwardBtn" Content="Forward" 
                Style="{StaticResource btnStyle}" Click="forwardBtn_Click"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
        <TextBlock Text="Volume" Foreground="Gold"/>
        <Slider x:Name="volumeSlider" Minimum="0" Maximum="1" Value="0.5" Width="200"/>
    </StackPanel>
</StackPanel>

注意，MediaElement 的LoadedBehavior 需要設置爲Manual，這樣纔可以手動控制視頻的播放狀態。

界面樣式

     上面代碼中已經爲部分控件設置了一些簡單樣式，其中Button 控件通過靜態資源btnStyle 進行了較爲複雜的樣式設定。首先修改了Button 的默認樣式，並且在鼠標移至上方時字體顏色也會產生變化。

<Window.Resources>
    <Style x:Key="btnStyle" TargetType="Button">
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Offset="0" Color="White"/>
                    <GradientStop Offset="0.5" Color="#FF554D4A"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="FontStyle" Value="Italic"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Width" Value="60"/>
        <Setter Property="Foreground" Value="Gold"/>
        <Style.Triggers>
            <Trigger Property="Button.IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

瀏覽視頻文件

     在視頻文件瀏覽部分引入Windows API Code Pack，使用KnownFolders 類將文件瀏覽窗口直接定位到媒體庫的Sample Videos 目錄，並添加WMV、AVI 文件過濾器。

private void openBtn_Click(object sender, RoutedEventArgs e)
{
    ShellContainer selectedFolder = null;
    selectedFolder = KnownFolders.SampleVideos as ShellContainer;
    CommonOpenFileDialog cfd = new CommonOpenFileDialog();
    cfd.InitialDirectoryShellContainer = selectedFolder;
    cfd.EnsureReadOnly = true;
    cfd.Filters.Add(new CommonFileDialogFilter("WMV Files", "*.wmv"));
    cfd.Filters.Add(new CommonFileDialogFilter("AVI Files", "*.avi"));
    cfd.Filters.Add(new CommonFileDialogFilter("MP3 Files", "*.mp3"));

    if (cfd.ShowDialog() == CommonFileDialogResult.OK)
    {
        mediaElement.Source = new Uri(cfd.FileName, UriKind.Relative);
        playBtn.IsEnabled = true;
    }
}

播放/暫停

     在視頻播放過程中可以通過點擊“Play/Pause” 按鍵或“MediaElement” 窗口，對視頻進行“播放/暫停”操作。

private void PlayerPause()
{
    SetPlayer(true);
    if (playBtn.Content.ToString() == "Play")
    {
        mediaElement.Play();
        playBtn.Content = "Pause";
        mediaElement.ToolTip = "Click to Pause";
    }
    else
    {
        mediaElement.Pause();
        playBtn.Content = "Play";
        mediaElement.ToolTip = "Click to Play";
    }
}

private void playBtn_Click(object sender, RoutedEventArgs e)
{
    PlayerPause();
}

private void mediaElement_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    PlayerPause();
}

快退/快進

     通過修改MediaElement 的Position 值實現視頻進度調整操作。時間間隔通過TimeSpan 進行設置（下面代碼以10秒爲間隔）。

private void backBtn_Click(object sender, RoutedEventArgs e)
{
    mediaElement.Position = mediaElement.Position - TimeSpan.FromSeconds(10);
}

private void forwardBtn_Click(object sender, RoutedEventArgs e)
{
    mediaElement.Position = mediaElement.Position + TimeSpan.FromSeconds(10);
}

音量調節

     音量調節部分只需將Slider Value 變化值與MediaElement Volume 值做一個簡單Binding 即可。

......
<MediaElement Height="300" Width="450" Name="mediaElement" LoadedBehavior="Manual"
              Volume="{Binding ElementName=volumeSlider, Path=Value}"
              MouseLeftButtonUp="mediaElement_MouseLeftButtonUp"/>
......

效果圖