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

 

posted @ 2018-07-03 17:09  小羽同学  阅读(12225)  评论(27)  编辑  收藏  举报