uwp学习——Naïve媒体播放器

Gitub源代码链接：https://github.com/wuqianwen/MediaPlayer

我就大致讲一下自己的思路吧。

看到老师这一次的作业，脑子里的第一个控件就是一个Button，按一下Button，弹出选择文件的界面。

所以在.XAML中添加一个Button按钮，并且新建button_Click事件，代码如下：

<Button x:Name="button" 
                Content="Media" 
                Margin="549,410,0,0" 
                Height="45" Width="69" 
                Click="button_Click"/>

这时候就有了第一个问题：如何实现按一下Button就会弹出选择文件夹的界面呢？

于是在谷歌上输入了关键字：uwp C#如何打开文件夹

选择第一个：使用选取器打开文件和文件夹。网页链接为：https://docs.microsoft.com/zh-cn/windows/uwp/files/quickstart-using-file-and-folder-pickers。网页里面提供了选取单个文件的代码如下。这段代码有3点：1.创建和自定义 FileOpenPicker 2.通过ViewMode、SuggestedStartLocation 和 FileTypeFilter设置弹出文件选择见面效果，位置和允许打开的文件类型 3.由于事件定义的时候采用的是async异步实现，在事件中要使用 await 运算符。链接：https://docs.microsoft.com/zh-cn/windows/uwp/threading-async/call-asynchronous-apis-in-csharp-or-visual-basic

var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
picker.SuggestedStartLocation =
    Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg");
picker.FileTypeFilter.Add(".jpeg");
picker.FileTypeFilter.Add(".png");

Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
if (file != null)
{
    // Application now has read/write access to the picked file
    this.textBlock.Text = "Picked photo: " + file.Name;
}
else
{
    this.textBlock.Text = "Operation cancelled.";
}

那么对应的我的代码如下。1.把打开文件起始位置设置在VideoLibrary，即视频 2.把文件类型改为.mp3和.mp4 3.添加一个提示textBlock，显示打开文件名称。

private async void button_Click(object sender, RoutedEventArgs e)
        {
            
            var picker = new Windows.Storage.Pickers.FileOpenPicker();
            picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
            picker.SuggestedStartLocation =
                Windows.Storage.Pickers.PickerLocationId.VideosLibrary;
            picker.FileTypeFilter.Add(".mp3");
            picker.FileTypeFilter.Add(".mp4");

            Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                this.textBlock.Text = "Picked Video: " + file.Name;
            }
            else
            {
                this.textBlock.Text = "Operation cancelled.";
            }
　　　　　}

实现了一个简单的不能再简单的界面：

 

此时，点击Media按钮会弹出所在文件夹窗口，但是点击视频或者音频文件不能播放；

所以第二个问题就是，怎么播放。在谷歌上搜索：uwp C#播放视频音频，找到网页：https://docs.microsoft.com/zh-cn/windows/uwp/audio-video-camera/play-audio-and-video-with-mediaplayer。文中给出了控件MediaPlayerElement的代码，但是我的VS显示不可用，然后我在XAML Controls Gallery上发现还有一个控件MediaElement，两个控件的属性差不多。在.XAML中添加控件MediaElement，并且在之前的按钮点击事件中，调用。

<MediaPlayerElement x:Name="_mediaPlayerElement" AreTransportControlsEnabled="False" HorizontalAlignment="Stretch"  Grid.Row="0"/>

<MediaElement
x:Name="mediaPlayer" 
HorizontalAlignment="Stretch"
AutoPlay="False"
AreTransportControlsEnabled="True" />

var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
                mediaPlayer.SetSource(stream, file.ContentType);
                mediaPlayer.Play();

运行之后，是可以播放视频或音频文件了，但是出现了 个问题：1.在视频或者音频播放时没有进度条跟踪 2.一次只能选择一个文件，只能通过关闭执行文件退出 3.播出文件提示的textBlock只在文件播出前一闪而过。

于是，我把MediaElement的属性AreTransportControlsEnabled="True"，放到Button事件中了，只有文件播放的时候，mediaPlayer.AreTransportControlsEnabled = true，于是解决了进度条跟踪问题。至于后面的两个问题，我把见面分成了两行两列，把按钮放在0行0列，提示播放文件的textBlock放在了0行1列，MediaElement放在第1行，跨两列。最终效果如图：