WPF的网易云音乐页面

开发工具与关键技术：VS/C#/WPF
作者：张文静
撰写时间：2019/4/16
基于XAML语言的网易云音乐：

首先用网格布局，定义行和列，布局为三行，布局行高的比例，见截图：

头部部分，又分别布局多个网格，定义十行以及行高度的比例，以及头部的背景色，见截图：



头部部分执行结果，见截图：

中间的左边部分，定义网格的十行零列，见截图：

然后布局网格的行高列框，即私人FM、视频、朋友、我的音乐、本地音乐、下载管理、创建歌曲、我喜欢的音乐的代码同上，StaticReSource引用数据字典中定义的静态资源，x:Key设置它的唯一值，它的对象类型是Lable标记，通过Setter设置器，设置ProPerty属性和属性的值，再然后通过Trigger触发器触发设置器中的属性和属性的值，见截图：


中间的左边部分执行结果，见截图：

中间右边部分，定义十行零列，设置它的行高比例。即头部的个性推荐、歌曲、主播电视、歌手、最新音乐的头部位置布局为八行零列，然后设置它的列宽，见截图：

以及头部部分的底部下划线和轮播的图片，以及轮播的Button按钮，然后调用资源字典中定义的静态资源，见截图：



推荐歌曲和更多，布局三列，设置网格的列宽，字体大小（FontSize）为14，以及它的字体颜色（Foreground）、背景色（Background）、边框颜色（BorderBrush），见截图：

以及设置轮播图片下面的下划线，设置下划线的背景色和左、右、上为零，低部位零点一的值；以及推荐歌曲下面的图片，定义网格为五行零列，设置列宽，在网格里面放置图片，见截图：

布局图片下面的文字内容，设置网格布局为五列，设置行宽的比例，和Label标记的样式；以及中间右边内容的左右空白部分，调用资源字典中定义的静态资源，见截图：


中间右边的执行结果，见截图：

尾部部分内容，设置网格布局为十一列零行，设置网格的列宽，调用资源字典中定义的静态资源，设置字体大小（FontSize）、背景色（Background）、字体颜色（Foreground）、边框颜色（BorderBrush）；以及设置音乐的进度条，声音大小的进度条，调用资源字典中定义的静态资源，见截图：



尾部执行结果，见截图：

总的执行结果，见头部图片。