WPF仿網易雲音樂系列（一、左側菜單欄：Expander+RadioButton）
阿新 • • 發佈：2019-04-01
dpa template expand pat one none borde ems .cn 原文:WPF仿網易雲音樂系列（一、左側菜單欄：Expander+RadioButton）
1.簡介
上一篇咱們說到，網易雲音樂的左側菜單欄可以通過Expander+RadioButton來實現，具體如何實現，咱們下面開始幹；
首先來一張網易雲音樂PC版原圖（個人覺得PC版比UWP版左側菜單好看點）：
然後當然是再上以下咱們做出的效果圖了：
還原度百分之百有沒有。。。
2.上硬菜
首先是無邊框窗口方案，這裏使用的是DMSkin for WPF,Github地址：https://github.com/944095635/DMSkin-for-WPF
Expander
1View Code<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>
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旁邊的小箭頭，網易雲是沒有的，這裏我個人覺得加上要好一些，這個可以看個人需求刪除或者保留
WPF仿網易雲音樂系列（一、左側菜單欄：Expander+RadioButton）