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

2022-10-09 07:15:07

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

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

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

一.简介

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

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

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

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

二.正文

创建歌单窗口

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

窗体xmal

 <Window x:Class="CloudMusic.CreateAlbum"

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

         xmlns:local="clr-namespace:CloudMusic"

         mc:Ignorable="d"

         Foreground="#444"

         Closed="CreateAlbumWindow_Closed"

         ShowInTaskbar="False"

         WindowStyle="None"

         WindowStartupLocation="CenterOwner"

         Title="CreateAlbum" Height="250" Width="430">

     <Window.Resources>

         <!--文本操作右键菜单-->

         <ContextMenu x:Key="TextBoxContextMenu" >

             <MenuItem Command="ApplicationCommands.Cut"  />

             <MenuItem Command="ApplicationCommands.Copy"   />

             <MenuItem Command="ApplicationCommands.Paste" />

             <MenuItem Command="ApplicationCommands.SelectAll"  />

         </ContextMenu>

     </Window.Resources>

     <Grid>

         <Grid.RowDefinitions>

             <RowDefinition Height="45"/>

             <RowDefinition Height="*"/>

         </Grid.RowDefinitions>

         <StackPanel Grid.Row="0">

             <TextBlock Text="新建歌单" FontSize="18" Margin="10"/>

             <Border BorderBrush="#A7A7A7" BorderThickness="0.3"/>

         </StackPanel>

         <StackPanel Grid.Row="1">

             <TextBox Name="CreateAlbumTitle" Grid.Row="0" Tag="20" Margin="20" Height="40" TextChanged="CreateAlbumTitle_TextChanged"  FontSize="14">

                 <TextBox.Style>

                     <Style TargetType="TextBox">

                         <Setter Property="ContextMenu" Value="{DynamicResource TextBoxContextMenu}" />

                         <Setter Property="Template">

                             <Setter.Value>

                                 <ControlTemplate TargetType="{x:Type TextBox}">

                                     <Border x:Name="border" Width="Auto" Height="Auto" BorderThickness="1" BorderBrush="#A7A7A7">

                                         <Grid x:Name="grid" Background="#FFFFFF">

                                             <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center" HorizontalAlignment="Left"/>

                                             <TextBlock x:Name="x" Visibility="Collapsed" Foreground="#A7A7A7" Text="歌单标题"

                                                        VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Microsoft YaHei"/>

                                             <TextBlock  Margin="5,0" x:Name="x1" Foreground="#A7A7A7" Text="{TemplateBinding Tag}"

                                                        VerticalAlignment="Center" HorizontalAlignment="Right" FontFamily="Microsoft YaHei"/>

                                         </Grid>

                                     </Border>

                                     <ControlTemplate.Triggers>

                                         <Trigger Property="Text" Value="{x:Null}">

                                             <Setter Property="Visibility" TargetName="x" Value="Visible"></Setter>

                                         </Trigger>

                                         <Trigger Property="Text" Value="">

                                             <Setter Property="Visibility" TargetName="x" Value="Visible"></Setter>

                                         </Trigger>

                                     </ControlTemplate.Triggers>

                                 </ControlTemplate>

                             </Setter.Value>

                         </Setter>

                         <Style.Triggers>

                             <Trigger Property="IsMouseOver" Value="True">

                                 <Setter Property="Background" Value="Transparent"/>

                                 <Setter Property="Foreground" Value="#444"/>

                             </Trigger>

                             <Trigger Property="IsFocused" Value="True">

                                 <Setter Property="Background" Value="Transparent"/>

                                 <Setter Property="Foreground" Value="#444"/>

                             </Trigger>

                             <Trigger Property="IsEnabled" Value="False">

                                 <Setter Property="Background" Value="Transparent"/>

                                 <Setter Property="Foreground" Value="#444"/>

                             </Trigger>

                         </Style.Triggers>

                     </Style>

                 </TextBox.Style>

             </TextBox>

             <CheckBox Margin="20,20" Foreground="#A7A7A7">

                 设置为隐私歌单

             </CheckBox>

             <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="20,10">

                 <Button Style="{StaticResource ColorButton}" Width="100" Height="35" FontSize="16"

                         Click="Button_Click_1">

                     新建

                 </Button>

                 <Button Style="{StaticResource ColorButton}" Margin="20,0,0,0" Width="100"

                         Height="35" FontSize="16" Click="Button_Click"

                         Background="White" Foreground="{StaticResource MainColor}">取消</Button>

             </StackPanel>

         </StackPanel>

     </Grid>

 </Window>

cs代码：

 /// <summary>

     /// CreateAlbum.xaml 的交互逻辑

     /// </summary>

     public partial class CreateAlbum : Window

     {

         public CreateAlbum()

         {

             InitializeComponent();

         }

         public static void ShowDialog(Window owner)

         {

             //蒙板

             Grid layer = new Grid() { Background = new SolidColorBrush(Colors.White),Opacity=0.4 };

             //父级窗体原来的内容

             UIElement original = owner.Content as UIElement;

             owner.Content = null;

             //容器Grid

             Grid container = new Grid();

             container.Children.Add(original);//放入原来的内容

             container.Children.Add(layer);//在上面放一层蒙板

             //将装有原来内容和蒙板的容器赋给父级窗体

             owner.Content = container;

             CreateAlbum ca = new CreateAlbum() { Owner = owner };

             ca.ShowDialog();

         }

         private void CreateAlbumWindow_Closed(object sender, EventArgs e)

         {

             //容器Grid

             Grid grid = this.Owner.Content as Grid;

             //父级窗体原来的内容

             UIElement original = VisualTreeHelper.GetChild(grid, ) as UIElement;

             //将父级窗体原来的内容在容器Grid中移除

             grid.Children.Remove(original);

             //赋给父级窗体

             this.Owner.Content = original;

         }

         private void Button_Click(object sender, RoutedEventArgs e)

         {

             this.Close();

         }

         /// <summary>

         /// 添加歌单

         /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         private void Button_Click_1(object sender, RoutedEventArgs e)

         {

             if (CreateAlbumTitle.Text.Length >  || CreateAlbumTitle.Text.Length <= ) return;

             CommonEvent._CreateAlbum(CreateAlbumTitle.Text);

             this.Close();

         }

         private void CreateAlbumTitle_TextChanged(object sender, TextChangedEventArgs e)

         {

             CreateAlbumTitle.Tag = ( - CreateAlbumTitle.Text.Length).ToString();

         }

     }

ColorButton样式代码：

 <Style x:Key="ColorButton" TargetType="Button">

         <Setter Property="Width" Value="200"></Setter>

         <Setter Property="FontSize" Value="25"></Setter>

         <Setter Property="Height" Value="60"></Setter>

         <Setter Property="Foreground" Value="White"></Setter>

         <Setter Property="Background" Value="{StaticResource MainColor}"></Setter>

         <Setter Property="Template" >

             <Setter.Value>

                 <ControlTemplate TargetType="Button">

                     <Border Background="{TemplateBinding Background}" BorderBrush="{StaticResource MainColor}"

                             BorderThickness="1" x:Name="back">

                         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>

                     </Border>

                     <ControlTemplate.Triggers>

                         <Trigger Property="IsMouseOver" Value="true">

                             <Setter Property="Opacity" TargetName="back" Value="0.8"></Setter>

                         </Trigger>

                         <Trigger Property="IsPressed" Value="True">

                             <Setter Property="Width" TargetName="back" Value="99"></Setter>

                             <Setter Property="Height" TargetName="back" Value="34"></Setter>

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

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

 private void CreateAlbumBtn_Click(object sender, RoutedEventArgs e)

         {

             CreateAlbum.ShowDialog(this);

         }

最后，效果如下：

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

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

登录设置模块

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

 <Border Background="White"  BorderThickness="0,0.3,0,0" BorderBrush="{StaticResource LineColor}"

                         VerticalAlignment="Bottom" Width="160" Height="60" HorizontalAlignment="Left"

                         Grid.ColumnSpan="2" Margin="0,0,0,0.4">

                     <StackPanel Orientation="Horizontal">

                         <Button Style="{StaticResource UserLoginButton}" Width="90">Michael</Button>

                         <local:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}" HorizontalAlignment="Right"

                                          ></local:FButton>

                         <local:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}" HorizontalAlignment="Right"

                                                     ></local:FButton>

                     </StackPanel>

                 </Border>

自定义按钮：

  <Style x:Key="UserLoginButton" TargetType="Button">

         <Setter Property="Template" >

             <Setter.Value>

                 <ControlTemplate TargetType="Button">

                         <StackPanel x:Name="back" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0" Orientation="Horizontal">

                             <Ellipse x:Name="img" Width="30" Height="30">

                                 <Ellipse.Fill>

                                     <ImageBrush ImageSource="/CloudMusic;component/Images/user.jpg"/>

                                 </Ellipse.Fill>

                             </Ellipse>

                             <ContentPresenter VerticalAlignment="Center" Margin="5,0"/>

                         </StackPanel>

                     <ControlTemplate.Triggers>

                         <Trigger Property="IsMouseOver" Value="true">

                         </Trigger>

                         <Trigger Property="IsPressed" Value="True">

                             <Setter Property="Width" TargetName="img" Value="29"/>

                             <Setter Property="Height" TargetName="img" Value="29"/>

                         </Trigger>

                     </ControlTemplate.Triggers>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

     </Style>

 <!--背景透明的FButton样式-->

     <Style x:Key="FButton_Transparency" TargetType="{x:Type local:FButton}">

         <Setter Property="Background" Value="Transparent" />

         <Setter Property="MouseOverBackground" Value="Transparent" />

         <Setter Property="PressedBackground" Value="Transparent" />

         <Setter Property="Foreground" Value="#777" />

         <Setter Property="MouseOverForeground" Value="{StaticResource MainColor}" />

         <Setter Property="PressedForeground" Value="{StaticResource MainPressedColor}" />

         <Setter Property="HorizontalContentAlignment" Value="Center" />

         <Setter Property="Height" Value="Auto" />

         <Setter Property="Width" Value="Auto" />

         <Setter Property="CornerRadius" Value="0" />

         <Setter Property="FontSize" Value="13" />

         <Setter Property="FIconSize" Value="20" />

         <Setter Property="Template" Value="{StaticResource FButton_Template}"/>

         <Setter Property="Padding" Value="3,1,3,1" />

         <Setter Property="Content" Value="{x:Null}" />

         <Setter Property="FIconMargin" Value="0,0,2,0" />

         <Setter Property="AllowsAnimation" Value="False" />

         <Setter Property="Cursor" Value="Hand" />

     </Style>

 <Style x:Key="FIcon" TargetType="TextBlock">

         <Setter Property="FontFamily" Value="/CloudMusic;component/Resources/#SF2015"></Setter>

         <Setter Property="Foreground" Value="White"/>

         <Setter Property="TextAlignment" Value="Center"/>

         <Setter Property="HorizontalAlignment" Value="Center"/>

         <Setter Property="VerticalAlignment" Value="Center"/>

         <Setter Property="FontSize" Value="20"/>

     </Style>

     <!--FButton模板-->

     <ControlTemplate x:Key="FButton_Template" TargetType="{x:Type local:FButton}">

         <Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}"

                                     Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}"

                                     CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CornerRadius}"

                                     BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"

                                     Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}">

             <!--Icon/Text-->

             <StackPanel Orientation="Horizontal" VerticalAlignment="Center"

                         Margin="{TemplateBinding Padding}"

                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">

                 <TextBlock x:Name="icon"  Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FIconMargin}"

                            RenderTransformOrigin="0.5,0.5" Style="{StaticResource FIcon}"

                            Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIcon}"

                            FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIconSize}"

                            Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Foreground}">

                     <TextBlock.RenderTransform>

                         <RotateTransform x:Name="transIcon" Angle="0"/>

                     </TextBlock.RenderTransform>

                 </TextBlock>

                 <TextBlock VerticalAlignment="Center"  x:Name="txt"

                            TextDecorations="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ContentDecorations}"

                                                Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}"

                                                FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FontSize}"

                                                Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Foreground}"/>

             </StackPanel>

         </Border>

         <!--触发器-->

         <ControlTemplate.Triggers>

             <!--设置鼠标进入时的背景、前景样式-->

             <Trigger Property="IsMouseOver" Value="True">

                 <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},

                                 Path=MouseOverBackground}" TargetName="border" />

                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},

                                 Path=MouseOverForeground}" TargetName="icon"/>

                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},

                                 Path=MouseOverForeground}" TargetName="txt"/>

             </Trigger>

             <!--Ficon的动画触发器-->

             <MultiTrigger>

                 <MultiTrigger.Conditions>

                     <Condition Property="IsMouseOver" Value="true"></Condition>

                     <Condition Property="AllowsAnimation" Value="true"></Condition>

                 </MultiTrigger.Conditions>

                 <MultiTrigger.EnterActions>

                     <BeginStoryboard>

                         <Storyboard>

                             <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="180" Duration="0:0:0.2" />

                         </Storyboard>

                     </BeginStoryboard>

                 </MultiTrigger.EnterActions>

                 <MultiTrigger.ExitActions>

                     <BeginStoryboard>

                         <Storyboard>

                             <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.2" />

                         </Storyboard>

                     </BeginStoryboard>

                 </MultiTrigger.ExitActions>

             </MultiTrigger>

             <!--鼠标按下时的前景、背景样式-->

             <Trigger Property="IsPressed" Value="True">

                 <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},

                                 Path=PressedBackground}" TargetName="border" />

                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},

                                 Path=PressedForeground}" TargetName="icon"/>

                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},

                                 Path=PressedForeground}" TargetName="txt"/>

             </Trigger>

             <Trigger Property="IsEnabled" Value="false">

                 <Setter Property="Opacity" Value="0.5" TargetName="border"/>

             </Trigger>

         </ControlTemplate.Triggers>

     </ControlTemplate>

FButton cs代码：

 public partial class FButton : Button

     {

         public static readonly DependencyProperty PressedBackgroundProperty =

             DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.DarkBlue));

         /// <summary>

         /// 鼠标按下背景样式

         /// </summary>

         public Brush PressedBackground

         {

             get { return (Brush)GetValue(PressedBackgroundProperty); }

             set { SetValue(PressedBackgroundProperty, value); }

         }

         public static readonly DependencyProperty PressedSizeProperty =

             DependencyProperty.Register("PressedSize", typeof(int), typeof(FButton), new PropertyMetadata());

         /// <summary>

         /// 鼠标按下按钮大小

         /// </summary>

         public int PressedSize

         {

             get

             {

                 if (this.FontSize -  != ) return (int)this.FontSize - ;

                 return (int)GetValue(PressedSizeProperty);

             }

             set { SetValue(PressedSizeProperty, value); }

         }

         public static readonly DependencyProperty PressedForegroundProperty =

             DependencyProperty.Register("PressedForeground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.White));

         /// <summary>

         /// 鼠标按下前景样式（图标、文字）

         /// </summary>

         public Brush PressedForeground

         {

             get { return (Brush)GetValue(PressedForegroundProperty); }

             set { SetValue(PressedForegroundProperty, value); }

         }

         public static readonly DependencyProperty MouseOverBackgroundProperty =

             DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.RoyalBlue));

         /// <summary>

         /// 鼠标进入背景样式

         /// </summary>

         public Brush MouseOverBackground

         {

             get { return (Brush)GetValue(MouseOverBackgroundProperty); }

             set { SetValue(MouseOverBackgroundProperty, value); }

         }

         public static readonly DependencyProperty MouseOverForegroundProperty =

             DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.White));

         /// <summary>

         /// 鼠标进入前景样式

         /// </summary>

         public Brush MouseOverForeground

         {

             get { return (Brush)GetValue(MouseOverForegroundProperty); }

             set { SetValue(MouseOverForegroundProperty, value); }

         }

         public static readonly DependencyProperty FIconProperty =

             DependencyProperty.Register("FIcon", typeof(string), typeof(FButton), new PropertyMetadata("\ue604"));

         /// <summary>

         /// 按钮字体图标编码

         /// </summary>

         public string FIcon

         {

             get { return (string)GetValue(FIconProperty); }

             set { SetValue(FIconProperty, value); }

         }

         public static readonly DependencyProperty FIconSizeProperty =

             DependencyProperty.Register("FIconSize", typeof(int), typeof(FButton), new PropertyMetadata());

         /// <summary>

         /// 按钮字体图标大小

         /// </summary>

         public int FIconSize

         {

             get { return (int)GetValue(FIconSizeProperty); }

             set { SetValue(FIconSizeProperty, value); }

         }

         public static readonly DependencyProperty FIconMarginProperty = DependencyProperty.Register(

             "FIconMargin", typeof(Thickness), typeof(FButton), new PropertyMetadata(new Thickness(, , , )));

         /// <summary>

         /// 字体图标间距

         /// </summary>

         public Thickness FIconMargin

         {

             get { return (Thickness)GetValue(FIconMarginProperty); }

             set { SetValue(FIconMarginProperty, value); }

         }

         public static readonly DependencyProperty AllowsAnimationProperty = DependencyProperty.Register(

             "AllowsAnimation", typeof(bool), typeof(FButton), new PropertyMetadata(true));

         /// <summary>

         /// 是否启用Ficon动画

         /// </summary>

         public bool AllowsAnimation

         {

             get { return (bool)GetValue(AllowsAnimationProperty); }

             set { SetValue(AllowsAnimationProperty, value); }

         }

         public static readonly DependencyProperty CornerRadiusProperty =

             DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FButton), new PropertyMetadata(new CornerRadius()));

         /// <summary>

         /// 按钮圆角大小,左上，右上，右下，左下

         /// </summary>

         public CornerRadius CornerRadius

         {

             get { return (CornerRadius)GetValue(CornerRadiusProperty); }

             set { SetValue(CornerRadiusProperty, value); }

         }

         public static readonly DependencyProperty ContentDecorationsProperty = DependencyProperty.Register(

             "ContentDecorations", typeof(TextDecorationCollection), typeof(FButton), new PropertyMetadata(null));

         public TextDecorationCollection ContentDecorations

         {

             get { return (TextDecorationCollection)GetValue(ContentDecorationsProperty); }

             set { SetValue(ContentDecorationsProperty, value); }

         }

         static FButton()

         {

             DefaultStyleKeyProperty.OverrideMetadata(typeof(FButton), new FrameworkPropertyMetadata(typeof(FButton)));

         }

     }

最后，效果如下：

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

咳咳，这个就不好意思再说 “还原度百分之百” 了，主要是没有专门去找后边两个按钮的图标，直接拿到手上现有的就用了；以上就是此篇文章的全部内容，请批评指正；

三.参考博客

弹出窗口蒙版：https://www.cnblogs.com/tsliwei/p/6212162.html
自定义按钮FButton: https://www.cnblogs.com/anding/p/4968050.html

上一篇：Servlet过滤器——异常捕获过滤器


下一篇：JavaScript函数箭头的优势在哪里