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