WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）

1.简介

上一篇咱们说到，网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现，具体如何实现，咱们下面开始干；

首先来一张网易云音乐PC版原图（个人觉得PC版比UWP版左侧菜单好看点）：

然后当然是再上以下咱们做出的效果图了：

还原度百分之百有没有。。。

2.上硬菜

首先是无边框窗口方案，这里使用的是DMSkin for WPF,Github地址：https://github.com/944095635/DMSkin-for-WPF

Expander

 <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">

         <Border Name="Border"  CornerRadius="2,0,0,0" Background="Transparent" BorderThickness="0,0,1,0">

             <Image Name="image" Source="/CloudMusic;component/Images/tabitems/down_normal.png" />

         </Border>

         <ControlTemplate.Triggers>

             <Trigger Property="IsChecked" Value="true">

                 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/up_normal.png" />

             </Trigger>

             <Trigger Property="IsChecked" Value="false">

                 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/down_normal.png" />

             </Trigger>

             <MultiTrigger>

                 <MultiTrigger.Conditions>

                     <Condition Property="IsChecked" Value="true" />

                     <Condition Property="IsMouseOver" Value="true" />

                 </MultiTrigger.Conditions>

                 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/up_hover.png" />

             </MultiTrigger>

             <MultiTrigger>

                 <MultiTrigger.Conditions>

                     <Condition Property="IsChecked" Value="false" />

                     <Condition Property="IsMouseOver" Value="true" />

                 </MultiTrigger.Conditions>

                 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/down_hover.png" />

             </MultiTrigger>

         </ControlTemplate.Triggers>

     </ControlTemplate>

     <Style TargetType="Expander">

         <Setter Property="Template">

             <Setter.Value>

                 <ControlTemplate TargetType="Expander">

                     <Grid>

                         <Grid.RowDefinitions>

                             <RowDefinition Height="auto" />

                             <RowDefinition Name="ContentRow" Height="0" />

                         </Grid.RowDefinitions>

                         <Border Name="Border" Grid.Row="0" BorderThickness="1" CornerRadius="2,2,0,0">

                             <Grid Width="140" HorizontalAlignment="Left">

                                 <Grid.ColumnDefinitions>

                                     <ColumnDefinition Width="*" />

                                     <ColumnDefinition Width="20" />

                                 </Grid.ColumnDefinitions>

                                 <ToggleButton  IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

                                             OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" Grid.Column="1" >

                                 </ToggleButton>

                                 <ContentPresenter Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />

                             </Grid>

                         </Border>

                         <Border Name="Content" Grid.Row="1" CornerRadius="0,0,2,2">

                             <ContentPresenter  />

                         </Border>

                     </Grid>

                     <ControlTemplate.Triggers>

                         <Trigger Property="IsExpanded" Value="True">

                             <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=DesiredHeight}" />

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

RadioButton

 <Style x:Key="McRadioButton" TargetType="RadioButton" >

         <Setter Property="FontSize" Value="12"></Setter>

         <Setter Property="Height" Value="25"></Setter>

         <Setter Property="Foreground" Value="#444"></Setter>

         <Setter Property="Template" >

             <Setter.Value>

                 <ControlTemplate  TargetType="{x:Type RadioButton}">

                     <Grid x:Name="back" Background="Transparent" >

                         <Grid.ColumnDefinitions>

                             <ColumnDefinition Width="3"></ColumnDefinition>

                             <ColumnDefinition Width="auto"></ColumnDefinition>

                             <ColumnDefinition Width="5"></ColumnDefinition>

                             <ColumnDefinition Width="*"></ColumnDefinition>

                             <ColumnDefinition Width="10"></ColumnDefinition>

                         </Grid.ColumnDefinitions>

                         <Border  x:Name="x1" Width="3" Background="{StaticResource MainColor}" Visibility="Collapsed" Grid.Column="0">

                         </Border>

                         <Border Grid.Column="1" Visibility="{Binding IsPlayVisibility}" Margin="10,0,10,0">

                             <TextBlock HorizontalAlignment="Left"

                             FontSize="14" FontFamily="/CloudMusic;component/Resources/#SF2015"

                             Text="{TemplateBinding Tag}" Foreground="{DynamicResource DMMainColor}"

                             VerticalAlignment="Center" ></TextBlock>

                         </Border>

                         <Border Grid.Column="3"  x:Name="x">

                             <TextBlock x:Name="Content" Text="{TemplateBinding Content}"

                             HorizontalAlignment="Left" VerticalAlignment="Center" ></TextBlock>

                         </Border>

                     </Grid>

                     <ControlTemplate.Triggers>

                         <Trigger Property="IsMouseOver" Value="true" >

                             <Setter Property="Background" TargetName="back" Value="#FFF5F5F7"></Setter>

                         </Trigger>

                         <Trigger Property="IsChecked" Value="true">

                             <Setter Property="Visibility" TargetName="x1" Value="Visible"></Setter>

                             <Setter Property="BorderThickness" TargetName="x1" Value="0"></Setter>

                             <Setter Property="Foreground" TargetName="Content" Value="#FF333333"></Setter>

                             <Setter Property="Background" TargetName="back" Value="#FFE3E3E5"></Setter>

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

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

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