5 第二组UI组件：文本、超链、线条和图片框

2017-01-09 本文已影响135人吴忠亮

官方网站：http://www.skinui.cn
下载地址：http://pan.baidu.com/s/1slKsMGt

5.1 文本

文本由CSkinTextView类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。

文本

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW1" Animation="SizeChange" EscCloseDialog="true">
    <SkinTextView Id="1" FontColor="ID_COLOR_TEXT" Text="IDS_CONTROL_SHOW_TEXT1" AlignParentLeft="30" AlignParentRight="30" AlignParentTop="45" LayoutHeight="24" FontStyle="ID_FONT_NORMAL"/>
    <SkinTextView Id="1" FontColor="ID_COLOR_TEXT" Text="IDS_CONTROL_SHOW_TEXT2" AlignParentLeft="30" AlignParentTop="100" AlignParentRight="30" LayoutHeight="72" FontStyle="ID_FONT_NORMAL" MultiLine="true"/>
    <SkinTextView Id="1" FontColor="ID_COLOR_RED" Text="IDS_CONTROL_SHOW_TEXT3" AlignParentLeft="30" AlignParentTop="200" LayoutHeight="72" LayoutWidth="275" FontStyle="ID_FONT_NORMAL" MultiLine="true"/>
</SkinDialog>

下面是CSkinTextView类特有的XML属性和相关方法：

5.1.1设置文本是单行还是多行

通过XML属性控制如下：

MultiLine="true"

通过C++程序代码调用方法控制如下：

void SetMultiLine(BOOL bMultiLine);

5.1.2设置文本颜色

通过XML属性控制如下：

FontColor="ID_COLOR_RED"

通过C++程序代码调用方法控制如下：

void SetFontColor(const tstring& strFontColor);

5.1.3设置文本字体

通过XML属性控制如下：

FontStyle="ID_FONT_NORMAL"

通过C++程序代码调用方法控制如下：

void SetFontStyle(const tstring& strFontStyle);

5.1.4设置文本水平对齐方式

通过XML属性控制如下：

HorzAlignment="Left"

通过C++程序代码调用方法控制如下：

void SetHorzAlignment(StringAlignment alignment);

5.1.5设置文本垂直对齐方式

通过XML属性控制如下：

VertAlignment="Center"

通过C++程序代码调用方法控制如下：

void SetVertAlignment(StringAlignment alignment);

5.1.6单行文本太长时，自动在结尾处加“...”

通过XML属性控制如下：

AutoLayout="true"

通过C++程序代码调用方法控制如下：

void SetAutoLayout(BOOL bAutoLayout);

5.2 超链

文本由CSkinHyperlink类来代表，继承于CSkinTextView，支持CSkinTextView的所有属性和方法。

超链

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW3" Animation="SizeChange">
    <SkinHyperlink LayoutWidth="WrapContent" LayoutHeight="30" Text="IDS_CONTROL_SHOW_TEXT4" AlignParentHorizontalCenter="0" AlignParentTop="50"/>
    <SkinHyperlink LayoutWidth="120" LayoutHeight="30" Text="IDS_CONTROL_SHOW_TEXT5" AlignParentHorizontalCenter="0" AlignParentTop="125"/>
    <SkinHyperlink LayoutWidth="WrapContent" LayoutHeight="30" Text="IDS_CONTROL_SHOW_TEXT6" URL="www.baidu.com" AlignParentHorizontalCenter="0" AlignParentTop="200"/>
</SkinDialog>

下面是CSkinHyperlink类特有的XML属性和相关方法：

5.1.1设置超链激活状态的字体

通过XML属性控制如下：

HotFontStyle="ID_FONT_HYPERLINK"

通过C++程序代码调用方法控制如下：

void SetHotFontStyle(const tstring& strFontStyle);

5.1.2设置超链激活状态字体的颜色

通过XML属性控制如下：

HotFontColor="ID_COLOR_HYPERLINK"

通过C++程序代码调用方法控制如下：

void SetHotFontColor(const tstring& strFontColor);

5.1.2设置超链的链接URL

通过XML属性控制如下：

URL="www.baidu.com"

通过C++程序代码调用方法控制如下：

void SetUrl(const tstring& strUrl);

单击超链时，如果超链是URL，则直接用系统默认浏览器打开这个URL；否则，给超链所在窗口发送WM_COMMAND消息。

5.3 线条

文本由CSkinLine类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。

线条

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW16" Animation="SizeChange">
    <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="100" Color="ID_COLOR_DEFAULT12"/>
    <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="150" Color="ID_COLOR_DEFAULT12"/>
    <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="151" Color="ID_COLOR_DEFAULT12"/>
    <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="200" Color="ID_COLOR_DEFAULT12"/>
    <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="201" Color="ID_COLOR_DEFAULT12"/>
    <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="202" Color="ID_COLOR_DEFAULT12"/>
</SkinDialog>

下面是CSkinLine类常用的XML属性和相关方法：

5.3.1设置线条风格

通过XML属性控制如下：

DashStyle="Solid"

通过C++程序代码调用方法控制如下：

void SetDashStyle(DashStyle dashStyle);

5.3.2设置线条颜色

通过XML属性控制如下：

Color="ID_COLOR_RED"

通过C++程序代码调用方法控制如下：

void SetColor(const tstring& strColor);

5.3.3设置颜色渐变线条开始颜色

通过XML属性控制如下：

StartColor="ID_COLOR_BLACK"

通过C++程序代码调用方法控制如下：

void SetStartColor(const tstring& strColor);

5.3.4设置颜色渐变线条结束颜色

通过XML属性控制如下：

EndColor="ID_COLOR_WHITE"

通过C++程序代码调用方法控制如下：

void SetEndColor(const tstring& strColor);

5.4 图片框

图片框分为显示单帧图片的普通图片框和显示多帧图片的加强图片框。图片内容可以加载资源文件，也可以加载保存在硬盘任意位置的图片。

5.4.1普通图片框

普通图片框由CSkinImageView类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。
CSkinImageView可以显示普通静态图片，也可以显示Gif动画图片。

普通图片

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW6" Animation="SizeChange">
    <SkinImageView LayoutWidth="WrapContent" LayoutHeight="WrapContent" Image="Image.png" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0"/>
</SkinDialog>

Gif动画图片

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW7" Animation="SizeChange">
    <SkinImageView Id="1" LayoutWidth="WrapContent" LayoutHeight="WrapContent" Image="Image.gif" AutoPlay="true" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0"/>
</SkinDialog>

下面是CSkinImageView类特有的XML属性和相关方法：

5.4.1.1设置图片框显示的Gif动画是否需要自动播放

通过XML属性控制如下：

AutoPlay="true"

通过C++程序代码调用方法控制如下：

void SetAutoPlay(BOOL bAutoPlay);

如果图片框设置为自动播放，则Gif动画会在初始化完成之后自动播放。

5.4.1.2设置图片框是否可以点击

通过XML属性控制如下：

ClickAble="true"

通过C++程序代码调用方法控制如下：

void SetClickAble(BOOL bClickAble);

如果图片框设置为可点击，单击图片框时，SkinUI会给图片框所在窗口发送WM_COMMAND消息。

5.4.1.3设置图片框显示资源图片

通过XML属性控制如下：

Image="Finish.png"

通过C++程序代码调用方法控制如下：

virtual void SetImage(const tstring& strImage);

5.4.1.4设置图片框显示保存在硬盘任意位置的图片

无法通过XML属性控制
通过C++程序代码调用方法控制如下：

virtual void LoadImage(const tstring& strImage);

5.4.2加强图片框

加强图片框由CSkinImageViewEx类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。
CSkinImageViewEx用来显示将动画的多帧从左到右依次排列的多帧动画图片资源。

加强图片框

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW8" Animation="SizeChange">
    <SkinImageViewEx Id="1" LayoutWidth="WrapContent" LayoutHeight="WrapContent" Image="MultiImage.png" TotalFrame="17" AutoPlay="true" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0"/>
</SkinDialog>

下面是CSkinImageViewEx类特有的XML属性和相关方法：

5.3.2.1设置图片框显示的多帧动画图片是否需要自动播放

通过XML属性控制如下：

AutoPlay="true"

通过C++程序代码调用方法控制如下：

void SetAutoPlay(BOOL bAutoPlay);

如果图片框设置为自动播放，则多帧动画图片会在初始化完成之后自动播放。

5.4.2.2设置图片框是否可以点击

通过XML属性控制如下：

ClickAble="true"

通过C++程序代码调用方法控制如下：

void SetClickAble(BOOL bClickAble);

如果图片框设置为可点击，单击图片框时，SkinUI会给图片框所在窗口发送WM_COMMAND消息。

5.4.2.3设置图片框显示资源图片

通过XML属性控制如下：

Image="Loading.png"

通过C++程序代码调用方法控制如下：

virtual void SetImage(const tstring& strImage);

5.4.2.4设置图片播放下一帧的时间间隔

通过XML属性控制如下：

Elapse="50"

通过C++程序代码调用方法控制如下：

void SetElapse(LONG nInterval);

5 第二组UI组件：文本、超链、线条和图片框

5.1 文本

5.1.1设置文本是单行还是多行

5.1.2设置文本颜色

5.1.3设置文本字体

5.1.4设置文本水平对齐方式

5.1.5设置文本垂直对齐方式

5.1.6单行文本太长时，自动在结尾处加“...”

5.2 超链

5.1.1设置超链激活状态的字体

5.1.2设置超链激活状态字体的颜色

5.1.2设置超链的链接URL

5.3 线条

5.3.1设置线条风格

5.3.2设置线条颜色

5.3.3设置颜色渐变线条开始颜色

5.3.4设置颜色渐变线条结束颜色

5.4 图片框

5.4.1普通图片框

5.4.1.1设置图片框显示的Gif动画是否需要自动播放

5.4.1.2设置图片框是否可以点击

5.4.1.3设置图片框显示资源图片

5.4.1.4设置图片框显示保存在硬盘任意位置的图片

5.4.2加强图片框

5.3.2.1设置图片框显示的多帧动画图片是否需要自动播放

5.4.2.2设置图片框是否可以点击

5.4.2.3设置图片框显示资源图片

5.4.2.4设置图片播放下一帧的时间间隔

猜你喜欢

热点阅读