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旁边的小箭头，网易云是没有的，这里我个人觉得加上要好一些，这个可以看个人需求删除或者保留