首先来一张网易云音乐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>