现代操作系统应用开发：MediaElement播放进度和Slider滑块的绑定

功能简介

使用UWP提供的MediaElement控件制作一个音乐播放器，不使用MediaElement内置的传输控件，使用我们自己创建的控件Slider，将Slider滑块的位置和MediaElement的播放进度绑定，顺带一提，博客示例的音乐播放器的封面在音乐播放的时候会旋转。

注意：这里使用了转换器的知识，未使用过转换器的请看——>传送门

实现效果

• 播放音乐

实现过程

创建转换器类

//ProgressConverter.cs
namespace MediaElementAndSlider
{
    class ProgressConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return ((TimeSpan)value).TotalSeconds;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return TimeSpan.FromSeconds((double)value);
        }
    }
}

需要注意的地方：

• Convert 函数的value参数的类型为TimeSpan，为保存MediaElement的播放进度的一个结构体，调用TotalSeconds 函数将返回总共播放的秒数
• ConvertBack 函数的value参数的类型为double，为Slider的值，使 TimeSpan.FromSeconds((double)value)将返回一个TimeSpan对象

在MainPage.xaml中添加代码

• 添加需要的资源

<!-- MainPage.xaml -->
<Page.Resources>
    <local:ProgressConverter x:Key="progressConverter"/>
</Page.Resources>

• 添加需要的控件

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <!-- 封面 -->
        <Ellipse x:Name="ellipse" Width="200" Height="200" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <CompositeTransform/>
            </Ellipse.RenderTransform>
            <Ellipse.Resources>
                <!-- Storyboard是一个动画容器，这里将通过Storyboard实现旋转 -->
                <Storyboard x:Name="EllStoryboard" RepeatBehavior="Forever">
                    <DoubleAnimation Duration="0:0:20" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
                </Storyboard>
            </Ellipse.Resources>
            <!--这里用一张图片来填充这个椭圆形-->
            <Ellipse.Fill>
                <ImageBrush x:Name="picture" ImageSource="Assets/cover.jpg" />
            </Ellipse.Fill>
        </Ellipse>
        <!-- Source替换为你的音乐的地址 -->
        <MediaElement x:Name="mediaSimple"
            Source="ms-appx:///Assets/种族假象.mp3" AutoPlay="False">
        </MediaElement>
        <!-- 进度条，使用progressConverter转换器 -->
        <Slider x:Name="progress" Minimum="0" Maximum="100" Value="{Binding ElementName=mediaSimple,Path=Position,Converter={StaticResource progressConverter}, Mode=TwoWay}"></Slider>
    </StackPanel>
</Grid>
<Page.BottomAppBar>
        <CommandBar x:Name="commandBar">
            <AppBarButton Icon="Play" Click="playClick"/>
            <AppBarButton Icon="Clear" Click="pauseClick"/>
            <AppBarButton Icon="Stop" Click="stopClick"/>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

需要注意的地方：

• Page.Resources 添加资源
• Slider的Value属性实现双向绑定

在MainPage.xaml.cs中添加代码

/* 下面的函数都是按钮点击事件 */
// 开始播放
private void playClick(object sender, RoutedEventArgs e)
{
    mediaSimple.Play();
    EllStoryboard.Begin();
    progress.Maximum = mediaSimple.NaturalDuration.TimeSpan.TotalSeconds;
}

// 暂停播放
private void pauseClick(object sender, RoutedEventArgs e)
{
    mediaSimple.Pause();
    EllStoryboard.Pause();
}

// 停止播放，回到起始位置
private void stopClick(object sender, RoutedEventArgs e)
{
    mediaSimple.Stop();
    EllStoryboard.Stop();
}

需要注意的地方：

• 在开始播放的时候设置Slider的最大值

FYI

项目下载：MediaElementAndSlider

项目下载之后记住把Debug模式从ARM换成X86或X64（根据你自己的机型选择），之前一开始学习的时候不知道这一点，从网上下载下来的项目都运行不了，纠结的一逼(╥╯^╰╥)