UWP-Naïve Media Player 1.0

首先，先呈上GitHub项目地址：https://github.com/GTGO/NavieMediaPlayer

本次项目主要实现了播放MP3,MP4，也即一个简单而又丑陋的播放器。

实现的效果图如下：

主界面

打开文件

播放界面

当然，即使是制作如此简陋的媒体播放器，我还是遇到了问题，具体如下：

1、如何可以让用户选择文件

根据XAML控件库中对MediaElement的描述，我发现也只能实现自己播放Assets文件中的音频或视频文件，用户无法根据自己喜好选择本地下载的文件进行播放，用户体验度为0！于是便查阅了MediaElement的官方文档，发现在官方文档中有一块告诉了我们怎么打开本地媒体文件。

(URL:https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediaelement#remarks)

除了在XAML中简单的调用MediaElement外，还需要使用FileOpenPicker来获取文件，具体内容如下：

private async void Button_Click(object sender, RoutedEventArgs e)
{
    await SetLocalMedia();
}

async private System.Threading.Tasks.Task SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.FileTypeFilter.Add(".mp4");
    openPicker.FileTypeFilter.Add(".mp3");

    var file = await openPicker.PickSingleFileAsync();

    // mediaPlayer is a MediaElement defined in XAML
    if (file != null)
    {
        var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        mediaPlayer.SetSource(stream, file.ContentType);

        mediaPlayer.Play();
    }
}

这里为了使用方便，通过Button来实现该功能。至此，一个简单的media player实现。

2、Button的美化

虽然简单的功能可以实现，但是一个大大的Button不得不说十分影响美观，考虑到大多情况下我们都是以一个小图标代替文字来实现相同功能，于是我便寻找相关图片，试图通过插入img代替button的功能，反复试验后发现自己真的是图样图森破，后联想到老师上课所说将Button的Font Family设置为Segoe MDL2 Assets就可以在其库中找到相应图标复制粘贴，发现真的是一步到位。

(URL:http://modernicons.io/segoe-mdl2/cheatsheet/)

相应的代码部分如下：

<Button Name="MyButton"  FontFamily="Segoe MDL2 Assets" Content="" Click="MyButton_Click"/>

3、进度栏的增改

事实上，一个media player离不开对播放内容的控制，包括但不限于简单的播放、暂停、全屏、调节音量等，由于初期只是简单的增加了MediaElement并没有在其功能上进一步完善，于是我便再次查看了官方文档，发现在MediaElement只需添加

AreTransportControlsEnabled="True"

即可实现简易的功能。此外，在查看官方文档时，我还发现了MediaTransportControls Class一栏。

(URL:https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediatransportcontrols)

其中有对TransportControls的详细介绍，发现除了播放、暂停等之外，还有快进、后退等，再增加这些功能后，我又考虑到有时IsCompact="False"的情况下会影响用户观影体验。为了将用户体验度从0升为1，我增加了ToggleSwitch以供用户选择是否设置IsCompact="False"，代码部分如下：

XAML部分：

<ToggleSwitch Name="MyToggleSwitch"
              OffContent="It's compacted now!"
              OnContent="It's uncompacted now!"
              Toggled="MyToggleSwitch_Toggled"
              RelativePanel.AlignRightWithPanel="True"/>
<MediaElement.TransportControls>
     <MediaTransportControls IsCompact="True"
                             IsFastForwardEnabled="True"
                             IsFastForwardButtonVisible="True"
                             IsFastRewindEnabled="True"
                             IsFastRewindButtonVisible="True"
                             IsZoomEnabled="True"
                             IsZoomButtonVisible="True"/>
</MediaElement.TransportControls>

C#部分：

private void MyToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch toggleSwitch = sender as ToggleSwitch;
            if (toggleSwitch != null)
            {
                if (toggleSwitch.IsOn == true)
                {
                    MyMediaPlayer.TransportControls.IsCompact = false;
                }
                else
                {
                    MyMediaPlayer.TransportControls.IsCompact = true;
                }
            }
        }

实现效果如下：

至此，一个Naïve Media Player基本实现。至于用户体验度，期待一下2.0版本的提高吧~