簡單音樂播放器（三）

【上一篇】簡單音樂播放器（二）

一、前言

• 時隔一年，終于回來填坑了。前段時間把這個以前寫的東西拿出來大改了UI，然后用去作為數字媒體開發課的作業交了，課上演示效果還不錯。因為到了要找實習的時間了，最近的半年主要精力都花在學Java了，C#用得也少了許多。
• 這次主要是把項目的UI進行了美化，自己重繪了兩個控件，現在的界面不再是小白框了。（先上界面）
  
  （專輯封面界面）
  
  （播放列表界面）
• 對于使用C#開發桌面程序而已，更漂亮的界面與更好看的動畫幾乎在Winform上很難實現，更應該去考慮使用WPF。雖然Winform框架已經過時，但博主使用起來更順手，開發起來更快，所以選擇繼續使用Winform開發，盡量的美化了程序的UI。
• 本篇博客不再講程序里的代碼邏輯，這一次分享美化界面，控件重繪的相關內容（如果想了解播放器的代碼邏輯部分，可以參考本系列的前兩篇博客內容）。
• 另外本項目源碼及資源都已上傳至碼云，有需要可進行下載（代碼存在有些許bug，如有疑問，樂意回答）。

二、界面設計

資源

UI設計主要參考了花瓣網上的播放器UI以及網易云音樂播放器（雖然比網易云丑多了…）；

圖標都下載自阿里iconfont網站，根據需要適當調整顏色；

交互

按鈕

程序中使用的按鈕幾乎所有都是picturebox控件，通過MouseEnter與MouseLeave事件，更改按鈕的顯示樣式。

（按鈕交互）

列表

程序中主要包含了兩個列表，左側的菜單欄，右側的播放列表。
1. 左側菜單使用ListBox控件重繪，播放列表使用ListView控件重繪。所以接下來會分別介紹這兩種控件的重繪方法與重繪過程。
2. 另外進度條與音量條沒有進行重繪（感興趣的讀者可以自己嘗試著去重繪控件）。

三、重繪控件

菜單

控件介紹

左側的菜單欄使用控件ListBox，功能是用于選擇不同的列表（本地音樂、收藏夾等）。

（菜單選中效果）
本程序中只實現了List（本地音樂）、Favorite（收藏夾）這兩個頁面的功能，其他的功能讀者可以按照個人需要進行設計和添加。

重繪事件

• DrawItem（繪制子項）
• MeasureItem（設置子項高度）

ListBox通過以上兩個事件，使用GDI+即可按照自己需要的樣式進行重繪（如果還不會使用GDI+繪圖，推薦學習下，做開發遲早都會使用到）。

重繪步驟

首先要將ListBox控件的DrawMode修改為OwnerDrawVariable（默認是由系統幫我們自動繪制）。

編寫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控件，主要功能是顯示歌曲列表。

（播放列表選中效果）
播放列表奇數行與偶數行顏色不同，選中高亮突出顯示，右鍵操作菜單。

重繪事件

• DrawColumnHeader（繪制表頭）
• DrawSubItem（繪制子項）

ListView通過以上兩個事件，同樣使用GDI+即可按照自己需要的樣式進行重繪。

重繪步驟

設置ListView控件屬性

• View設置為Details
• OwnerDraw設置為True
• HeaderStyle設置為Nonclickable
• Scrollable設置為False
• BorderStyle設置為None
• FullRowSelect設置為True

編寫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;elsee.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
另外如果對git使用不熟，這里推薦廖老師寫的非常棒的git教程。
有任何疑問，可在評論下留言。

總結

以上是生活随笔為你收集整理的C#简单音乐播放器（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。