WPF仿网易云音乐系列(三、播放进度条+控制按钮)

丶灬走出姿态 提交于 2021-01-02 15:27:41
原文: 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="&#xe683;" Style="{StaticResource FButton_Transparency}"/>
 3                     <local:FButton x:Name="PlayModel"  Margin="10,0"  Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="&#xe685;" Style="{StaticResource FButton_Transparency}" Click="FButton_Click"/>
 4                     <local:FButton  Margin="10,0"  Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="&#xe717;" Style="{StaticResource FButton_Transparency}"
 5                                     Click="FButton_Click_2"/>
 6                     <local:FButton  Margin="10,0,0,0" FIconSize="16" Foreground="#a7a7a7" VerticalAlignment="Center" FIcon="&#xe688;" 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

 

以上,就是本篇随笔的全部内容,请各位大侠指导。。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!