SkinUI入门教程

SkinUI入门教程


3.13 滑块

<p>滑块由CSkinSlider类来代表,继承于CSkinView,支持CSkinView的所有属性和方法。</p> <p>通过给滑块设置不同的图片资源,可以得到各种形态的进度条。</p> <h2>1 属性和相关方法</h2> <h4>1.1 设置滑块的移动范围</h4> <ul> <li>通过XML属性控制如下: <pre><code class="language-xml">Range=&amp;quot;100&amp;quot;</code></pre></li> <li>通过C++程序代码调用方法控制如下: <pre><code class="language-c">void SetRange(LONG nRange);</code></pre></li> </ul> <h4>1.2 设置滑块的当前位置</h4> <ul> <li>通过XML属性控制如下: <pre><code class="language-xml">Pos=&amp;quot;1&amp;quot;</code></pre></li> <li>通过C++程序代码调用方法控制如下: <pre><code class="language-c">void SetPos(LONG nPos);</code></pre></li> </ul> <h4>1.3 设置滑块的图像</h4> <ul> <li>通过XML属性控制如下: <pre><code class="language-xml">ThumbImage=&amp;quot;SliderThumb.png&amp;quot;</code></pre></li> <li>通过C++程序代码调用方法控制如下: <pre><code class="language-c">void SetThumbImage(uint64 nPos);</code></pre></li> </ul> <h2>2 消息处理</h2> <h4>2.1 WM_SLIDER_POS_CHANGE消息</h4> <p>滑块位置发生变化时,会给所在窗口发送自定义消息WM_SLIDER_POS_CHANGE。</p> <p>参考下面的示例代码:</p> <pre><code class="language-cpp">void CSkinSliderThumb::HandleMouseMove(CPoint point, UINT nFlags) { if(GetState() == VS_PRESS_DOWN) { CSkinSlider* pScrollSlider = static_cast&amp;lt;CSkinSlider*&amp;gt;(GetParent()); if(pScrollSlider) { CRect rcRange = pScrollSlider-&amp;gt;GetRect(); LONG nWidth = GetRect().Width(); LONG nLeft = point.x - m_nLeftOffset; LONG nRight = nLeft + nWidth; if(nLeft &amp;lt; rcRange.left) { nLeft = rcRange.left; } else if(nRight &amp;gt; rcRange.right) { nLeft = rcRange.right - nWidth; } CSize szThumb = SkinUI::GetImageSize(GetImage()); LONG nRange = pScrollSlider-&amp;gt;GetRange(); LONG nPos = (nLeft - rcRange.left) * nRange / (rcRange.Width() - szThumb.cx); if(nPos != pScrollSlider-&amp;gt;GetPos()) { pScrollSlider-&amp;gt;SetPos(nPos); pScrollSlider-&amp;gt;SetRect(rcRange); pScrollSlider-&amp;gt;RedrawView(); CSkinSlider* pScrollSlider = static_cast&amp;lt;CSkinSlider*&amp;gt;(GetParent()); if(pScrollSlider) { GetOwner()-&amp;gt;PostMessage(WM_SLIDER_POS_CHANGE, pScrollSlider-&amp;gt;GetId(), reinterpret_cast&amp;lt;LPARAM&amp;gt;(pScrollSlider)); } } } } }</code></pre> <h2>请看下面的示例</h2> <h4>效果图</h4> <p><img src="http://www.skinui.cn/doc/img/3/13/1.png" alt="滑块" /></p> <h4>布局文件</h4> <pre><code class="language-xml">&amp;lt;SkinDialog DefaultWidth=&amp;quot;400&amp;quot; DefaultHeight=&amp;quot;300&amp;quot; SysButton=&amp;quot;CLOSE&amp;quot; Icon=&amp;quot;128&amp;quot; Caption=&amp;quot;IDS_CONTROL_SHOW13&amp;quot; Animation=&amp;quot;SizeChange&amp;quot;&amp;gt; &amp;lt;SkinSlider Id=&amp;quot;101&amp;quot; LayoutHeight=&amp;quot;21&amp;quot; AlignParentLeft=&amp;quot;15&amp;quot; AlignParentRight=&amp;quot;15&amp;quot; AlignParentVerticalCenter=&amp;quot;-20&amp;quot; Range=&amp;quot;100&amp;quot; Pos=&amp;quot;0&amp;quot; Image=&amp;quot;SliderBkg.png&amp;quot; ThumbImage=&amp;quot;SliderThumb.png&amp;quot;/&amp;gt; &amp;lt;SkinButton Id=&amp;quot;201&amp;quot; LayoutWidth=&amp;quot;WrapContent&amp;quot; LayoutHeight=&amp;quot;30&amp;quot; ChildText1=&amp;quot;增加进度, Step=10&amp;quot; Image=&amp;quot;Button.png&amp;quot; Layout=&amp;quot;Button.xml&amp;quot; AlignParentHorizontalCenter=&amp;quot;0&amp;quot; AlignParentVerticalCenter=&amp;quot;20&amp;quot; PressDownOffset=&amp;quot;1&amp;quot;/&amp;gt; &amp;lt;/SkinDialog&amp;gt;</code></pre> <h4>h文件</h4> <pre><code class="language-cpp">#pragma once class CSliderDialog : public CSkinDialog { public: enum { IDC_SLIDER1 = 101, IDC_BUTTON1 = 201, }; public: CSliderDialog(const tstring&amp;amp; strXml); public: virtual void OnInitDialog(); protected: void OnBtnClickedAddPos(UINT uNotifyCode, int nID, CSkinView* pView); LRESULT OnSliderPosChange(WPARAM wParam, LPARAM lParam); SKINUI_DECLARE_MESSAGE_MAP() private: CSkinSlider* m_pSlider1; };</code></pre> <h4>cpp文件</h4> <pre><code class="language-cpp">#include &amp;quot;stdafx.h&amp;quot; #include &amp;quot;SliderDialog.h&amp;quot; SKINUI_BEGIN_MESSAGE_MAP(CSliderDialog, CSkinDialog) ON_SKINUI_COMMAND(IDC_BUTTON1, OnBtnClickedAddPos) ON_SKINUI_MESSAGE(WM_SLIDER_POS_CHANGE, OnSliderPosChange) SKINUI_END_MESSAGE_MAP() CSliderDialog::CSliderDialog(const tstring&amp;amp; strXml) : CSkinDialog(strXml) , m_pSlider1(NULL) { } void CSliderDialog::OnInitDialog() { CSkinDialog::OnInitDialog(); m_pSlider1 = static_cast&amp;lt;CSkinSlider*&amp;gt;(GetChildById(IDC_SLIDER1)); } void CSliderDialog::OnBtnClickedAddPos(UINT uNotifyCode, int nID, CSkinView* pView) { if(m_pSlider1) { m_pSlider1-&amp;gt;SetPos(min(m_pSlider1-&amp;gt;GetPos() + 10, m_pSlider1-&amp;gt;GetRange())); m_pSlider1-&amp;gt;SetRect(m_pSlider1-&amp;gt;GetRect()); m_pSlider1-&amp;gt;RedrawView(); } } LRESULT CSliderDialog::OnSliderPosChange(WPARAM wParam, LPARAM lParam) { CSkinSlider* pSlider = reinterpret_cast&amp;lt;CSkinSlider*&amp;gt;(lParam); if(pSlider) { MsgBoxModeless(SkinUI::StringFormat(_T(&amp;quot;OnSliderPosChange,Id=%d,CurPos=%d!&amp;quot;), wParam, pSlider-&amp;gt;GetPos())); } return 1L; }</code></pre>

页面列表

ITEM_HTML