WPF仿网易云音乐系列（二、歌单创建窗口+登录设置模块）
2024-05-13 06:11:01
老衲牺牲午休时间写博客，都快把自己感动了，-_-!!
之前上一篇随笔，我看了下评论，有部分人说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 /// <summary>
2 /// CreateAlbum.xaml 的交互逻辑
3 /// </summary>
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 //容器Grid
19 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 //容器Grid
32 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 /// <summary>
48 /// 添加歌单
49 /// </summary>
50 /// <param name="sender"></param>
51 /// <param name="e"></param>
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">Michael</Button>
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 <!--背景透明的FButton样式-->
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 <!--FButton模板-->
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 <!--Icon/Text-->
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 <!--Ficon的动画触发器-->
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 /// <summary>
6 /// 鼠标按下背景样式
7 /// </summary>
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 /// <summary>
17 /// 鼠标按下按钮大小
18 /// </summary>
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 /// <summary>
33 /// 鼠标按下前景样式（图标、文字）
34 /// </summary>
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 /// <summary>
44 /// 鼠标进入背景样式
45 /// </summary>
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 /// <summary>
55 /// 鼠标进入前景样式
56 /// </summary>
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 /// <summary>
66 /// 按钮字体图标编码
67 /// </summary>
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 /// <summary>
77 /// 按钮字体图标大小
78 /// </summary>
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 /// <summary>
88 /// 字体图标间距
89 /// </summary>
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 /// <summary>
99 /// 是否启用Ficon动画
100 /// </summary>
101 public bool AllowsAnimation
102 {
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 /// <summary>
110 /// 按钮圆角大小,左上，右上，右下，左下
111 /// </summary>
112 public CornerRadius CornerRadius
113 {
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 ContentDecorations
121 {
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 }View Code
最后，效果如下：
咳咳，这个就不好意思再说 “还原度百分之百” 了，主要是没有专门去找后边两个按钮的图标，直接拿到手上现有的就用了；以上就是此篇文章的全部内容，请批评指正；
三.参考博客
弹出窗口蒙版：https://www.cnblogs.com/tsliwei/p/6212162.html
自定义按钮FButton: https://www.cnblogs.com/anding/p/4968050.html
转载于:https://www.cnblogs.com/xytx/p/9262901.html
WPF仿网易云音乐系列（二、歌单创建窗口+登录设置模块）相关推荐
- WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）
WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 原文:WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 1.简介 上一篇咱们说到, ...
- WPF仿网易云音乐系列（序）
1.简介 由于之前做了一个播放器,苦于不懂界面设计,只得去借鉴借鉴一些成功的作品,网易云音乐就甚合朕心,哈哈,最后做出来的效果如下: 本系列文章就来和大家讨论以下,如何用WPF去仿制一个网易云音乐来: ...
- 【vue3仿网易云音乐app】歌单列表以及歌单界面
实现效果: 实现思路: 异步获取后台api中的歌单信息 使用轮播图组件,实现歌单轮播 将播放量转换为万.亿单位 点击歌单画面,进入单独的歌单详情页 具体实现过程: 1. 异步获取后台api中的歌单信息 ...
- python爬虫网易云_Python爬虫网易云音乐Top50热门歌单
周末,打开手机听听音乐放松下,发现手机里的音乐好久没换了,想听点其他歌却不知道换什么歌,你们有没有遇到这样的听歌慌,今天就用 python 爬虫来爬取网易云音乐里不同类型歌手的 top 50 热门歌曲 ...
- Scrapy爬虫+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
此货很干,跟上脚步!!! Cookie cookie是什么东西? 小饼干?能吃吗? 简单来说就是你第一次用账号密码访问服务器 服务器在你本机硬盘上设置一个身份识别的会员卡(cookie) 下次再去访问 ...
- 来跟我学爬虫，爬取网易云音乐的邓紫棋歌单MP3，注意：VIP歌曲不可以爬取
@Author:Runsen 我又回来了写几个爬虫案例了,这次是写一个简单的爬虫,我来教你如何爬取网易云音乐的歌单MP3,正所谓下载一个mp3很麻烦,你们的女朋友想听歌,秀即使帮她爬取所有MP3,从此 ...
- 听歌识曲java_Android自定义View之继承扩展(仿网易云音乐听歌识曲)
前言 上篇文章说到了自定义View的组合实战,链接:Android自定义View之组合实战(以支付宝页面为例) ,感兴趣的同学可以看看.今天要分享的是一个模仿网易云音乐听歌识曲界面的自定义View,实 ...
- 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
目录 一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架 二.开发工具与项目创建 1.开发工具 2.项目创 ...
- 用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星 ...
最新文章
- 和12岁小同志搞创客开发：手撕代码，做一款密室自动门
- 深度丨人工智能的最大未解之谜是什么？
- 启动zookeeper_Zookeeper原理篇-Zookeeper启动流程分析
- 移动app崩溃原因及场景
- SAP Spartacus Cost Center list的实现原理
- 新手如何快速上手Linux，韦东山告诉你。
- 用Sql添加删除字段，判断字段是否存在的方法
- 别管真假，先改密码！！！
- java11 scala_JDK1.10+scala环境的搭建之windows环境
- 三维旋转四元数系列（1.复数与二维旋转）
- 关于margin的数值是百分比，参照对象
- 老大加需求：做一个支持超大文件HTTP断点续传的上传服务，我懵逼了~
- lodop指定打印机打印_2020年打印机推荐选购，看这篇就够了
- 招募贴：Hadoop专业解决方案招募义务翻译人员
- 光环大数据python爬虫
- BoundsChecker下载
- 数据库信息泄漏 不可忽视的安全短板
- 上海交通大学python期末考试样题加解析_上海交通大学python期末考试样题加解析.doc...
- mac安装homebrew失败的处理方法
- Vue小写金额转大写金额以及watch（监听）的使用