WPF仿网易云音乐系列（三、播放进度条+控制按钮）
一.简介
上一篇，咱们基本把左侧导航栏给搞定，这一篇文章，开始来做一下播放进度条和控制按钮；老规矩，咱们先来看一下原版的效果：
首先，它这个专辑图片，有一个按钮效果，鼠标移入会显示出伸缩箭头；移出后消失，另外，点击此按钮后，弹出播放器歌词页面；歌词页面后面再说，先来看看按钮效果，如下：
还有就是音量按钮了，点击音量按钮，会弹出音量设置面板。面板中存放音量进度条；如下：
特殊的就这两个，下面开始来看一下怎么实现；
二.正文
专辑图片按钮
此按钮看上去可能有点复杂，实际实现起来很简单，咱们可以利用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>
View Code
cs代码：
1 /// <summary> 2 /// 专辑图片按钮_鼠标单击 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 private void LrcMaxBtn_Click(object sender, RoutedEventArgs e) 7 { 8 9 LrcBtnIcon.Data = LrcBtnIcon.Data != this.FindResource("LrcMinIcon") as Geometry ? this.FindResource("LrcMinIcon") as Geometry : this.FindResource("LrcMaxIcon") as Geometry; 10 } 11 /// <summary> 12 /// 专辑图片按钮_鼠标离开 13 /// </summary> 14 /// <param name="sender"></param> 15 /// <param name="e"></param> 16 private void LrcMaxBtn_MouseLeave(object sender, MouseEventArgs e) 17 { 18 LrcMaxBtn.Visibility = Visibility.Hidden; 19 } 20 /// <summary> 21 /// 专辑图片按钮_鼠标进入 22 /// </summary> 23 /// <param name="sender"></param> 24 /// <param name="e"></param> 25 private void Image_MouseEnter(object sender, MouseEventArgs e) 26 { 27 LrcMaxBtn.Visibility = Visibility; 28 }
按钮图标Path：
1 <PathGeometry x:Key="LrcMaxIcon">F1M21.6552734375,30.3450126647949L22.6806640625,30.8332939147949 23.095703125,31.8830986022949 22.705078125,33.0061454772949 4.78515577316284,50.0471611022949 15.478515625,50.0471611022949 16.4794921875,50.4866142272949 16.89453125,51.5364189147949 16.50390625,52.5862236022949 15.478515625,53.0256767272949 1.51367175579071,53.0256767272949 0.537109375,52.5862236022949 0.09765625,51.5120048522949 0.09765625,37.2053642272949 0.488281220197678,36.1799736022949 1.46484363079071,35.7405204772949 2.51464867591858,36.1799736022949 2.97851538658142,37.2053642272949 2.97851538658142,47.8010673522949 3.07617163658142,47.8010673522949 20.703125,30.7112236022949 21.6552734375,30.3450126647949z M34.521484375,3.22098922729492L48.486328125,3.22098922729492 49.462890625,3.66044235229492 49.90234375,4.73466110229492 49.90234375,19.0413017272949 49.51171875,20.0666923522949 48.53515625,20.5061454772949 47.4853515625,20.0666923522949 47.021484375,19.0413017272949 46.923828125,8.44559860229492 29.296875,25.4377861022949 28.3447265625,25.8039970397949 27.3193359375,25.3157157897949 26.904296875,24.2659111022949 27.294921875,23.1428642272949 45.21484375,6.19950485229492 34.521484375,6.19950485229492 33.5205078125,5.76005172729492 33.10546875,4.71024751663208 33.49609375,3.66044235229492 34.521484375,3.22098922729492z</PathGeometry> 2 <PathGeometry x:Key="LrcMinIcon">F1M20.60546875,27.7815361022949L21.6796875,28.2698173522949 22.16796875,29.3440361022949 22.16796875,45.0666923522949 21.6796875,46.1409111022949 20.60546875,46.6291923522949 19.482421875,46.1409111022949 19.04296875,45.0666923522949 19.04296875,33.2014579772949 2.685546875,49.5588798522949 1.5625,49.9983329772949 0.439453125,49.5588798522949 0,48.4358329772949 0.439453125,47.3127861022949 16.845703125,30.9553642272949 4.98046875,30.9553642272949 3.857421875,30.4670829772949 3.41796875,29.3928642272949 3.857421875,28.2698173522949 4.98046875,27.8303642272949 20.60546875,27.7815361022949z M48.4375,-0.00166702270507813L49.560546875,0.437786102294922 50,1.56083297729492 49.560546875,2.68387985229492 33.154296875,19.0413017272949 45.01953125,19.0413017272949 46.142578125,19.5295829772949 46.58203125,20.6038017272949 46.142578125,21.7268486022949 45.01953125,22.1663017272949 29.39453125,22.2151298522949 28.3203125,21.7268486022949 27.83203125,20.6526298522949 27.83203125,4.92997360229492 28.3203125,3.85575485229492 29.39453125,3.36747360229492 30.517578125,3.85575485229492 30.95703125,4.92997360229492 30.95703125,16.7952079772949 47.314453125,0.437786102294922 48.4375,-0.00166702270507813z</PathGeometry>
播放暂停按钮
1 <local:FButton Width="33" Height="33" Margin="0 0 12 0" Style="{StaticResource PlayButton}" Tag="{StaticResource glyphicon-step-backward}" 2 x:Name="Backward_Btn" PressedSize="32" FontSize="12" /> 3 4 <local:FButton Margin="0 0 12 0" Style="{StaticResource PlayButton}" CornerRadius="25" Tag="{StaticResource glyphicon-play}" 5 x:Name="playBtn" FontSize="12" Click="playBtn_Click"/> 6 <local:FButton Width="33" Height="33" Margin="0 0 6 0" Style="{StaticResource PlayButton}" Tag="{StaticResource glyphicon-step-forward}" 7 x:Name="Forward_Btn" PressedSize="32" FontSize="12" />
xaml样式代码：
1 <Style x:Key="PlayButton" TargetType="{x:Type local:FButton}"> 2 <Setter Property="Background" Value="#E03636" /> 3 <Setter Property="Foreground" Value="White" /> 4 <Setter Property="PressedBackground" Value="#33000000"/> 5 <Setter Property="HorizontalContentAlignment" Value="Center" /> 6 <Setter Property="Width" Value="35" /> 7 <Setter Property="Height" Value="35" /> 8 <Setter Property="PressedSize" Value="34"/> 9 <Setter Property="FontSize" Value="14" /> 10 <Setter Property="Padding" Value="3,1,3,1" /> 11 <Setter Property="Content" Value="{x:Null}" /> 12 <Setter Property="Template" > 13 <Setter.Value> 14 <ControlTemplate TargetType="{x:Type local:FButton}"> 15 <Border x:Name="back" CornerRadius="25" Background="{TemplateBinding Background}" BorderBrush="{StaticResource MainColor}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" > 16 <Border x:Name="border" Background="Transparent" 17 Height="{TemplateBinding Height}" 18 CornerRadius="25" 19 BorderBrush="{TemplateBinding Background}" 20 Width="{TemplateBinding Width}"> 21 <Path Data="{TemplateBinding Tag}" 22 Stretch="Fill" Width="{TemplateBinding FontSize}" Height="{TemplateBinding FontSize}" 23 SnapsToDevicePixels="True" 24 Fill="{StaticResource SystemButtonColor}" > 25 </Path> 26 </Border> 27 </Border> 28 <!--触发器--> 29 <ControlTemplate.Triggers> 30 <!--设置鼠标进入时的背景、前景样式 31 <Trigger Property="IsMouseOver" Value="True"> 32 <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 33 Path=PressedBackground}" TargetName="border" /> 34 </Trigger>--> 35 <!--鼠标按下时的前景、背景样式--> 36 <Trigger Property="IsPressed" Value="True"> 37 <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 38 Path=PressedBackground}" TargetName="border" /> 39 <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 40 Path=PressedSize}" TargetName="back"/> 41 <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 42 Path=PressedSize}" TargetName="back"/> 43 </Trigger> 44 <Trigger Property="IsEnabled" Value="false"> 45 <Setter Property="Opacity" Value="0.5" TargetName="border"/> 46 </Trigger> 47 </ControlTemplate.Triggers> 48 </ControlTemplate> 49 </Setter.Value> 50 </Setter> 51 </Style>
View Code
按钮Path：
1 <PathGeometry x:Key="glyphicon-play">F1M7.32421827316284,3.17216110229492L42.626953125,28.1233329772949 7.32421827316284,53.0745048522949 7.32421827316284,3.17216110229492z</PathGeometry> 2 <PathGeometry x:Key="glyphicon-pause">F1M34.130859375,12.4983329772949L35.3515625,13.0354423522949 35.888671875,14.2561454772949 35.888671875,41.9416923522949 35.3515625,43.2112236022949 34.1064453125,43.6995048522949 32.861328125,43.2112236022949 32.373046875,41.9416923522949 32.373046875,14.2561454772949 32.861328125,13.0354423522949 34.130859375,12.4983329772949z M15.91796875,12.4983329772949L17.138671875,13.0354423522949 17.626953125,14.2561454772949 17.626953125,41.9416923522949 17.138671875,43.2112236022949 15.8935546875,43.6995048522949 14.6484375,43.2112236022949 14.16015625,41.9416923522949 14.16015625,14.2561454772949 14.6484375,13.0354423522949 15.91796875,12.4983329772949z</PathGeometry> 3 <PathGeometry x:Key="glyphicon-step-forward">F1M38.28125,9.42216110229492L39.9169921875,10.0813407897949 40.625,11.7170829772949 40.625,44.5295829772949 39.9169921875,46.1653251647949 38.28125,46.8245048522949 36.6455078125,46.1653251647949 35.9375,44.5295829772949 35.9375,31.1506767272949 13.037109375,46.3850517272949 11.81640625,46.7512626647949 10.6201171875,46.4827079772949 9.716796875,45.6282157897949 9.375,44.4319267272949 9.375,13.3772392272949 9.6923828125,12.1809501647949 10.595703125,11.3264579772949 11.81640625,11.0579032897949 13.037109375,11.4241142272949 35.9375,26.7073173522949 35.9375,11.7170829772949 36.6455078125,10.0813407897949 38.28125,9.42216110229492z</PathGeometry> 4 <PathGeometry x:Key="glyphicon-step-backward">F1M19.78515625,10.0779161453247L20.7421875,10.2341651916504 21.396484375,10.9568214416504 21.640625,12.1872901916504 21.640625,31.4060401916504 21.396484375,32.6413917541504 20.7421875,33.3786964416504 19.775390625,33.5495948791504 18.59375,33.0857276916504 3.82812523841858,23.9451026916504 3.3984375,23.6716651916504 3.3984375,32.3435401916504 3.10546875,33.1052589416504 2.34374976158142,33.4372901916504 1.09375,33.4372901916504 0.31249988079071,33.1052589416504 -7.35418552721967E-08,32.3435401916504 -7.35418552721967E-08,11.2888526916504 0.31249988079071,10.5271339416504 1.09375,10.1951026916504 2.34374976158142,10.1951026916504 3.10546875,10.5271339416504 3.3984375,11.2888526916504 3.3984375,20.3904151916504 3.78906226158142,20.1169776916504 18.6328125,10.5466651916504 19.78515625,10.0779161453247z</PathGeometry> 5
播放进度条
1 <StackPanel Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center"> 2 <Grid HorizontalAlignment="Stretch" > 3 <StackPanel HorizontalAlignment="Left" Orientation="Horizontal"> 4 <TextBlock Text="夜曲" Foreground="#444" FontSize="12"/> 5 <TextBlock Text=" - " /> 6 <TextBlock Text="周杰伦" Foreground="{StaticResource LineColor}" FontSize="12"/> 7 </StackPanel> 8 <StackPanel HorizontalAlignment="Right" Orientation="Horizontal"> 9 <TextBlock Text="00:00" Foreground="#444" FontSize="8"/> 10 <TextBlock Text=" / " FontSize="8"/> 11 <TextBlock Text="05:12" Foreground="#777" FontSize="8"/> 12 </StackPanel> 13 </Grid> 14 <Slider x:Name="musicSlider" Value="0" Maximum="100" Minimum="1" TickFrequency="1" Template="{StaticResource SliderStyleTemplate}" 15 /> 16 17 </StackPanel>
进度条样式：
1 <Style x:Key="DecreaseRepeatButtonStyle" TargetType="{x:Type RepeatButton}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type RepeatButton}"> 5 <Border Height="2" Background="{StaticResource MainColor}"> 6 </Border> 7 </ControlTemplate> 8 </Setter.Value> 9 </Setter> 10 <Setter Property="Height" Value="19"/> 11 <Setter Property="VerticalAlignment" Value="Bottom"/> 12 <Setter Property="BorderThickness" Value="0"/> 13 <Setter Property="Focusable" Value="False"/> 14 <Setter Property="SnapsToDevicePixels" Value="true" /> 15 </Style> 16 <Style x:Key="IncreaseRepeatButtonStyle" TargetType="{x:Type RepeatButton}"> 17 <Setter Property="Template"> 18 <Setter.Value> 19 <ControlTemplate TargetType="{x:Type RepeatButton}"> 20 <Border Height="2" Background="#e7e7e7"> 21 </Border> 22 </ControlTemplate> 23 </Setter.Value> 24 </Setter> 25 <Setter Property="SnapsToDevicePixels" Value="true" /> 26 <Setter Property="Height" Value="19"/> 27 <Setter Property="VerticalAlignment" Value="Bottom"/> 28 <Setter Property="BorderThickness" Value="0"/> 29 <Setter Property="Focusable" Value="False"/> 30 </Style> 31 <Style x:Key="Slider_Thumb" TargetType="{x:Type Thumb}"> 32 <Setter Property="Focusable" Value="False" /> 33 <Setter Property="Template"> 34 <Setter.Value> 35 <ControlTemplate TargetType="{x:Type Thumb}"> 36 <Border BorderBrush="{StaticResource MainColor}" Background="White" BorderThickness="1" CornerRadius="25" Width="13" Height="13"> 37 <Ellipse Name="e" Width="3" Height="3" Fill="{StaticResource MainColor}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 38 </Border> 39 </ControlTemplate> 40 </Setter.Value> 41 </Setter> 42 </Style> 43 <ControlTemplate x:Key="SliderStyleTemplate" TargetType="{x:Type Slider}"> 44 <Grid> 45 <Grid.RowDefinitions> 46 <RowDefinition Height="auto"/> 47 <RowDefinition Height="20"/> 48 <RowDefinition Height="auto"/> 49 </Grid.RowDefinitions> 50 <Track x:Name="PART_Track" Grid.Row="1" HorizontalAlignment="Stretch"> 51 <Track.IncreaseRepeatButton> 52 <RepeatButton Style="{StaticResource IncreaseRepeatButtonStyle}" 53 Command="Slider.IncreaseLarge"/> 54 </Track.IncreaseRepeatButton> 55 <Track.DecreaseRepeatButton> 56 <RepeatButton Style="{StaticResource DecreaseRepeatButtonStyle}" 57 Command="Slider.DecreaseLarge"/> 58 </Track.DecreaseRepeatButton> 59 <Track.Thumb> 60 <Thumb Style="{StaticResource Slider_Thumb}" /> 61 </Track.Thumb> 62 </Track> 63 </Grid> 64 </ControlTemplate>
View Code
播放模式/音量控制等按钮
按钮太多了，就直接用iconfont了。。Path还是比较麻烦
1 <StackPanel Grid.Column="3" Orientation="Horizontal"> 2 <local:FButton x:Name="likeBtn" Click="FButton_Click_1" Width="28" Margin="20,0,10,0" FIconSize="16" Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="" Style="{StaticResource FButton_Transparency}"/> 3 <local:FButton x:Name="PlayModel" Margin="10,0" Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="" Style="{StaticResource FButton_Transparency}" Click="FButton_Click"/> 4 <local:FButton Margin="10,0" Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="" Style="{StaticResource FButton_Transparency}" 5 Click="FButton_Click_2"/> 6 <local:FButton Margin="10,0,0,0" FIconSize="16" Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="" Style="{StaticResource FButton_Transparency}"/> 7 <Border Background="#a7a7a7" CornerRadius="8" Width="25" Height="15"> 8 <TextBlock Text="105" FontSize="10" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/> 9 </Border> 10 </StackPanel>
按钮事件cs：
1 /// <summary> 2 /// 播放模式按钮被单击 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 private void FButton_Click(object sender, RoutedEventArgs e) 7 { 8 playmodeIndex++; 9 if (playmodeIndex == 4) 10 { 11 playmodeIndex = 0; 12 } 13 string[] playmodeListsPath = { "\xe685", "\xe684", "\xe687", "\xe686" }; 14 PlayModel.FIcon = playmodeListsPath[playmodeIndex]; 15 } 16 /// <summary> 17 /// 我喜欢按钮被单击 18 /// </summary> 19 /// <param name="sender"></param> 20 /// <param name="e"></param> 21 private void FButton_Click_1(object sender, RoutedEventArgs e) 22 { 23 likeBtn.FIcon = likeBtn.FIcon == "\xe68d" ? "\xe683" : "\xe68d"; 24 Brush MainColor = this.FindResource("MainColor") as Brush; 25 Brush DefualtColor = this.FindResource("LineColor") as Brush; 26 likeBtn.Foreground = likeBtn.Foreground == MainColor ? DefualtColor : MainColor; 27 } 28 /// <summary> 29 /// 音量按钮被单击 30 /// </summary> 31 /// <param name="sender"></param> 32 /// <param name="e"></param> 33 private void FButton_Click_2(object sender, RoutedEventArgs e) 34 { 35 GridVolume.Visibility = GridVolume.Visibility == Visibility ? Visibility.Collapsed : Visibility; 36 }
音量控制面板
音量控制按钮主要利用Polyline画出外层边框，然后加入进度条即可，进度条样式和播放进度条一样；（不是我懒，网易云就是这样）
xaml代码
1 <Grid Name="GridVolume" Width="283" Background="White" Height="65" Grid.Column="2" HorizontalAlignment="Right" 2 VerticalAlignment="Bottom" Margin="10,0" MouseLeave="GridVolume_MouseLeave" Visibility="Collapsed"> 3 <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> 4 <Image Name="ImgVolume" Source="/CloudMusic;component/Images/Volume/volume_large.png" 5 Margin="10,2,10,2" Width="20" Height="20"/> 6 <Slider Name="sliderVolume" Template="{StaticResource SliderStyleTemplate}" 7 Width="230" Maximum="100" Minimum="0" Value="80" 8 VerticalAlignment="Center"/> 9 </StackPanel> 10 <Polyline Stroke="{StaticResource LineColor}" StrokeThickness="1" 11 StrokeLineJoin="Round" Points="280,0 280,45 175,45 165,55 155,45 0,45 0,0 280,0" 12 HorizontalAlignment="Center" VerticalAlignment="Bottom"> 13 14 </Polyline> 15 </Grid>
事件cs：
1 private void GridVolume_MouseLeave(object sender, MouseEventArgs e) 2 { 3 GridVolume.Visibility = Visibility.Collapsed; 4 }
以上就是播放控制面板的所有代码样式了，来看看效果如何：
还原度百分之百有没有！简直不要太帅，haha
以上，就是本篇随笔的全部内容，请各位大侠指导。。
版权声明：本文为xytx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。