WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）
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旁边的小箭头，网易云是没有的，这里我个人觉得加上要好一些，这个可以看个人需求删除或者保留
版权声明：本文为xytx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。