WPF Imitation NetEase Cloud Music Series (III. Play progress bar+control button)

1、 Introduction

In the last article, we basically finished the navigation bar on the left. In this article, we will start with playing progress bars and control buttons; The old rule, let's take a look at the effect of the original:

First of all, the album image has a button effect, and when the mouse moves in, it will display a telescopic arrow; It disappears after removal. In addition, click this button to pop up the player lyrics page; Later on the lyrics page, let's first look at the button effect, as follows:

There is also the volume button. Click the volume button, and the volume setting panel will pop up. Store the volume progress bar in the panel; As follows:

These two are special. Let's start to see how to implement them;

2、 Body

　　 Album Picture Button

This button may seem a bit complicated, but it is actually simple to implement. We can use a button on the image to implement it; Then set the mouse event. The default button is Hidden. When the mouse moves in, set Visibility=Visibility. The code is as follows:

Xaml code:

 one  < Image Source ="/CloudMusic;component/Images/AlbumCover/jay.jpg" HorizontalAlignment ="Center" Grid.Column ="0" Width ="60" 
 two  Height ="60" MouseEnter ="Image_MouseEnter" Margin ="1" />
 three                  < Button x:Name ="LrcMaxBtn" Margin ="1" HorizontalAlignment ="Center" Grid.Column ="0" Width ="60" Height ="60" MouseLeave ="LrcMaxBtn_MouseLeave"
 four  Focusable ="False" Visibility ="Hidden" Click ="LrcMaxBtn_Click"
 five  Foreground ="White"
 six  Background ="#33000000"
 seven  HorizontalContentAlignment ="Center"
 eight  VerticalContentAlignment ="Center"
 nine  Padding ="1" >
 ten                      < Path Data =" {StaticResource LrcMaxIcon} " x:Name ="LrcBtnIcon"
 eleven  Stretch ="Fill" Height ="30" Width ="30"
 twelve  SnapsToDevicePixels ="True" 
 thirteen  Fill =" {StaticResource SystemButtonColor} "  >
 fourteen                      </ Path >
 fifteen                      < Button.Template >
 sixteen                          < ControlTemplate TargetType =" {x:Type Button} " >
 seventeen                              < Grid x:Name ="grid" Height =" {TemplateBinding Height} " Width =" {TemplateBinding Width} " Background ="#00FFFFFF" >
 eighteen                                  < ContentPresenter x:Name ="contentPresenter"  
 nineteen  HorizontalAlignment =" {TemplateBinding HorizontalContentAlignment} " 
 twenty  VerticalAlignment =" {TemplateBinding VerticalContentAlignment} " 
 twenty-one  SnapsToDevicePixels =" {TemplateBinding SnapsToDevicePixels} " 
 twenty-two  RecognizesAccessKey ="True"   />
 twenty-three                              </ Grid >
 twenty-four                              < ControlTemplate.Triggers >
 twenty-five                                  < Trigger Property ="IsMouseOver" Value ="True" >
 twenty-six                                      < Setter Property ="Foreground" Value ="White"  />
 twenty-seven                                      <!-- <Setter TargetName="contentPresenter" Property="Opacity" Value="1" /> -->
 twenty-eight                                      < Setter TargetName ="grid" Property ="Background" Value ="#33000000"  />
 twenty-nine                                  </ Trigger >
 thirty                                  < Trigger Property ="IsEnabled" Value ="false" >
 thirty-one                                      < Setter Property ="Foreground" Value ="#ADADAD"  />
 thirty-two                                  </ Trigger >
 thirty-three                              </ ControlTemplate.Triggers >
 thirty-four                          </ ControlTemplate >
 thirty-five                      </ Button.Template >
 thirty-six                  </ Button >
View Code

 

Cs code:

 one  ///  <summary>
 two          /// Album picture button_mouse click three          ///  </summary>
 four          ///  <param name="sender"></param>
 five          ///  <param name="e"></param>
 six          private  void LrcMaxBtn_Click( object sender, RoutedEventArgs e) seven  { eight             
 nine LrcBtnIcon.Data = LrcBtnIcon.Data != this .FindResource( " LrcMinIcon " ) as Geometry ? this .FindResource( " LrcMinIcon " ) as Geometry : this .FindResource( " LrcMaxIcon " ) as Geometry; ten  } eleven          ///  <summary>
 twelve          /// Album picture button_mouse away thirteen          ///  </summary>
 fourteen          ///  <param name="sender"></param>
 fifteen          ///  <param name="e"></param>
 sixteen          private  void LrcMaxBtn_MouseLeave( object sender, MouseEventArgs e) seventeen  { eighteen LrcMaxBtn.Visibility = Visibility.Hidden; nineteen  } twenty          ///  <summary>
 twenty-one          /// Album picture button_mouse entry twenty-two          ///  </summary>
 twenty-three          ///  <param name="sender"></param>
 twenty-four          ///  <param name="e"></param>
 twenty-five          private  void Image_MouseEnter( object sender, MouseEventArgs e) twenty-six  { twenty-seven LrcMaxBtn.Visibility = Visibility; twenty-eight }

Button icon Path:

 one  < 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,3 0.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.3447 265625,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 >
 two      < 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,2 0.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 >

 

Play pause button

 one  < local:FButton Width ="33" Height ="33" Margin ="0 0 12 0" Style =" {StaticResource PlayButton} " Tag =" {StaticResource glyphicon-step-backward} "
 two  x:Name ="Backward_Btn" PressedSize ="32" FontSize ="12"  />
 three 
 four                      < local:FButton Margin ="0 0 12 0" Style =" {StaticResource PlayButton} " CornerRadius ="25" Tag =" {StaticResource glyphicon-play} " 
 five  x:Name ="playBtn" FontSize ="12" Click ="playBtn_Click" />
 six                      < local:FButton Width ="33" Height ="33" Margin ="0 0 6 0" Style =" {StaticResource PlayButton} " Tag =" {StaticResource glyphicon-step-forward} "
 seven  x:Name ="Forward_Btn" PressedSize ="32" FontSize ="12"  />

Xaml style code:

 one  < Style x:Key ="PlayButton" TargetType =" {x:Type local:FButton} " >
 two          < Setter Property ="Background" Value ="#E03636"  />
 three          < Setter Property ="Foreground" Value ="White"  />
 four          < Setter Property ="PressedBackground" Value ="#33000000" />
 five          < Setter Property ="HorizontalContentAlignment" Value ="Center"  />
 six          < Setter Property ="Width" Value ="35"  />
 seven          < Setter Property ="Height" Value ="35"  />
 eight          < Setter Property ="PressedSize" Value ="34" />
 nine          < Setter Property ="FontSize" Value ="14"  />
 ten          < Setter Property ="Padding" Value ="3,1,3,1"  />
 eleven          < Setter Property ="Content" Value =" {x:Null} "  />
 twelve          < Setter Property ="Template"  >
 thirteen              < Setter.Value >
 fourteen                  < ControlTemplate TargetType =" {x:Type local:FButton} " >
 fifteen                      < Border x:Name ="back" CornerRadius ="25" Background =" {TemplateBinding Background} " BorderBrush =" {StaticResource MainColor} " Height =" {TemplateBinding Height} " Width =" {TemplateBinding Width} "  >
 sixteen                          < Border x:Name ="border" Background ="Transparent" 
 seventeen  Height =" {TemplateBinding Height} " 
 eighteen  CornerRadius ="25" 
 nineteen  BorderBrush =" {TemplateBinding Background} "
 twenty  Width =" {TemplateBinding Width} " >
 twenty-one                              < Path Data =" {TemplateBinding Tag} " 
 twenty-two  Stretch ="Fill" Width =" {TemplateBinding FontSize} " Height =" {TemplateBinding FontSize} "
 twenty-three  SnapsToDevicePixels ="True" 
 twenty-four  Fill =" {StaticResource SystemButtonColor} "  >
 twenty-five                              </ Path >
 twenty-six                          </ Border >
 twenty-seven                      </ Border >
 twenty-eight                      <!-- trigger -->
 twenty-nine                      < ControlTemplate.Triggers >
 thirty                          <!-- Set the background and foreground styles when the mouse enters thirty-one  <Trigger Property="IsMouseOver" Value="True"> thirty-two  <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, thirty-three  Path=PressedBackground}" TargetName="border" /> thirty-four  </Trigger> -->
 thirty-five                          <!-- Foreground and background styles when the mouse is pressed -->
 thirty-six                          < Trigger Property ="IsPressed" Value ="True" >
 thirty-seven                              < Setter Property ="Background" Value =" {Binding RelativeSource={RelativeSource Mode=TemplatedParent}, thirty-eight  Path=PressedBackground} " TargetName ="border"  />
 thirty-nine                              < Setter Property ="Width" Value =" {Binding RelativeSource={RelativeSource Mode=TemplatedParent}, forty  Path=PressedSize} " TargetName ="back" />
 forty-one                              < Setter Property ="Height" Value =" {Binding RelativeSource={RelativeSource Mode=TemplatedParent}, forty-two  Path=PressedSize} " TargetName ="back" />
 forty-three                          </ Trigger >
 forty-four                          < Trigger Property ="IsEnabled" Value ="false" >
 forty-five                              < Setter Property ="Opacity" Value ="0.5" TargetName ="border" />
 forty-six                          </ Trigger >
 forty-seven                      </ ControlTemplate.Triggers >
 forty-eight                  </ ControlTemplate >
 forty-nine              </ Setter.Value >
 fifty          </ Setter >
 fifty-one      </ Style >
View Code

Button Path:

 one  < PathGeometry x:Key ="glyphicon-play" > F1M7.32421827316284,3.17216110229492L42.626953125,28.1233329772949 7.32421827316284,53.0745048522949 7.32421827316284,3.17216110229492z </ PathGeometry >
 two      < 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 >
 three      < 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 >
 four      < 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 >
 five

　　 Play progress bar

 one  < StackPanel Grid.Column ="2" Orientation ="Vertical" VerticalAlignment ="Center" >
 two                      < Grid HorizontalAlignment ="Stretch"  >
 three                          < StackPanel HorizontalAlignment ="Left" Orientation ="Horizontal" >
 four                              < TextBlock Text =Nocturne Foreground ="#444" FontSize ="12" />
 five                              < TextBlock Text =" - "  />
 six                              < TextBlock Text ="Jay Chou" Foreground =" {StaticResource LineColor} " FontSize ="12" />
 seven                          </ StackPanel >
 eight                          < StackPanel HorizontalAlignment ="Right" Orientation ="Horizontal" >
 nine                              < TextBlock Text ="00:00" Foreground ="#444" FontSize ="8" />
 ten                              < TextBlock Text =" / " FontSize ="8" />
 eleven                              < TextBlock Text ="05:12" Foreground ="#777" FontSize ="8" />
 twelve                          </ StackPanel >
 thirteen                      </ Grid >
 fourteen                      < Slider x:Name ="musicSlider" Value ="0" Maximum ="100" Minimum ="1" TickFrequency ="1" Template =" {StaticResource SliderStyleTemplate} " 
 fifteen                           />
 sixteen 
 seventeen                  </ StackPanel >

Progress bar style:

 one  < Style x:Key ="DecreaseRepeatButtonStyle" TargetType =" {x:Type RepeatButton} " >
 two          < Setter Property ="Template" >
 three              < Setter.Value >
 four                  < ControlTemplate TargetType =" {x:Type RepeatButton} " >
 five                      < Border Height ="2" Background =" {StaticResource MainColor} " >
 six                      </ Border >
 seven                  </ ControlTemplate >
 eight              </ Setter.Value >
 nine          </ Setter >
 ten          < Setter Property ="Height" Value ="19" />
 eleven          < Setter Property ="VerticalAlignment" Value ="Bottom" />
 twelve          < Setter Property ="BorderThickness" Value ="0" />
 thirteen          < Setter Property ="Focusable" Value ="False" />
 fourteen          < Setter Property ="SnapsToDevicePixels" Value ="true"  />
 fifteen      </ Style >
 sixteen      < Style x:Key ="IncreaseRepeatButtonStyle" TargetType =" {x:Type RepeatButton} " >
 seventeen          < Setter Property ="Template" >
 eighteen              < Setter.Value >
 nineteen                  < ControlTemplate TargetType =" {x:Type RepeatButton} " >
 twenty                      < Border Height ="2" Background ="#e7e7e7" >
 twenty-one                      </ Border >
 twenty-two                  </ ControlTemplate >
 twenty-three              </ Setter.Value >
 twenty-four          </ Setter >
 twenty-five          < Setter Property ="SnapsToDevicePixels" Value ="true"  />
 twenty-six          < Setter Property ="Height" Value ="19" />
 twenty-seven          < Setter Property ="VerticalAlignment" Value ="Bottom" />
 twenty-eight          < Setter Property ="BorderThickness" Value ="0" />
 twenty-nine          < Setter Property ="Focusable" Value ="False" />
 thirty      </ Style >
 thirty-one      < Style x:Key ="Slider_Thumb" TargetType =" {x:Type Thumb} " >
 thirty-two          < Setter Property ="Focusable" Value ="False"  />
 thirty-three          < Setter Property ="Template" >
 thirty-four              < Setter.Value >
 thirty-five                  < ControlTemplate TargetType =" {x:Type Thumb} " >
 thirty-six                      < Border BorderBrush =" {StaticResource MainColor} " Background ="White" BorderThickness ="1" CornerRadius ="25" Width ="13" Height ="13" >
 thirty-seven                              < Ellipse Name ="e" Width ="3" Height ="3" Fill =" {StaticResource MainColor} " HorizontalAlignment ="Center" VerticalAlignment ="Center" />
 thirty-eight                      </ Border >
 thirty-nine                  </ ControlTemplate >
 forty              </ Setter.Value >
 forty-one          </ Setter >
 forty-two      </ Style >
 forty-three      < ControlTemplate x:Key ="SliderStyleTemplate" TargetType =" {x:Type Slider} " >
 forty-four          < Grid >
 forty-five              < Grid.RowDefinitions >
 forty-six                  < RowDefinition Height ="auto" />
 forty-seven                  < RowDefinition Height ="20" />
 forty-eight                  < RowDefinition Height ="auto" />
 forty-nine              </ Grid.RowDefinitions >
 fifty              < Track x:Name ="PART_Track" Grid.Row ="1" HorizontalAlignment ="Stretch" >
 fifty-one                  < Track.IncreaseRepeatButton >
 fifty-two                      < RepeatButton Style =" {StaticResource IncreaseRepeatButtonStyle} "
 fifty-three  Command ="Slider.IncreaseLarge" />
 fifty-four                  </ Track.IncreaseRepeatButton >
 fifty-five                  < Track.DecreaseRepeatButton >
 fifty-six                      < RepeatButton Style =" {StaticResource DecreaseRepeatButtonStyle} "
 fifty-seven  Command ="Slider.DecreaseLarge" />
 fifty-eight                  </ Track.DecreaseRepeatButton >
 fifty-nine                  < Track.Thumb >
 sixty                      < Thumb Style =" {StaticResource Slider_Thumb} "  />
 sixty-one                  </ Track.Thumb >
 sixty-two              </ Track >
 sixty-three          </ Grid >
 sixty-four      </ ControlTemplate >
View Code

　　 Play mode/volume control and other buttons

There are too many buttons, so I use iconfont directly.. Path is still troublesome

 one  < StackPanel Grid.Column ="3" Orientation ="Horizontal" >
 two                      < 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} " />
 three                      < local:FButton x:Name ="PlayModel" Margin ="10,0" Foreground ="#a7a7a7" VerticalAlignment ="Center" FIcon ="&#xe685;" Style =" {StaticResource FButton_Transparency} " Click ="FButton_Click" />
 four                      < local:FButton Margin ="10,0" Foreground ="#a7a7a7" VerticalAlignment ="Center" FIcon ="&#xe717;" Style =" {StaticResource FButton_Transparency} "
 five  Click ="FButton_Click_2" />
 six                      < local:FButton Margin ="10,0,0,0" FIconSize ="16" Foreground ="#a7a7a7" VerticalAlignment ="Center" FIcon ="&#xe688;" Style =" {StaticResource FButton_Transparency} " />
 seven                      < Border Background ="#a7a7a7" CornerRadius ="8" Width ="25" Height ="15" >
 eight                          < TextBlock Text ="105" FontSize ="10" Foreground ="White" HorizontalAlignment ="Center" VerticalAlignment ="Center" />
 nine                      </ Border >
 ten                  </ StackPanel >

Button event cs:

 one   ///  <summary>
 two          /// The play mode button is clicked three          ///  </summary>
 four          ///  <param name="sender"></param>
 five          ///  <param name="e"></param>
 six          private  void FButton_Click( object sender, RoutedEventArgs e) seven  { eight playmodeIndex++ ; nine              if (playmodeIndex == four ) ten  { eleven playmodeIndex = zero ; twelve  } thirteen              string [] playmodeListsPath = { " \xe685 " , " \xe684 " , " \xe687 " , " \xe686 " }; fourteen PlayModel.FIcon = playmodeListsPath[playmodeIndex]; fifteen  } sixteen          ///  <summary>
 seventeen          /// I like buttons being clicked eighteen          ///  </summary>
 nineteen          ///  <param name="sender"></param>
 twenty          ///  <param name="e"></param>
 twenty-one          private  void FButton_Click_1( object sender, RoutedEventArgs e) twenty-two  { twenty-three likeBtn.FIcon = likeBtn.FIcon == " \xe68d " ? " \xe683 " : " \xe68d " ; twenty-four Brush MainColor = this .FindResource( " MainColor " ) as Brush; twenty-five Brush DefualtColor = this .FindResource( " LineColor " ) as Brush; twenty-six likeBtn.Foreground = likeBtn.Foreground == MainColor ? DefualtColor : MainColor; twenty-seven  } twenty-eight          ///  <summary>
 twenty-nine          /// Volume button clicked thirty          ///  </summary>
 thirty-one          ///  <param name="sender"></param>
 thirty-two          ///  <param name="e"></param>
 thirty-three          private  void FButton_Click_2( object sender, RoutedEventArgs e) thirty-four  { thirty-five GridVolume.Visibility = GridVolume.Visibility == Visibility ? Visibility.Collapsed : Visibility; thirty-six }

Volume control panel

　　 The volume control button mainly uses Polyline to draw the outer border, and then add a progress bar. The style of the progress bar is the same as that of the playback progress bar; (I'm not lazy, as Netease Cloud is)

Xaml code

 one  < Grid Name ="GridVolume" Width ="283" Background ="White" Height ="65" Grid.Column ="2" HorizontalAlignment ="Right" 
 two  VerticalAlignment ="Bottom" Margin ="10,0" MouseLeave ="GridVolume_MouseLeave" Visibility ="Collapsed" >
 three                      < StackPanel Orientation ="Horizontal" VerticalAlignment ="Center" >
 four                          < Image Name ="ImgVolume" Source ="/CloudMusic;component/Images/Volume/volume_large.png"
 five  Margin ="10,2,10,2" Width ="20" Height ="20" />
 six                          < Slider Name ="sliderVolume" Template =" {StaticResource SliderStyleTemplate} " 
 seven  Width ="230" Maximum ="100" Minimum ="0" Value ="80"
 eight  VerticalAlignment ="Center" />
 nine                      </ StackPanel >
 ten                      < Polyline Stroke =" {StaticResource LineColor} " StrokeThickness ="1"
 eleven  StrokeLineJoin ="Round" Points ="280,0 280,45 175,45 165,55 155,45 0,45 0,0 280,0"
 twelve  HorizontalAlignment ="Center" VerticalAlignment ="Bottom" >
 thirteen                         
 fourteen                      </ Polyline >
 fifteen                  </ Grid >

Event cs:

 one          private  void GridVolume_MouseLeave( object sender, MouseEventArgs e) two  { three GridVolume.Visibility = Visibility.Collapsed; four }

 

The above is all the code styles of the playback control panel, to see how the effect is:

 

 

Is there a 100% reduction degree! Not too handsome, haha

 

The above is the whole content of this essay. Please guide us..

 

posted @ 2018-07-05 11:47   Xiaoyu   Reading（ six thousand two hundred and thirty )  Comments（ eight )  edit   Collection   report