用UWP编写音乐播放器

最新推荐文章于 2020-03-23 12:45:52 发布

Wind_white

最新推荐文章于 2020-03-23 12:45:52 发布

阅读量3.3k

点赞数 2

分类专栏： UWP 文章标签：音乐界面 UWP

本文链接：https://blog.csdn.net/Wind_white/article/details/63267335

版权

UWP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先是设计界面：

<Page
    x:Class="MusicUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MusicUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ClickStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="75"/>
        </Grid.RowDefinitions>
        <SplitView Name="MenuSplitView"
                   Grid.Column="0"
                   DisplayMode="CompactOverlay"
                   OpenPaneLength="200"
                   CompactPaneLength="48"
                   HorizontalAlignment="Left"
                   BorderBrush="AliceBlue">
            <SplitView.Pane>
                <StackPanel Orientation="Vertical" >
                    <Button Name="ListBtn" 
                            Background="LightGray" 
                            FontFamily="Segoe MDL2 Assets"
                            Content="" 
                            FontSize="28"
                            Click="ListBtn_Click" 
                            HorizontalAlignment="Left" />
                    <ListBox Name="MenuListBox" SelectionChanged="MenuListBox_SelectionChanged">
                        <ListBoxItem Name="FindListBoxItem" >
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Fill="Red" Height="43" Width="2" Margin="-12" HorizontalAlignment="Left"/>
                                <SymbolIcon Symbol="Zoom" Foreground="Gray" />
                                <TextBlock Text="搜索" Margin="24, 0" />
                            </StackPanel>
                        </ListBoxItem>
                        <ListBoxItem Name="RecommendListBoxItem">
                            <StackPanel Orientation="Horizontal">
                                <SymbolIcon Symbol="Audio" Foreground="Gray" />
                                <TextBlock Text="发现音乐" Margin="24, 0"/>
                            </StackPanel>
                        </ListBoxItem>
                        <ListBoxItem Name="VideoListBoxItem">
                            <StackPanel Orientation="Horizontal">
                                <SymbolIcon Symbol="SlideShow" Foreground="Gray" />
                                <TextBlock Text="MV" Margin="24, 0"/>
                            </StackPanel>
                        </ListBoxItem>
                        <ListBoxItem Name="MomentsListBoxItem">
                            <StackPanel Orientation="Horizontal">
                                <SymbolIcon Symbol="People" Foreground="Gray" />
                                <TextBlock Text="朋友" Margin="24, 0"/>
                            </StackPanel>
                        </ListBoxItem>
                    </ListBox>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock Name="ResultTextBlock" />
            </SplitView.Content>
        </SplitView>
        <Frame  Name="ConvertFrame"
                Grid.Column="1">
        </Frame>

        <RelativePanel Grid.Row="1"
                       Grid.ColumnSpan="2">
            <Image Name="MusicImage"
                   Height="75"
                   Width="75"
                   Source="kk.jpg"
                   Stretch="Fill">
            </Image>
            <Button Name="ForwardMusicButton"
                    Background="AliceBlue"
                    Content=""
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.RightOf="MusicImage"/>
            <Button Name="PauseButton"
                    Background="AliceBlue"
                    Content=""
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.RightOf="ForwardMusicButton"
                    Click="PauseButton_Click"/>
            <Button Name="NextMusicButton"
                    Background="AliceBlue"
                    Content=""
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.RightOf="PauseButton"/>
            <StackPanel Orientation="Vertical"
                        RelativePanel.RightOf="NextMusicButton"
                        RelativePanel.LeftOf="AddListButton">
                <RelativePanel>
                    <TextBlock Name="MusicNameText">好音乐，用我！</TextBlock>
                    <TextBlock Name="SeperatorTextBlock" RelativePanel.RightOf="MusicNameText">——</TextBlock>
                    <TextBlock Name="AuthorNameText" 
                               RelativePanel.RightOf="SeperatorTextBlock" 
                               Opacity="0.5">群星</TextBlock>
                    <TextBlock RelativePanel.AlignRightWithPanel="True">00:00/03:45</TextBlock>
                </RelativePanel>
                <ProgressBar Name="MusicProgressBar"
                        Margin="25">
                </ProgressBar>
            </StackPanel>
            <Button Name="AddListButton"
                    Content=""
                    Background="AliceBlue"
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.LeftOf="PlayModeButton">
            </Button>
            <Button Name="PlayModeButton"
                    Content=""
                    Background="AliceBlue"
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.LeftOf="VoiceButton"/>
            <Button Name="VoiceButton"
                    Content=""
                    Background="AliceBlue"
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.LeftOf="ListButton"/>
            <Button Name="ListButton"
                    Content=""
                    Background="AliceBlue"
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="50"
                    Width="100"
                    Height="75"
                    RelativePanel.AlignRightWithPanel="True"/>
        </RelativePanel>
    </Grid>
</Page>

生成一个基本的界面出来。

添加点击事件，点击后开始播放音乐，注意，音乐的MP3文件要添加到解决方案中。

private void PauseButton_Click(object sender, RoutedEventArgs e)
        {
            MediaPlayer _mediaPlayer = new MediaPlayer();
            _mediaPlayer.Source = MediaSource.CreateFromUri(new Uri(@"ms-appx:///Assets/11.mp3"));
            _mediaPlayer.Play();
        }

想要实现在后台也能播放音乐的功能，需要点击解决方案中的

1、Package.appxmanifest

2、功能

3、Backgroud Media Playback勾选

具体界面可以详细设置。