原文:
WPF仿网易云音乐系列（三、播放进度条+控制按钮）
View Code
View Code
View Code
一.简介
上一篇，咱们基本把左侧导航栏给搞定，这一篇文章，开始来做一下播放进度条和控制按钮；老规矩，咱们先来看一下原版的效果：
首先，它这个专辑图片，有一个按钮效果，鼠标移入会显示出伸缩箭头；移出后消失，另外，点击此按钮后，弹出播放器歌词页面；歌词页面后面再说，先来看看按钮效果，如下：
还有就是音量按钮了，点击音量按钮，会弹出音量设置面板。面板中存放音量进度条；如下：
特殊的就这两个，下面开始来看一下怎么实现；
二.正文
专辑图片按钮
此按钮看上去可能有点复杂，实际实现起来很简单，咱们可以利用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>
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>按钮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>播放模式/音量控制等按钮
按钮太多了，就直接用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
以上，就是本篇随笔的全部内容，请各位大侠指导。。
来源：oschina
链接：https://my.oschina.net/u/4399002/blog/3590158