WPF仿网易云音乐系列（一、歌单创建窗口+登录设置模块）

来源：网络整理网络用户发布，如有版权联系网管删除　2018-07-04　

　　老衲牺牲午休时间写博客，都快把自己感动了，-_-!!

　　之前上一篇随笔，我看了下评论，有部分人说WPF已经凉凉了，这个我觉得，这只是一个达到自己目的的工具而已，只要自己能用这个工具，得心应手的做出自己想要的东西就行，关心工具本身凉了没，个人觉得没啥意义；另外，我一个做Java的都没泼凉水，你.Net自己的东西，你们还不满意了，太过分了，haha；

　　以上，瞎bb一通，轻喷...下面开始正题；

一.简介

　　上一篇文章，咱们利用Expander+RadioButton实现了左侧菜单栏（或者是导航栏），这一片随笔，做创建歌单窗口和登录设置按钮那一坨...咱们先来看看原版长啥样子

　　看上去蛮厉害的样子，咱们开始搞一搞；

二.正文

创建歌单窗口

　　首先需要创建一个窗口。。然后设置WindowStyle="None" 使窗口无边框化；另外，窗口在弹出的时候，是有一个蒙版效果的；这里咱们还需要给他加上蒙版；话不多说，上代码；

窗体xmal

 1 <Window x:Class="CloudMusic.CreateAlbum" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6         xmlns:local="clr-namespace:CloudMusic" 7         mc:Ignorable="d" 8         Foreground="#444" 9         Closed="CreateAlbumWindow_Closed"10         ShowInTaskbar="False"11         WindowStyle="None"12         WindowStartupLocation="CenterOwner"13         Title="CreateAlbum" Height="250" Width="430">14     <Window.Resources>15         16         <ContextMenu x:Key="TextBoxContextMenu" >17             <MenuItem Command="ApplicationCommands.Cut"  />18             <MenuItem Command="ApplicationCommands.Copy"   />19             <MenuItem Command="ApplicationCommands.Paste" />20             <MenuItem Command="ApplicationCommands.SelectAll"  />21         ContextMenu>22     Window.Resources>23     <Grid>24         <Grid.RowDefinitions>25             <RowDefinition Height="45"/>26             <RowDefinition Height="*"/>27         Grid.RowDefinitions>28         <StackPanel Grid.Row="0">29             <TextBlock Text="新建歌单" FontSize="18" Margin="10"/>30             <Border BorderBrush="#A7A7A7" BorderThickness="0.3"/>31         StackPanel>32         <StackPanel Grid.Row="1">33             <TextBox Name="CreateAlbumTitle" Grid.Row="0" Tag="20" Margin="20" Height="40" TextChanged="CreateAlbumTitle_TextChanged"  FontSize="14">34                 <TextBox.Style>35                     <Style TargetType="TextBox">36                         <Setter Property="ContextMenu" Value="{DynamicResource TextBoxContextMenu}" />37                         <Setter Property="Template">38                             <Setter.Value>39                                 <ControlTemplate TargetType="{x:Type TextBox}">40                                     <Border x:Name="border" Width="Auto" Height="Auto" BorderThickness="1" BorderBrush="#A7A7A7">41                                         <Grid x:Name="grid" Background="#FFFFFF">42                                             <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center" HorizontalAlignment="Left"/>43                                             <TextBlock x:Name="x" Visibility="Collapsed" Foreground="#A7A7A7" Text="歌单标题"44                                                        VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Microsoft YaHei"/>45                                             <TextBlock  Margin="5,0" x:Name="x1" Foreground="#A7A7A7" Text="{TemplateBinding Tag}"46                                                        VerticalAlignment="Center" HorizontalAlignment="Right" FontFamily="Microsoft YaHei"/>47                                         Grid>48                                     Border>49                                     <ControlTemplate.Triggers>50                                         <Trigger Property="Text" Value="{x:Null}">51                                             <Setter Property="Visibility" TargetName="x" Value="Visible">Setter>52                                         Trigger>53                                         <Trigger Property="Text" Value="">54                                             <Setter Property="Visibility" TargetName="x" Value="Visible">Setter>55                                         Trigger>56                                     ControlTemplate.Triggers>57                                 ControlTemplate>58                             Setter.Value>59                         Setter>60                         <Style.Triggers>61 62                             <Trigger Property="IsMouseOver" Value="True">63                                 <Setter Property="Background" Value="Transparent"/>64                                 <Setter Property="Foreground" Value="#444"/>65                             Trigger>66                             <Trigger Property="IsFocused" Value="True">67                                 <Setter Property="Background" Value="Transparent"/>68                                 <Setter Property="Foreground" Value="#444"/>69                             Trigger>70                             <Trigger Property="IsEnabled" Value="False">71                                 <Setter Property="Background" Value="Transparent"/>72                                 <Setter Property="Foreground" Value="#444"/>73                             Trigger>74                         Style.Triggers>75                     Style>76                 TextBox.Style>77             TextBox>78             <CheckBox Margin="20,20" Foreground="#A7A7A7">79                 设置为隐私歌单80             CheckBox>81             <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="20,10">82                 <Button Style="{StaticResource ColorButton}" Width="100" Height="35" FontSize="16"83                         Click="Button_Click_1">84                     新建85                 Button>86                 <Button Style="{StaticResource ColorButton}" Margin="20,0,0,0" Width="100" 87                         Height="35" FontSize="16" Click="Button_Click"88                         Background="White" Foreground="{StaticResource MainColor}">取消Button>89             StackPanel>90         StackPanel>91     Grid>92 Window>

View Code

cs代码：

 1 ///  2     /// CreateAlbum.xaml 的交互逻辑 3     ///  4     public partial class CreateAlbum : Window 5     { 6         public CreateAlbum() 7         { 8             InitializeComponent(); 9         }10        11         public static void ShowDialog(Window owner)12         {13             //蒙板14             Grid layer = new Grid() { Background = new SolidColorBrush(Colors.White),Opacity=0.4 };15             //父级窗体原来的内容16             UIElement original = owner.Content as UIElement;17             owner.Content = null;18             //容器Grid19             Grid container = new Grid();20             container.Children.Add(original);//放入原来的内容21             container.Children.Add(layer);//在上面放一层蒙板22             //将装有原来内容和蒙板的容器赋给父级窗体23             owner.Content = container;24 25             CreateAlbum ca = new CreateAlbum() { Owner = owner };26             ca.ShowDialog();27         }28 29         private void CreateAlbumWindow_Closed(object sender, EventArgs e)30         {31             //容器Grid32             Grid grid = this.Owner.Content as Grid;33             //父级窗体原来的内容34             UIElement original = VisualTreeHelper.GetChild(grid, 0) as UIElement;35             //将父级窗体原来的内容在容器Grid中移除36             grid.Children.Remove(original);37             //赋给父级窗体38             this.Owner.Content = original;39         }40 41         private void Button_Click(object sender, RoutedEventArgs e)42         {43           44             this.Close();45            46         }47         /// 48         /// 添加歌单49         /// 50         /// 51         /// 52         private void Button_Click_1(object sender, RoutedEventArgs e)53         {54             if (CreateAlbumTitle.Text.Length > 20 || CreateAlbumTitle.Text.Length <= 0) return;55             CommonEvent._CreateAlbum(CreateAlbumTitle.Text);56             this.Close();57         }58 59         private void CreateAlbumTitle_TextChanged(object sender, TextChangedEventArgs e)60         {61             CreateAlbumTitle.Tag = (20 - CreateAlbumTitle.Text.Length).ToString();62         }63     }

View Code

ColorButton样式代码：

 1 <Style x:Key="ColorButton" TargetType="Button"> 2         <Setter Property="Width" Value="200">Setter> 3         <Setter Property="FontSize" Value="25">Setter> 4         <Setter Property="Height" Value="60">Setter> 5         <Setter Property="Foreground" Value="White">Setter> 6         <Setter Property="Background" Value="{StaticResource MainColor}">Setter> 7         <Setter Property="Template" > 8             <Setter.Value> 9                 <ControlTemplate TargetType="Button">10                     <Border Background="{TemplateBinding Background}" BorderBrush="{StaticResource MainColor}" 11                             BorderThickness="1" x:Name="back">12                         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">ContentPresenter>13                     Border>14                     <ControlTemplate.Triggers>15                         <Trigger Property="IsMouseOver" Value="true">16                             <Setter Property="Opacity" TargetName="back" Value="0.8">Setter>17                         Trigger>18                         <Trigger Property="IsPressed" Value="True">19                             <Setter Property="Width" TargetName="back" Value="99">Setter>20                             <Setter Property="Height" TargetName="back" Value="34">Setter>21                         Trigger>22                     ControlTemplate.Triggers>23                 ControlTemplate>24             Setter.Value>25         Setter>26     Style>

View Code

调用方式（略显嗦了。。）：

1 private void CreateAlbumBtn_Click(object sender, RoutedEventArgs e)2         {3             CreateAlbum.ShowDialog(this);4         }

最后，效果如下：

还原度，百分之百有没有..haha

登录设置模块

　　这一块呢，就比较简单了，主要就一个面板上放三个按钮；当然，都是自定义按钮；然后再设置个border就搞定；代码如下：

 1 <Border Background="White"  BorderThickness="0,0.3,0,0" BorderBrush="{StaticResource LineColor}"  2                         VerticalAlignment="Bottom" Width="160" Height="60" HorizontalAlignment="Left"  3                         Grid.ColumnSpan="2" Margin="0,0,0,0.4"> 4                     <StackPanel Orientation="Horizontal"> 5                         <Button Style="{StaticResource UserLoginButton}" Width="90">MichaelButton> 6                         <local:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}" HorizontalAlignment="Right" 7                                          >local:FButton> 8                         <local:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}" HorizontalAlignment="Right" 9                                                     >local:FButton>10                     StackPanel>11                 Border>

View Code

自定义按钮：

  1  <Style x:Key="UserLoginButton" TargetType="Button">  2         <Setter Property="Template" >  3             <Setter.Value>  4                 <ControlTemplate TargetType="Button">  5                         <StackPanel x:Name="back" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0" Orientation="Horizontal">  6                             <Ellipse x:Name="img" Width="30" Height="30">  7                                 <Ellipse.Fill>  8                                     <ImageBrush ImageSource="/CloudMusic;component/Images/user.jpg"/>  9                                 Ellipse.Fill> 10                             Ellipse> 11                             <ContentPresenter VerticalAlignment="Center" Margin="5,0"/> 12                         StackPanel> 13                     <ControlTemplate.Triggers> 14                         <Trigger Property="IsMouseOver" Value="true"> 15                         Trigger> 16                         <Trigger Property="IsPressed" Value="True"> 17                             <Setter Property="Width" TargetName="img" Value="29"/> 18                             <Setter Property="Height" TargetName="img" Value="29"/> 19                         Trigger> 20                     ControlTemplate.Triggers> 21                 ControlTemplate> 22             Setter.Value> 23         Setter> 24     Style> 25  26  27     <Style x:Key="FButton_Transparency" TargetType="{x:Type local:FButton}"> 28         <Setter Property="Background" Value="Transparent" /> 29         <Setter Property="MouseOverBackground" Value="Transparent" /> 30         <Setter Property="PressedBackground" Value="Transparent" /> 31         <Setter Property="Foreground" Value="#777" /> 32         <Setter Property="MouseOverForeground" Value="{StaticResource MainColor}" /> 33         <Setter Property="PressedForeground" Value="{StaticResource MainPressedColor}" /> 34         <Setter Property="HorizontalContentAlignment" Value="Center" /> 35         <Setter Property="Height" Value="Auto" /> 36         <Setter Property="Width" Value="Auto" /> 37         <Setter Property="CornerRadius" Value="0" /> 38         <Setter Property="FontSize" Value="13" /> 39         <Setter Property="FIconSize" Value="20" /> 40         <Setter Property="Template" Value="{StaticResource FButton_Template}"/> 41         <Setter Property="Padding" Value="3,1,3,1" /> 42         <Setter Property="Content" Value="{x:Null}" /> 43         <Setter Property="FIconMargin" Value="0,0,2,0" /> 44         <Setter Property="AllowsAnimation" Value="False" /> 45         <Setter Property="Cursor" Value="Hand" /> 46     Style> 47 <Style x:Key="FIcon" TargetType="TextBlock"> 48         <Setter Property="FontFamily" Value="/CloudMusic;component/Resources/#SF2015">Setter> 49         <Setter Property="Foreground" Value="White"/> 50         <Setter Property="TextAlignment" Value="Center"/> 51         <Setter Property="HorizontalAlignment" Value="Center"/> 52         <Setter Property="VerticalAlignment" Value="Center"/> 53         <Setter Property="FontSize" Value="20"/> 54     Style> 55      56     <ControlTemplate x:Key="FButton_Template" TargetType="{x:Type local:FButton}"> 57         <Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}"  58                                     Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}"  59                                     CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CornerRadius}"  60                                     BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 61                                     Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}"> 62              63             <StackPanel Orientation="Horizontal" VerticalAlignment="Center"  64                         Margin="{TemplateBinding Padding}" 65                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"> 66                 <TextBlock x:Name="icon"  Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FIconMargin}"  67                            RenderTransformOrigin="0.5,0.5" Style="{StaticResource FIcon}" 68                            Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIcon}" 69                            FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIconSize}"  70                            Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Foreground}"> 71                     <TextBlock.RenderTransform> 72                         <RotateTransform x:Name="transIcon" Angle="0"/> 73                     TextBlock.RenderTransform> 74                 TextBlock> 75  76                 <TextBlock VerticalAlignment="Center"  x:Name="txt"  77                            TextDecorations="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ContentDecorations}"  78                                                Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}"  79                                                FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FontSize}"  80                                                Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Foreground}"/> 81             StackPanel> 82         Border> 83          84         <ControlTemplate.Triggers> 85              86             <Trigger Property="IsMouseOver" Value="True"> 87                 <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},  88                                 Path=MouseOverBackground}" TargetName="border" /> 89                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},  90                                 Path=MouseOverForeground}" TargetName="icon"/> 91                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},  92                                 Path=MouseOverForeground}" TargetName="txt"/> 93             Trigger> 94              95             <MultiTrigger> 96                 <MultiTrigger.Conditions> 97                     <Condition Property="IsMouseOver" Value="true">Condition> 98                     <Condition Property="AllowsAnimation" Value="true">Condition> 99                 MultiTrigger.Conditions>100                 <MultiTrigger.EnterActions>101                     <BeginStoryboard>102                         <Storyboard>103                             <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="180" Duration="0:0:0.2" />104                         Storyboard>105                     BeginStoryboard>106                 MultiTrigger.EnterActions>107                 <MultiTrigger.ExitActions>108                     <BeginStoryboard>109                         <Storyboard>110                             <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.2" />111                         Storyboard>112                     BeginStoryboard>113                 MultiTrigger.ExitActions>114             MultiTrigger>115             116             <Trigger Property="IsPressed" Value="True">117                 <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 118                                 Path=PressedBackground}" TargetName="border" />119                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 120                                 Path=PressedForeground}" TargetName="icon"/>121                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 122                                 Path=PressedForeground}" TargetName="txt"/>123             Trigger>124             <Trigger Property="IsEnabled" Value="false">125                 <Setter Property="Opacity" Value="0.5" TargetName="border"/>126             Trigger>127         ControlTemplate.Triggers>128     ControlTemplate>

View Code

FButton cs代码：

  1 public partial class FButton : Button  2     {  3         public static readonly DependencyProperty PressedBackgroundProperty =  4             DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.DarkBlue));  5         ///   6         /// 鼠标按下背景样式  7         ///   8         public Brush PressedBackground  9         { 10             get { return (Brush)GetValue(PressedBackgroundProperty); } 11             set { SetValue(PressedBackgroundProperty, value); } 12         } 13  14         public static readonly DependencyProperty PressedSizeProperty = 15             DependencyProperty.Register("PressedSize", typeof(int), typeof(FButton), new PropertyMetadata(20)); 16         ///  17         /// 鼠标按下按钮大小 18         ///  19         public int PressedSize 20         { 21             get 22             { 23                 if (this.FontSize - 1 != 20) return (int)this.FontSize - 1; 24                 return (int)GetValue(PressedSizeProperty); 25             } 26             set { SetValue(PressedSizeProperty, value); } 27         } 28         29  30         public static readonly DependencyProperty PressedForegroundProperty = 31             DependencyProperty.Register("PressedForeground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.White)); 32         ///  33         /// 鼠标按下前景样式（图标、文字） 34         ///  35         public Brush PressedForeground 36         { 37             get { return (Brush)GetValue(PressedForegroundProperty); } 38             set { SetValue(PressedForegroundProperty, value); } 39         } 40  41         public static readonly DependencyProperty MouseOverBackgroundProperty = 42             DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.RoyalBlue)); 43         ///  44         /// 鼠标进入背景样式 45         ///  46         public Brush MouseOverBackground 47         { 48             get { return (Brush)GetValue(MouseOverBackgroundProperty); } 49             set { SetValue(MouseOverBackgroundProperty, value); } 50         } 51  52         public static readonly DependencyProperty MouseOverForegroundProperty = 53             DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.White)); 54         ///  55         /// 鼠标进入前景样式 56         ///  57         public Brush MouseOverForeground 58         { 59             get { return (Brush)GetValue(MouseOverForegroundProperty); } 60             set { SetValue(MouseOverForegroundProperty, value); } 61         } 62  63         public static readonly DependencyProperty FIconProperty = 64             DependencyProperty.Register("FIcon", typeof(string), typeof(FButton), new PropertyMetadata("ue604")); 65         ///  66         /// 按钮字体图标编码 67         ///  68         public string FIcon 69         { 70             get { return (string)GetValue(FIconProperty); } 71             set { SetValue(FIconProperty, value); } 72         } 73  74         public static readonly DependencyProperty FIconSizeProperty = 75             DependencyProperty.Register("FIconSize", typeof(int), typeof(FButton), new PropertyMetadata(20)); 76         ///  77         /// 按钮字体图标大小 78         ///  79         public int FIconSize 80         { 81             get { return (int)GetValue(FIconSizeProperty); } 82             set { SetValue(FIconSizeProperty, value); } 83         } 84  85         public static readonly DependencyProperty FIconMarginProperty = DependencyProperty.Register( 86             "FIconMargin", typeof(Thickness), typeof(FButton), new PropertyMetadata(new Thickness(0, 1, 3, 1))); 87         ///  88         /// 字体图标间距 89         ///  90         public Thickness FIconMargin 91         { 92             get { return (Thickness)GetValue(FIconMarginProperty); } 93             set { SetValue(FIconMarginProperty, value); } 94         } 95  96         public static readonly DependencyProperty AllowsAnimationProperty = DependencyProperty.Register( 97             "AllowsAnimation", typeof(bool), typeof(FButton), new PropertyMetadata(true)); 98         ///  99         /// 是否启用Ficon动画100         /// 101         public bool AllowsAnimation102         {103             get { return (bool)GetValue(AllowsAnimationProperty); }104             set { SetValue(AllowsAnimationProperty, value); }105         }106 107         public static readonly DependencyProperty CornerRadiusProperty =108             DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FButton), new PropertyMetadata(new CornerRadius(2)));109         /// 110         /// 按钮圆角大小,左上，右上，右下，左下111         /// 112         public CornerRadius CornerRadius113         {114             get { return (CornerRadius)GetValue(CornerRadiusProperty); }115             set { SetValue(CornerRadiusProperty, value); }116         }117 118         public static readonly DependencyProperty ContentDecorationsProperty = DependencyProperty.Register(119             "ContentDecorations", typeof(TextDecorationCollection), typeof(FButton), new PropertyMetadata(null));120         public TextDecorationCollection ContentDecorations121         {122             get { return (TextDecorationCollection)GetValue(ContentDecorationsProperty); }123             set { SetValue(ContentDecorationsProperty, value); }124         }125 126         static FButton()127         {128             DefaultStyleKeyProperty.OverrideMetadata(typeof(FButton), new FrameworkPropertyMetadata(typeof(FButton)));129         }130     }