WPF做的酷狗页面

开发工具与关键技术：Vs/C#/WPF
作者：张文静
撰写时间：2019/4/22
基于XAML语音的酷狗

首先用网格布局，定义行和列的数量，以及行高和列宽来控制的布局，分别是三行，包括头部、中部、尾部。头部再次定义行和列的数量，分别是三列。首先头部的背景色设置为渐变色，让网格跨三列，即Grid.ColumnSpan等于三，在Border标记里面设置边框的厚度（BorderThickness）为1，边框的颜色（BorderBrush）为白色，设置边框的背景色为渐变色（LinearGradientBrush），开始起始点（StartPoint）为零到零；结束点（EndPoint）0到1。然后设置椭圆的图片，让图片填充，通过Margin设置具体的位置。见截图：

写一个Style的样式，x:key唯一值，它的对象类型是Label标记，设置样式的字体大小为17、字体颜色为白色，Triggers触发器，当鼠标移到对象时，改变字体的颜色和字体的大小触发，Setter是设置器的意思。StaticResource然后引用资源字典中定义的资源，通过Margin设置对象的具体位置，见截图：


中间部分，定义行和列的数量，以及行高和列宽来控制的布局，分别是三列，第一列的宽度比例为一，然后设置八行。当行为一的时候，右设置五行，设置Style的样式，x:key唯一值，它的对象类型是Button标记，设置样式的字体大小为18、字体颜色为灰色、背景颜色为白色、边框颜色为白色，Triggers触发器，当鼠标移到对象时，改变字体颜色、字体大小、边框厚度的触发，Setter是设置器的意思，StaticResource然后引用资源字典中定义的资源。见截图：


当行数为三，列数为零时，设置网格布局为三行，第一行用Label标记设置“默认列表”，用Margin设置具体的位置，第二行和第三行设置“添加本地歌曲”“添加本地歌曲文件夹”，使它们的背景色为白色，设置水平方向，边框的颜色为白色，以及字体颜色为灰色，见截图：


执行结果，如图所示：

当行数为零，列数为二时，再次设置网格的布局为十行。当行为零列为零时，首先设置Style的样式，x:key唯一值，它的对象类型是Button标记，设置样式的字体大小为13、字体颜色、背景颜色为白色、边框颜色为白色，Triggers触发器，当鼠标移到对象时，改变字体颜色、边框厚度的触发，Setter是设置器的意思，。以及设置下划线为灰色，厚度为2，StaticResource然后引用资源字典中定义的资源，见截图：



当行数为二，再次布局网格的列数，分别为六列，分别设置网格列宽为一的比例，通过StaticResource然后引用资源字典中定义的资源，重新设置字体大小为十二；当行数为三时，设置厚度二的下划线，边框为白色，背景色为灰色，见截图：

当行数为四时，再次布局网格为三行三列；当行为一列为一时，布局网格为九列，通过StaticResource然后引用资源字典中定义的资源。设置Style的样式，x:key唯一值，它的对象类型是Button标记，设置样式的字体大小为10、字体颜色、背景颜色、边框颜色，Triggers触发器，当鼠标移到对象时，改变字体颜色、边框厚度的触发，Setter是设置器的意思，。以及设置下划线为灰色，厚度为2。见截图：



Ellipse椭圆，把图片放置到椭圆里面，fill填充，让图片填充到椭圆里面；Foreground字体颜色，通过Margin设置具体的位置，通过FontSize改变字体大小，见截图：


执行结果，如下图：

尾部部分，当行为二，列为零时，设置网格为十四列，通过椭圆填充背景图片，见截图：

执行结果，如图所示：

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