1.简介
上一篇咱们说到，网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现，具体如何实现，咱们下面开始干；
首先来一张网易云音乐PC版原图（个人觉得PC版比UWP版左侧菜单好看点）：
然后当然是再上以下咱们做出的效果图了：
还原度百分之百有没有。。。
2.上硬菜
首先是无边框窗口方案，这里使用的是DMSkin for WPF,Github地址：https://github.com/944095635/DMSkin-for-WPF
Expander
1 <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton"> 2 <Border Name="Border" CornerRadius="2,0,0,0" Background="Transparent" BorderThickness="0,0,1,0"> 3 <Image Name="image" Source="/CloudMusic;component/Images/tabitems/down_normal.png" /> 4 Border> 5 <ControlTemplate.Triggers> 6 <Trigger Property="IsChecked" Value="true"> 7 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/up_normal.png" /> 8 Trigger> 9 <Trigger Property="IsChecked" Value="false"> 10 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/down_normal.png" /> 11 Trigger> 12 <MultiTrigger> 13 <MultiTrigger.Conditions> 14 <Condition Property="IsChecked" Value="true" /> 15 <Condition Property="IsMouseOver" Value="true" /> 16 MultiTrigger.Conditions> 17 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/up_hover.png" /> 18 MultiTrigger> 19 <MultiTrigger> 20 <MultiTrigger.Conditions> 21 <Condition Property="IsChecked" Value="false" /> 22 <Condition Property="IsMouseOver" Value="true" /> 23 MultiTrigger.Conditions> 24 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/down_hover.png" /> 25 MultiTrigger> 26 ControlTemplate.Triggers> 27 ControlTemplate> 28 <Style TargetType="Expander"> 29 <Setter Property="Template"> 30 <Setter.Value> 31 <ControlTemplate TargetType="Expander"> 32 <Grid> 33 <Grid.RowDefinitions> 34 <RowDefinition Height="auto" /> 35 <RowDefinition Name="ContentRow" Height="0" /> 36 Grid.RowDefinitions> 37 <Border Name="Border" Grid.Row="0" BorderThickness="1" CornerRadius="2,2,0,0"> 38 <Grid Width="140" HorizontalAlignment="Left"> 39 <Grid.ColumnDefinitions> 40 <ColumnDefinition Width="*" /> 41 <ColumnDefinition Width="20" /> 42 Grid.ColumnDefinitions> 43 <ToggleButton IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 44 OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" Grid.Column="1" > 45 46 ToggleButton> 47 <ContentPresenter Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" /> 48 Grid> 49 Border> 50 <Border Name="Content" Grid.Row="1" CornerRadius="0,0,2,2"> 51 <ContentPresenter /> 52 Border> 53 54 Grid> 55 <ControlTemplate.Triggers> 56 <Trigger Property="IsExpanded" Value="True"> 57 <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=DesiredHeight}" /> 58 Trigger> 59 ControlTemplate.Triggers> 60 ControlTemplate> 61 Setter.Value> 62 Setter> 63 Style>
RadioButton
1 <Style x:Key="McRadioButton" TargetType="RadioButton" > 2 <Setter Property="FontSize" Value="12">Setter> 3 <Setter Property="Height" Value="25">Setter> 4 <Setter Property="Foreground" Value="#444">Setter> 5 <Setter Property="Template" > 6 <Setter.Value> 7 <ControlTemplate TargetType="{x:Type RadioButton}"> 8 <Grid x:Name="back" Background="Transparent" > 9 <Grid.ColumnDefinitions> 10 <ColumnDefinition Width="3">ColumnDefinition> 11 <ColumnDefinition Width="auto">ColumnDefinition> 12 <ColumnDefinition Width="5">ColumnDefinition> 13 <ColumnDefinition Width="*">ColumnDefinition> 14 <ColumnDefinition Width="10">ColumnDefinition> 15 Grid.ColumnDefinitions> 16 <Border x:Name="x1" Width="3" Background="{StaticResource MainColor}" Visibility="Collapsed" Grid.Column="0"> 17 Border> 18 <Border Grid.Column="1" Visibility="{Binding IsPlayVisibility}" Margin="10,0,10,0"> 19 <TextBlock HorizontalAlignment="Left" 20 FontSize="14" FontFamily="/CloudMusic;component/Resources/#SF2015" 21 Text="{TemplateBinding Tag}" Foreground="{DynamicResource DMMainColor}" 22 VerticalAlignment="Center" >TextBlock> 23 Border> 24 <Border Grid.Column="3" x:Name="x"> 25 <TextBlock x:Name="Content" Text="{TemplateBinding Content}" 26 HorizontalAlignment="Left" VerticalAlignment="Center" >TextBlock> 27 Border> 28 Grid> 29 <ControlTemplate.Triggers> 30 <Trigger Property="IsMouseOver" Value="true" > 31 <Setter Property="Background" TargetName="back" Value="#FFF5F5F7">Setter> 32 Trigger> 33 <Trigger Property="IsChecked" Value="true"> 34 <Setter Property="Visibility" TargetName="x1" Value="Visible">Setter> 35 <Setter Property="BorderThickness" TargetName="x1" Value="0">Setter> 36 <Setter Property="Foreground" TargetName="Content" Value="#FF333333">Setter> 37 <Setter Property="Background" TargetName="back" Value="#FFE3E3E5">Setter> 38 Trigger> 39 ControlTemplate.Triggers> 40 ControlTemplate> 41 Setter.Value> 42 Setter> 43 Style>
以上就是Expander+RadioButton的核心代码了；其中用到的图标可以到阿里的iconfont去找；
另外，Expander旁边的小箭头，网易云是没有的，这里我个人觉得加上要好一些，这个可以看个人需求删除或者保留