3.4 图片框
<p>图片框分为显示单帧图片的普通图片框和显示多帧图片的加强图片框。图片内容可以加载资源文件，也可以加载保存在硬盘任意位置的图片。</p>
<h2>1 普通图片框</h2>
<p>普通图片框由CSkinImageView类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。
CSkinImageView可以显示普通静态图片，也可以显示Gif动画图片。</p>
<h4>1.1 设置图片框显示的Gif动画是否需要自动播放</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">AutoPlay=&quot;true&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetAutoPlay(BOOL bAutoPlay);</code></pre>
<p>如果图片框设置为自动播放，则Gif动画会在初始化完成之后自动播放。</p></li>
</ul>
<h4>1.2 设置图片框是否可以点击</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">ClickAble=&quot;true&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetClickAble(BOOL bClickAble);</code></pre>
<p>如果图片框设置为可点击，单击图片框时，SkinUI会给图片框所在窗口发送WM_COMMAND消息。</p></li>
</ul>
<h4>1.3 设置图片框显示资源图片</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">Image=&quot;Finish.png&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">virtual void SetImage(const tstring&amp; strImage);</code></pre></li>
</ul>
<h4>1.4 设置图片框显示保存在硬盘任意位置的图片</h4>
<ul>
<li>无法通过XML属性控制</li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">virtual void LoadImage(const tstring&amp; strImage);</code></pre></li>
</ul>
<h2>2 加强图片框</h2>
<p>加强图片框由CSkinImageViewEx类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。
CSkinImageViewEx用来显示将动画的多帧从左到右依次排列的多帧动画图片资源。</p>
<h4>2.1 设置图片框显示的多帧动画图片是否需要自动播放</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">AutoPlay=&quot;true&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetAutoPlay(BOOL bAutoPlay);</code></pre>
<p>如果图片框设置为自动播放，则多帧动画图片会在初始化完成之后自动播放。</p></li>
</ul>
<h4>2.2 设置图片框是否可以点击</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">ClickAble=&quot;true&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetClickAble(BOOL bClickAble);</code></pre>
<p>如果图片框设置为可点击，单击图片框时，SkinUI会给图片框所在窗口发送WM_COMMAND消息。</p></li>
</ul>
<h4>2.3 设置图片框显示资源图片</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">Image=&quot;Loading.png&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">virtual void SetImage(const tstring&amp; strImage);</code></pre></li>
</ul>
<h4>2.4 设置图片播放下一帧的时间间隔</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">Elapse=&quot;50&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetElapse(LONG nInterval);</code></pre></li>
</ul>
<h2>3 消息处理</h2>
<h4>3.1 WM_COMMAND消息</h4>
<p>图片响应鼠标单击消息，需要满足两个条件：</p>
<ul>
<li>被设置为可点击；</li>
<li>Id不为0</li>
</ul>
<p>当单击图片，鼠标左键抬起时，会给图片所在的窗口发送WM_COMMAND消息。</p>
<p>请参考下面的示例代码：</p>
<pre><code class="language-cpp">void CSkinImageView::HandleLButtonUp(CPoint point)
{
if(GetState() == VS_PRESS_DOWN &amp;&amp; GetId() != 0)
{
GetOwner()-&gt;PostMessage(WM_COMMAND, GetId(), reinterpret_cast&lt;LPARAM&gt;(this));
}
}
void CSkinImageView::HandleLButtonDown(CPoint point, BOOL&amp; bHandle)
{
if(IsClickAble())
{
SetState(VS_PRESS_DOWN);
bHandle = TRUE;
}
}</code></pre>
<h2>请看下面的示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/3/4/1.png" alt="图片框" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_CONTROL_SHOW4&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;SkinImageView LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; Image=&quot;Image.png&quot; AlignParentLeft=&quot;20&quot; AlignParentVerticalCenter=&quot;-50&quot;/&gt;
&lt;SkinTextView LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; AlignParentLeft=&quot;5&quot; AlignParentVerticalCenter=&quot;-15&quot; Text=&quot;不可点击的图片&quot; /&gt;
&lt;SkinImageView Id=&quot;101&quot; LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; Image=&quot;Image.png&quot; AlignParentLeft=&quot;20&quot; AlignParentVerticalCenter=&quot;50&quot; ClickAble=&quot;true&quot;/&gt;
&lt;SkinTextView LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; AlignParentLeft=&quot;5&quot; AlignParentVerticalCenter=&quot;85&quot; Text=&quot;可以点击的图片&quot; /&gt;
&lt;SkinImageView LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; Image=&quot;Image.gif&quot; AutoPlay=&quot;true&quot; AlignParentHorizontalCenter=&quot;0&quot; AlignParentVerticalCenter=&quot;0&quot;/&gt;
&lt;SkinImageViewEx LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; Image=&quot;MultiImage.png&quot; TotalFrame=&quot;17&quot; AutoPlay=&quot;true&quot; AlignParentRight=&quot;20&quot; AlignParentVerticalCenter=&quot;0&quot;/&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>h文件</h4>
<pre><code class="language-cpp">#pragma once
class CImageViewDialog : public CSkinDialog
{
public:
enum
{
IDC_IMAGEVIEW = 101,
};
public:
CImageViewDialog(const tstring&amp; strXml);
public:
virtual void OnInitDialog();
protected:
void OnImageViewClicked(UINT uNotifyCode, int nID, CSkinView* pView);
SKINUI_DECLARE_MESSAGE_MAP()
};</code></pre>
<h4>cpp文件</h4>
<pre><code class="language-cpp">#include &quot;stdafx.h&quot;
#include &quot;ImageViewDialog.h&quot;
SKINUI_BEGIN_MESSAGE_MAP(CImageViewDialog, CSkinDialog)
ON_SKINUI_COMMAND(IDC_IMAGEVIEW, OnImageViewClicked)
SKINUI_END_MESSAGE_MAP()
CImageViewDialog::CImageViewDialog(const tstring&amp; strXml)
: CSkinDialog(strXml)
{
}
void CImageViewDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
}
void CImageViewDialog::OnImageViewClicked(UINT uNotifyCode, int nID, CSkinView* pView)
{
MsgBox(SkinUI::StringFormat(_T(&quot;OnImageViewClicked，Id=%d！&quot;), nID));
}</code></pre>