仿酷狗音樂播放器開發日誌二十三 修復Option控件顯示狀態不全的bug（附源碼）

轉載請說明原出處，謝謝~~

         整個仿酷狗工程的開發將近尾聲，如今還差選項設置窗體的部分，顯然在設置窗體裏用的最多的就是OptionUI控件，我在寫好大體的佈局後去測試效果，發現Option控件的顯示效果很不理想。在源碼中能夠知道（屬性列表中列的不全面）Option提供了8種顯示狀態，分別爲

<Attribute name="normalimage" default="" type="STRING" comment="普通狀態圖片"/>
<Attribute name="hotimage" default="" type="STRING" comment="鼠標懸浮的狀態圖片"/>
<Attribute name="pushedimage" default="" type="STRING" comment="鼠標按下的狀態圖片"/>
<Attribute name="focusedimage" default="" type="STRING" comment="得到焦點時的狀態圖片"/>
<Attribute name="disabledimage" default="" type="STRING" comment="禁用的狀態圖片"/>
<Attribute name="selectedimage" default="" type="STRING" comment="選中的狀態圖片"/>
<Attribute name="selectedhotimage" default="" type="STRING" comment="選中的鼠標懸浮的的狀態圖片"/>
<Attribute name="foreimage" default="" type="STRING" comment="前景圖片"/>

        這些屬性能夠大體模仿出check控件分別在選中和非選中狀態下的一些效果，我設置了其中的normalimage、hotimage、pushedimage、disabledimage、selectedimage、selectedhotimage屬性，可是在測試時發現，只有 pushedimage 屬性沒有效果，也就是check控件和option控件沒有被按下的狀態的效果，同時也注意到原控件沒有提供選中的鼠標按下的的狀態圖片，這就讓Option控件和Check控件的效果很很差。查看源碼後發現問題。原代碼以下：

	void COptionUI::PaintStatusImage(HDC hDC)
	{
		m_uButtonState &= ~UISTATE_PUSHED;

		if( (m_uButtonState & UISTATE_HOT) != 0 && IsSelected() && !m_sSelectedHotImage.IsEmpty()) {
			if( !DrawImage(hDC, (LPCTSTR)m_sSelectedHotImage) )
				m_sSelectedHotImage.Empty();
			else goto Label_ForeImage;
		}
		else if( (m_uButtonState & UISTATE_SELECTED) != 0 ) {
			if( !m_sSelectedImage.IsEmpty() ) {
				if( !DrawImage(hDC, (LPCTSTR)m_sSelectedImage) ) m_sSelectedImage.Empty();
				else goto Label_ForeImage;
			}
			else if(m_dwSelectedBkColor != 0) {
				CRenderEngine::DrawColor(hDC, m_rcPaint, GetAdjustColor(m_dwSelectedBkColor));
				return;
			}	
		}

		CButtonUI::PaintStatusImage(hDC);

Label_ForeImage:
		if( !m_sForeImage.IsEmpty() ) {
			if( !DrawImage(hDC, (LPCTSTR)m_sForeImage) ) m_sForeImage.Empty();
		}
	}

        能夠看到，代碼的第一句就把按下狀態給去掉了，雖然不知道做者這樣寫的意圖，但我以爲這是不對的，去掉這句代碼後Option控件在非選中狀態下就能夠顯示鼠標按下的狀態了。

        隨後我給Option控件增長了一個selectedpushedimage屬性，用來設置選中的鼠標按下的的狀態圖片，讓Option的顯示狀態更加徹底，爲了使用這個屬性，須要修改SetAttribute函數，另外增長了兩個函數SetSelectedPushedImage和GetSelectedPushedImage，這是修改後的PaintStatusImage函數：

		if( (m_uButtonState & UISTATE_PUSHED) != 0 && IsSelected() && !m_sSelectedPushedImage.IsEmpty()) {
			if( !DrawImage(hDC, (LPCTSTR)m_sSelectedPushedImage) )
				m_sSelectedPushedImage.Empty();
			else goto Label_ForeImage;
		}
		else if( (m_uButtonState & UISTATE_HOT) != 0 && IsSelected() && !m_sSelectedHotImage.IsEmpty()) {
			if( !DrawImage(hDC, (LPCTSTR)m_sSelectedHotImage) )
				m_sSelectedHotImage.Empty();
			else goto Label_ForeImage;
		}
		else if( (m_uButtonState & UISTATE_SELECTED) != 0 ) {
			if( !m_sSelectedImage.IsEmpty() ) {
				if( !DrawImage(hDC, (LPCTSTR)m_sSelectedImage) ) m_sSelectedImage.Empty();
				else goto Label_ForeImage;
			}
			else if(m_dwSelectedBkColor != 0) {
				CRenderEngine::DrawColor(hDC, m_rcPaint, GetAdjustColor(m_dwSelectedBkColor));
				return;
			}	
		}

		CButtonUI::PaintStatusImage(hDC);

Label_ForeImage:
		if( !m_sForeImage.IsEmpty() ) {
			if( !DrawImage(hDC, (LPCTSTR)m_sForeImage) ) m_sForeImage.Empty();
		}

          這樣就可讓Option控件顯示出9種狀態了，徹底能夠模仿出真正的Option控件的樣子，這是我作的一部分的設置窗體的樣子：

           這裏給出完整的狀態屬性列表：

<Attribute name="normalimage" default="" type="STRING" comment="普通狀態圖片"/>
<Attribute name="hotimage" default="" type="STRING" comment="鼠標懸浮的狀態圖片"/>
<Attribute name="pushedimage" default="" type="STRING" comment="鼠標按下的狀態圖片"/>
<Attribute name="focusedimage" default="" type="STRING" comment="得到焦點時的狀態圖片"/>
<Attribute name="disabledimage" default="" type="STRING" comment="禁用的狀態圖片"/>
<Attribute name="selectedimage" default="" type="STRING" comment="選中的狀態圖片"/>
<Attribute name="selectedhotimage" default="" type="STRING" comment="選中的鼠標懸浮的的狀態圖片"/>
<Attribute name="selectedpushedimage" default="" type="STRING" comment="選中的鼠標按下的的狀態圖片"/>
<Attribute name="foreimage" default="" type="STRING" comment="前景圖片"/>

        另外由於須要大量重複使用Option控件，爲了不重複設置屬性，我這裏給出個人仿酷狗設置窗體的Default標籤，方便你們用，你們根據本身的狀況再去修改：

<Default name="CheckBox" value="textcolor="#FF454545" disabledtextcolor="#FF454545" width="10" height="14" textpadding="16,1,0,0" align="left" normalimage="file='UI\setting\check_normal.png' dest='0,0,14,14'" hotimage="file='UI\setting\check_hover.png' dest='0,0,14,14'" pushedimage="file='UI\setting\check_down.png' dest='0,0,14,14'" disabledimage="file='UI\setting\check_disable.png' dest='0,0,14,14'" selectedimage="file='UI\setting\checked_normal.png' dest='0,0,14,14'" selectedhotimage="file='UI\setting\checked_hover.png' dest='0,0,14,14'" selectedpushedimage="file='UI\setting\checked_down.png' dest='0,0,14,14'" autocalcwidth="true""/>

總結：

        其實還能夠在寫一個selecteddisabledimage屬性，用來給選中狀態下的Option控件設置禁用效果，這個代碼我目前不須要，就不寫了，留給你們本身寫吧，很簡單的。

        修改好的OPtion控件下載地址：點擊打開連接

Redrain 2014.8.25