C#简单音乐播放器（三）

谁借莪１个温暖的怀抱￠ 2022-05-18 06:06 337阅读 0赞

# 简单音乐播放器（三） #

[【上一篇】简单音乐播放器（二）][Link 1]

## 一、前言 ##

*  时隔一年，终于回来填坑了。前段时间把这个以前写的东西拿出来大改了UI，然后用去作为数字媒体开发课的作业交了，课上演示效果还不错。因为到了要找实习的时间了，最近的半年主要精力都花在学Java了，C\#用得也少了许多。
 *  这次主要是把项目的UI进行了美化，自己重绘了两个控件，现在的界面不再是小白框了。（先上界面）  
    ![70][]  
    （专辑封面界面）  
    ![70 1][]  
    （播放列表界面）
 *  对于使用C\#开发桌面程序而已，更漂亮的界面与更好看的动画几乎在Winform上很难实现，更应该去考虑使用WPF。虽然Winform框架已经过时，但博主使用起来更顺手，开发起来更快，所以选择继续使用Winform开发，尽量的美化了程序的UI。
 *  本篇博客不再讲程序里的代码逻辑，这一次分享美化界面，控件重绘的相关内容（如果想了解播放器的代码逻辑部分，可以参考本系列的前两篇博客内容）。
 *  另外本项目源码及资源都已上传至码云，有需要可进行下载（代码存在有些许bug，如有疑问，乐意回答）。

## 二、界面设计 ##

### 资源 ###

1.  UI设计主要参考了花瓣网上的播放器UI以及网易云音乐播放器（虽然比网易云丑多了…）；
2.  图标都下载自阿里iconfont网站，根据需要适当调整颜色；

### 交互 ###

#### 按钮 ####

程序中使用的按钮几乎所有都是picturebox控件，通过MouseEnter与MouseLeave事件，更改按钮的显示样式。

![这里写图片描述][70 2]  
（按钮交互）

### 列表 ###

程序中主要包含了两个列表，左侧的菜单栏，右侧的播放列表。  
1. 左侧菜单使用ListBox控件重绘，播放列表使用ListView控件重绘。所以接下来会分别介绍这两种控件的重绘方法与重绘过程。  
2. 另外进度条与音量条没有进行重绘（感兴趣的读者可以自己尝试着去重绘控件）。

## 三、重绘控件 ##

### 菜单 ###

#### 控件介绍 ####

左侧的菜单栏使用控件ListBox，功能是用于选择不同的列表（本地音乐、收藏夹等）。

![70 3][]  
（菜单选中效果）  
本程序中只实现了List（本地音乐）、Favorite（收藏夹）这两个页面的功能，其他的功能读者可以按照个人需要进行设计和添加。

#### 重绘事件 ####

*  DrawItem（绘制子项）
 *  MeasureItem（设置子项高度）

ListBox通过以上两个事件，使用GDI+即可按照自己需要的样式进行重绘（如果还不会使用GDI+绘图，推荐学习下，做开发迟早都会使用到）。

#### 重绘步骤 ####

1.  首先要将ListBox控件的**DrawMode**修改为OwnerDrawVariable（默认是由系统帮我们自动绘制）。
2.  编写DrawItem与MeasureItem事件代码。

#### 重绘代码 ####

注释已经很详细了，稍懂GDI+绘图函数应该很容易就能看懂。  
绘制时，需要注意两个问题：

*  重绘闪烁：重绘控件必遇到的问题。解决办法有有很多（比如双缓冲、缓存等），本次使用的是缓存方式，即将要绘制的内容先全部绘制在一个Bitmap上，在所有绘制结束后再将其给重绘的控件。
 *  绘制顺序：后绘制的内容会覆盖先绘制的内容，有点PS里图层相互遮盖的意思。

/* * 绘制子项样式 */
    private void lbMenu_DrawItem(object sender, DrawItemEventArgs e)
    {
        Bitmap bitmap = new Bitmap(e.Bounds.Width, e.Bounds.Height);
    
        int index = e.Index; //获取当前要进行绘制的行的序号，从0开始。 
        Graphics g = e.Graphics; //获取Graphics对象。
    
        Graphics tempG = Graphics.FromImage(bitmap);
        //使绘图质量最高，消除锯齿
        tempG.SmoothingMode = SmoothingMode.AntiAlias;
        tempG.InterpolationMode = InterpolationMode.HighQualityBicubic;
        tempG.CompositingQuality = CompositingQuality.HighQuality;
    
        //获取当前要绘制的行的一个矩形范围。
        Rectangle bound = e.Bounds;
        //获取当前要绘制的行的显示文本。
        string text = this.menuItemList[index].Text.ToString(); 
    
        //绘制选中时的背景，要注意绘制的顺序，后绘制的会覆盖先复制的
        Color backgroundColor = Color.FromArgb(34, 35, 39); //背景色
        Color guideTagColor = Color.FromArgb(183, 218, 114); //高亮指示色
        Color selectedBackgroundColor = Color.FromArgb(46, 47, 51); //选中背景色
        Color fontColor = Color.Gray; //字体颜色
        Color selectedFontColor = Color.White; //选中字体颜色
        Font textFont = new Font("微软雅黑", 9, FontStyle.Bold); //文字格式
        Image itmeImage = this.menuItemList[index].Img; //图标
    
         //矩形大小
         Rectangle backgroundRect = new Rectangle(0, 0, bound.Width, bound.Height);
         Rectangle guideRect = new Rectangle(0, 4, 5, bound.Height - 8);
         Rectangle textRect = new Rectangle(55, 0, bound.Width, bound.Height);
         Rectangle imgRect = new Rectangle(20, 4, 22, bound.Height - 8);
    
         //当前选中行
         if ((e.State & DrawItemState.Selected) == DrawItemState.Selected)
         {
             backgroundColor = selectedBackgroundColor;
             fontColor = selectedFontColor;
         }
         else
         {
             guideTagColor = backgroundColor;
         }
         //绘制背景色
         tempG.FillRectangle(new SolidBrush(backgroundColor), backgroundRect);
         //绘制左前高亮指示
         tempG.FillRectangle(new SolidBrush(guideTagColor), guideRect);
         //绘制显示文本
         TextRenderer.DrawText(tempG, text, textFont, textRect, fontColor,
                               TextFormatFlags.VerticalCenter | TextFormatFlags.Left);
         //绘制图标
         tempG.DrawImage(itmeImage, imgRect);
    
         g.DrawImage(bitmap, bound.X, bound.Y, bitmap.Width, bitmap.Height);
         tempG.Dispose();
    }
    
    /* * 设置子项行高 */
    private void lbMenu_MeasureItem(object sender, MeasureItemEventArgs e)
    {
         e.ItemHeight = 30;
    }

### 播放列表 ###

#### 控件介绍 ####

右侧的播放列表使用ListView控件，主要功能是显示歌曲列表。

![70 4][]  
（播放列表选中效果）  
播放列表奇数行与偶数行颜色不同，选中高亮突出显示，右键操作菜单。

#### 重绘事件 ####

*  DrawColumnHeader（绘制表头）
 *  DrawSubItem（绘制子项）

ListView通过以上两个事件，同样使用GDI+即可按照自己需要的样式进行重绘。

#### 重绘步骤 ####

1.  设置ListView控件属性  
    
    
     *  View设置为Details
     *  OwnerDraw设置为True
     *  HeaderStyle设置为Nonclickable
     *  Scrollable设置为False
     *  BorderStyle设置为None
     *  FullRowSelect设置为True
2.  编写DrawColumnHeader与DrawSubItem事件代码。

#### 重绘事件代码 ####

不难理解，一看就能明白。

/* * 绘制表头 */
    private void lvSongList_DrawColumnHeader(object sender, DrawListViewColumnHeaderEventArgs e)
    {
        //获取子项的索引值
        int index = e.ColumnIndex;
        //绘制边框
        e.Graphics.FillRectangle(new SolidBrush(Color.FromArgb(27, 27, 25)), e.Bounds);
        //绘制文本文字
        TextRenderer.DrawText(e.Graphics, lvSongList.Columns[index].Text, new Font("微软雅黑", 9, FontStyle.Regular), e.Bounds, Color.Gray, TextFormatFlags.VerticalCenter | TextFormatFlags.Left);
    
        //绘制背景色
        Pen pen = new Pen(Color.FromArgb(34, 35, 39), 2);
        Point p = new Point(e.Bounds.Left - 1, e.Bounds.Top + 1);
        Size s = new Size(e.Bounds.Width, e.Bounds.Height - 2);
        Rectangle r = new Rectangle(p, s);
        e.Graphics.DrawRectangle(pen, r);
    }
    
    /* * 绘制子项 */
    private void lvSongList_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
    {
        //没有子项
        if (e.ItemIndex == -1)
            return;
    
        //偶数项
        if (e.ItemIndex % 2 == 0)
        {
            e.SubItem.BackColor = Color.FromArgb(27, 29, 32);
            e.DrawBackground();
        }
        //设置字体颜色（歌曲名白色，其他项灰色）
        if (e.ColumnIndex == 1)
            e.SubItem.ForeColor = Color.White;
        else
            e.SubItem.ForeColor = Color.Gray;
    
        //如果是被选中的项
        if ((e.ItemState & ListViewItemStates.Selected) == ListViewItemStates.Selected)
        {
            using (SolidBrush brush = new SolidBrush(Color.Blue))
            {
                e.Graphics.FillRectangle(new SolidBrush(Color.FromArgb(46, 47, 51)), e.Bounds);
            }
        }
    
        if (!string.IsNullOrEmpty(e.SubItem.Text))
        {
            this.DrawText(e, e.Graphics, e.Bounds, 2);
        }
    }

## 四、码云地址 ##

项目地址：[https://gitee.com/Rhine/SimpleMediePlayer][https_gitee.com_Rhine_SimpleMediePlayer]  
另外如果对git使用不熟，这里推荐廖老师写的非常棒的[git教程][git]。  
有任何疑问，可在评论下留言。

[Link 1]: https://blog.csdn.net/qq_34802416/article/details/77777739
[70]: /images/20220518/d45372ccf4e44229ac8d075d7417221e.png
[70 1]: /images/20220518/6eddf425942b471a866cb5be01fae450.png
[70 2]: /images/20220518/c6e0d254c734446fb6238cdf24e13bef.png
[70 3]: /images/20220518/315544cb1a22492a9435d46426fa0556.png
[70 4]: /images/20220518/9087ffd3047e40d69404b75e31b50975.png
[https_gitee.com_Rhine_SimpleMediePlayer]: https://gitee.com/Rhine/SimpleMediePlayer
[git]: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000