1.引言
本篇将介绍音频播放页面的设计情况,也希望能将自己的心得与大家分享。
2.设计情况
2.1 总体设计
XAML页面如下:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<cvt:MusicConverter x:Key="MusicPostionConverter"/>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition x:Name="MediaGrid" Height="*"/>
<RowDefinition x:Name="PlayerPostionGrid" Height="40"/>
<RowDefinition x:Name="BttnGrid" Height="Auto"/>
</Grid.RowDefinitions>
<Border BorderThickness="1">
<MediaElement x:Name="MediaPlayer" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center" MediaOpened="MediaPlayer_MediaOpened" MediaEnded="MediaPlayer_MediaEnded" />
</Border>
<RelativePanel Grid.Row="1" >
<Slider x:Name="PlayerPostion" Height="40" VerticalAlignment="Center" RelativePanel.AlignTopWithPanel="True" Value="{Binding ElementName=MediaPlayer,Path=Position, Converter={StaticResource MusicPostionConverter}, Mode=TwoWay}" Minimum="0.0" />
</RelativePanel>
<RelativePanel Grid.Row="2">
<ToggleSwitch x:Name="SwtchMediaRepeat" OffContent="单曲循环" OnContent="顺序循环" HorizontalAlignment="Left" VerticalAlignment="Center" RelativePanel.AlignLeftWithPanel="True"/>
<StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" >
<Button x:Name="BttnPrevious" FontFamily="Segoe MDL2 Assets" Content="" Click="BttnPrevious_Click"/>
<Button x:Name="BttnPlay" FontFamily="Segoe MDL2 Assets" Content="" Click="BttnPlay_Click"/>
<Button x:Name="BttnStop" FontFamily="Segoe MDL2 Assets" Content="" Click="BttnStop_Click"/>
<Button x:Name="BttnNext" FontFamily="Segoe MDL2 Assets" Content="" Click="BttnNext_Click"/>
</StackPanel>
<TextBlock Grid.Column="2" FontFamily="Segoe MDL2 Assets" Text="" HorizontalAlignment="Left" VerticalAlignment="Center" Tapped="TextBlock_Tapped" RelativePanel.AlignRightWithPanel="True" Margin="0,15,30,0" >
<FlyoutBase.AttachedFlyout>
<Flyout>
<Slider x:Name="SldrVolume" Height="32" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" ValueChanged="SldrVolume_ValueChanged" Value="50" Minimum="0.