[最多推荐]WPF仿网易云音乐系列（一、左侧菜单栏：Expander+Radi

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>

View Code

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>

View Code

以上就是Expander+RadioButton的核心代码了；其中用到的图标可以到阿里的iconfont去找；

另外，Expander旁边的小箭头，网易云是没有的，这里我个人觉得加上要好一些，这个可以看个人需求删除或者保留