上一篇，咱们基本把左侧导航栏给搞定，这一篇文章，开始来做一下播放进度条和控制按钮；老规矩，咱们先来看一下原版的效果：
首先，它这个专辑图片，有一个按钮效果，鼠标移入会显示出伸缩箭头；移出后消失，另外，点击此按钮后，弹出播放器歌词页面；歌词页面后面再说，先来看看按钮效果，如下：
还有就是音量按钮了，点击音量按钮，会弹出音量设置面板。面板中存放音量进度条；如下：
特殊的就这两个，下面开始来看一下怎么实现；
二.正文专辑图片按钮
此按钮看上去可能有点复杂，实际实现起来很简单，咱们可以利用image上面放一个按钮来实现；然后设置鼠标事件，默认按钮为Hidden，当鼠标移入时，设置Visibility = Visibility，代码如下：
xaml代码：
1 <Image Source="/CloudMusic;component/Images/AlbumCover/jay.jpg" HorizontalAlignment="Center" Grid.Column="0" Width="60" 2 Height="60" MouseEnter="Image_MouseEnter" Margin="1"/> 3 <Button x:Name="LrcMaxBtn" Margin="1" HorizontalAlignment="Center" Grid.Column="0" Width="60" Height="60" MouseLeave="LrcMaxBtn_MouseLeave" 4 Focusable="False" Visibility="Hidden" Click="LrcMaxBtn_Click" 5 Foreground="White" 6 Background="#33000000" 7 HorizontalContentAlignment ="Center" 8 VerticalContentAlignment="Center" 9 Padding="1"> 10 <Path Data="{StaticResource LrcMaxIcon}" x:Name="LrcBtnIcon" 11 Stretch="Fill" Height="30" Width="30" 12 SnapsToDevicePixels="True" 13 Fill="{StaticResource SystemButtonColor}" > 14 </Path> 15 <Button.Template> 16 <ControlTemplate TargetType="{x:Type Button}"> 17 <Grid x:Name="grid" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Background="#00FFFFFF"> 18 <ContentPresenter x:Name="contentPresenter" 19 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 20 VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 21 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 22 RecognizesAccessKey="True" /> 23 </Grid> 24 <ControlTemplate.Triggers> 25 <Trigger Property="IsMouseOver" Value="True"> 26 <Setter Property="Foreground" Value="White" /> 27 <!--<Setter TargetName="contentPresenter" Property="Opacity" Value="1" />--> 28 <Setter TargetName="grid" Property="Background" Value="#33000000" /> 29 </Trigger> 30 <Trigger Property="IsEnabled" Value="false"> 31 <Setter Property="Foreground" Value="#ADADAD" /> 32 </Trigger> 33 </ControlTemplate.Triggers> 34 </ControlTemplate> 35 </Button.Template> 36 </Button>