SkinUI入门教程（三） SkinUI视图组件和界面编程

官方网站：http://www.skinui.cn
下载地址：http://pan.baidu.com/s/1slKsMGt
所有的组件都提供了两种方式来控制组件的行为。

在XML布局中通过XML属性进行控制
在C++程序代码中通过调用方法进行控制
SkinUI推荐使用XML布局文件，而不是C++代码来定义用户界面。实际上，不管使用哪种方式，它们控制SkinUI用户界面行为的本质是一样的。大部分时候，控制UI组件的XML属性都有对应的方法。

3.1 视图组件（CSkinView）

CSkinView是所有UI组件的基类，包含的XML属性和方法所有UI组件都可以使用。

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

3.1.1设置组件 Id

通过XML属性控制如下：

Id="1001"

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

virtual void SetId(LONG nId);

3.1.2设置组件文本

通过XML属性控制如下：

Text="IDS_OK"

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

virtual void SetText(const tstring& strText);

3.1.3设置组件简单提示信息

通过XML属性控制如下：

Tips="IDS_CLOSE_TIPS"

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

virtual void SetTips(const tstring& strTips);

3.1.4设置组件复杂提示信息

通过XML属性控制如下：

SkinTips="SkinTips.xml"

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

virtual void SetSkinTipsLayout(const tstring& strLayout);

3.1.5设置组件复杂提示信息的偏移量

通过XML属性控制如下：

SkinTipsOffset="-10,-10"

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

virtual void SetSkinTipsOffset(const CPoint& point);

3.1.6设置组件是否可见

通过XML属性控制如下：

Visible="false"

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

virtual void SetVisible(BOOL bVisible);

3.1.7设置组件是否可用

通过XML属性控制如下：

Enable="false"

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

virtual void SetEnable(BOOL bEnabled);

3.1.8设置组件是否获得焦点

通过XML属性控制如下：

Focused="true"

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

virtual void SetFocus(BOOL bFocus);

3.1.9设置组件前景图像

通过XML属性控制如下：

Image="CheckBox.png"

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

virtual void SetImage(const tstring& strImage);

3.1.10设置组件前景颜色

通过XML属性控制如下：

Color="ID_COLOR_RED"

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

virtual void SetColor(const tstring& strColor);

3.1.11设置组件边框颜色

通过XML属性控制如下：

Border="ID_COLOR_BORDER"

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

virtual void SetBorderColor(const tstring& strColor);

3.1.12设置组件背景图片

通过XML属性控制如下：

BkgImage="bkg.png"

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

virtual void SetBkgImage(const tstring& strImage);

3.1.13设置组件背景颜色

通过XML属性控制如下：

BkgColor="ID_COLOR_BKG"

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

virtual void SetBkgColor(const tstring& strColor);

3.1.14设置组件菜单

通过XML属性控制如下：

Menu="EditMenu.xml"

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

virtual void SetMenu(const tstring& strMenu);

3.1.15设置组件最大宽度

通过XML属性控制如下：

MaxWidth="800"

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

virtual void SetMaxWidth(LONG nMaxWidth);

3.1.16设置组件最大高度

通过XML属性控制如下：

MaxHeight="600"

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

virtual void SetMaxHeight(LONG nMaxHeight);

3.1.19设置组件模式

通过XML属性控制如下：

Mode="1"

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

virtual void SetMode(LONG nMode);

3.1.20设置组件接受的拖放类型

通过XML属性控制如下：

Drag="File"

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

virtual void SetDrag(const vector<UINT>& vecDrag);

3.1.21设置组件是否允许被拖动

通过XML属性控制如下：

AllowDrag="true"

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

virtual void SetAllowDrag(BOOL bAllow);

3.1.22设置组件外边距

通过XML属性控制如下：

Margin="5,5,5,5"

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

virtual void SetLayoutMargin(LayoutMargin layoutMargin);

3.1.23设置组件光标

通过XML属性控制如下：

Cursor="32513"

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

virtual void SetCursor(LONG nCursor);

3.1.24设置组件重绘时是否需要重绘整个窗口

通过XML属性控制如下：

RedrawOwner="true"

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

virtual void SetRedrawOwner(BOOL bRedrawOwner);

3.1.25设置组件重绘时是否需要重绘父组件

通过XML属性控制如下：

RedrawParent="true"

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

virtual void SetRedrawParent(BOOL bRedrawParent);

3.1.26设置该组件的子组件重绘时是否需要重绘该组件

通过XML属性控制如下：

RedrawAllChild="true"

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

virtual void SetRedrawAllChild(BOOL bRedrawAllChild);

3.1.27设置组件的布局XML文件

通过XML属性控制如下：

Layout="Button.xml"

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

virtual void SetLayout(const tstring& strLayout);

3.1.28设置组件布局宽度

通过XML属性控制如下：

LayoutWidth="WrapContent"

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

virtual void SetLayoutWidth(LONG nLayoutWidth);

3.1.29设置组件布局高度

通过XML属性控制如下：

LayoutHeight="FillParent"

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

virtual void SetLayoutHeight(LONG nLayoutHeight);

3.1.30设置组件相对于父组件的对齐方式

通过XML属性控制如下：

LayoutAlignment="Left,Top"

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

virtual void SetLayoutAlignment(LayoutAlignment layoutAlignment);

3.1.31设置组件右边距兄弟组件左边的距离

通过XML属性控制如下：

ToLeftOf="1001,10"

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

virtual void SetLayoutToLeftOf(LONG nId, LONG nOffset);

3.1.32设置组件下边距兄弟组件上边的距离

通过XML属性控制如下：

ToTopOf="1001,10"

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

virtual void SetLayoutToTopOf(LONG nId, LONG nOffset);

3.1.33设置组件左边距兄弟组件右边的距离

通过XML属性控制如下：

ToRightOf="1001,10"

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

virtual void SetLayoutToRightOf(LONG nId, LONG nOffset);

3.1.34设置组件上边距兄弟组件下边的距离

通过XML属性控制如下：

ToBottomOf="1001,10"

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

virtual void SetLayoutToBottomOf(LONG nId, LONG nOffset);

3.1.35设置组件左边距兄弟组件左边的距离

通过XML属性控制如下：

AlignLeftOf="1001,10"

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

virtual void SetLayoutAlignLeftOf(LONG nId, LONG nOffset);

3.1.36设置组件上边距兄弟组件上边的距离

通过XML属性控制如下：

AlignTopOf="1001,10"

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

virtual void SetLayoutAlignTopOf(LONG nId, LONG nOffset);

3.1.37设置组件右边距兄弟组件右边的距离

通过XML属性控制如下：

AlignRightOf="1001,10"

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

virtual void SetLayoutAlignRightOf(LONG nId, LONG nOffset);

3.1.38设置组件下边距兄弟组件下边的距离

通过XML属性控制如下：

AlignBottomOf="1001,10"

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

virtual void SetLayoutAlignBottomOf(LONG nId, LONG nOffset);

3.1.39设置组件左边距父组件左边的距离

通过XML属性控制如下：

AlignParentLeft="1001,10"

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

virtual void SetLayoutAlignParentLeft(LONG nOffset);

3.1.40设置组件上边距父组件上边的距离

通过XML属性控制如下：

AlignParentTop="1001,10"

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

virtual void SetLayoutAlignParentTop(LONG nOffset);

3.1.41设置组件右边距父组件右边的距离

通过XML属性控制如下：

AlignParentRight="1001,10"

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

virtual void SetLayoutAlignParentRight(LONG nOffset);

3.1.42设置组件下边距父组件下边的距离

通过XML属性控制如下：

AlignParentBottom="1001,10"

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

virtual void SetLayoutAlignParentBottom(LONG nOffset);

3.1.43设置组件中心与父组件中心水平方向的距离

通过XML属性控制如下：

AlignParentHorizontalCenter="10"

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

virtual void SetLayoutAlignParentHorizontalCenter(LONG nOffset);

3.1.44设置组件中心与父组件中心垂直方向的距离

通过XML属性控制如下：

AlignParentVerticalCenter="10"

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

virtual void SetLayoutAlignParentVerticalCenter(LONG nOffset);

3.2 对话框组件（CSkinDialog）

对于CSkinDialog类而言，它是所有对话框的基类，因此包含的XML属性和方法是所有对话框都可以使用。

下面是CSkinDialog类常用的XML属性、相关方法及简要说明：

3.2.1设置对话框是否可以改变大小

通过XML属性控制如下：

Resize="true"

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

void SetResize(BOOL bResize);

3.2.2设置对话框是否可以移动

通过XML属性控制如下：

AllowMove="false"

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

void SetAllowMove(BOOL bAllow);

3.2.3设置对话框最小宽度

通过XML属性控制如下：

MinWidth="400"

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

void SetMinWidth(LONG nMinWidth);

3.2.4设置对话框最小高度

通过XML属性控制如下：

MinHeight="300"

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

void SetMinHeight(LONG nMinHeight);

3.2.5设置对话框默认宽度

通过XML属性控制如下：

DefaultWidth="400"

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

void SetDefaultWidth(LONG nDefaultWidth);

3.2.6设置对话框默认高度

通过XML属性控制如下：

DefaultHeight="300"

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

void SetDefaultHeight(LONG nDefaultHeight);

3.2.7设置对话框标题栏高度

通过XML属性控制如下：

TitleHeight="400"

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

void SetTitleHeight(LONG nTitleHeight);

3.2.8设置对话框主题高度

通过XML属性控制如下：

ThemeHeight="300"

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

void SetThemeHeight(LONG nThemeHeight);

3.2.9设置对话框标题

通过XML属性控制如下：

Caption="400"

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

void SetTitleCaption(const tstring& strCaption);

3.2.10设置对话框系统按钮

通过XML属性控制如下：

SysButton="300"

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

void SetSysButton(const tstring& strSysStyle);

3.1.11设置对话框是否允许毛玻璃效果

通过XML属性控制如下：

OpenAreo="false"

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

void OpenAreo(BOOL bOpen);

3.1.12设置对话框图标

通过XML属性控制如下：

Icon="128"

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

void SetTitleIcon(LONG nIconId);

3.2 界面编程

3.2.1 使用XML布局文件

SkinUI推荐使用XML布局文件来控制视图，这样不仅简单明了，而且可以将应用的视图控制逻辑从C++代码中分离出来，放入XML文件中控制，从而更好的体现逻辑与界面分离的原则。

在SkinUI应用的bin\debug\res\HelloWorld\layout\目录下定义一个文件名为【SkinDialog.xml】的布局文件。布局文件的格式如下：

<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"/>
</SkinDialog>

C++代码可以通过以下方式使用该布局文件：

作为模态对话框的布局文件

CSkinDialog dlg(_T("SkinDialog.xml"));
dlg.DoModal(m_hWnd);

作为非模态对话框的布局文件

CSkinDialog* pSkinDialog = new CSkinDialog(_T("SkinDialog.xml"));
if(pSkinDialog)
{
if(!pSkinDialog->Create())
{
delete pSkinDialog;
}
else
{
pSkinDialog->ShowWindow(SW_SHOW);
}
}

3.2.2 使用C++代码

虽然SkinUI推荐使用XML布局文件来控制UI界面，但是如果开发者愿意，SkinUI允许开发者完全抛弃XML布局文件，完全在C++代码中控制UI界面。如果希望在代码中控制UI界面，那么所有的UI组件都将通过new关键字创建出来，然后以合适的方式搭建在一起即可。

头文件

class CMainDialog : public CSkinDialog
{
public:
CMainDialog();
public:
virtual void OnInitDialog();
};

源文件

#include "stdafx.h"
#include "MainDialog.h"
CMainDialog::CMainDialog()
: CSkinDialog(_T("MainDialog.xml"))
{
}
void CMainDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
CSkinTextView* pTextView = new CSkinTextView(this);
if(pTextView)
{
pTextView->SetId(1);
pTextView->SetFontColor(_T("ID_COLOR_TEXT"));
pTextView->SetText(_T("IDS_CONTROL_SHOW_TEXT1"));
pTextView->SetLayoutAlignParentLeft(30);
pTextView->SetLayoutAlignParentRight(30);
pTextView->SetLayoutAlignParentTop(45);
pTextView->SetLayoutHeight(24);
pTextView->SetFontStyle(_T("ID_FONT_NORMAL"));
}
}

3.2.3 XML布局文件和C++代码混合

完全使用C++代码来控制UI界面不仅繁琐，而且不利于解耦。而完全使用XML布局文件来控制UI界面虽然方便、便捷，但难免有失灵活。因此，有些时候可能需要混合使用XML布局文件和代码来控制UI界面。

当混合使用XML布局文件和代码来控制UI界面时，习惯上把变化小、行为比较固定的组件放在XML布局文件中管理，而那些控制比较复杂的组件则交给C++代码来管理。

例如下面的应用，我们先在布局文件中定义一个简单的树控件，该布局文件的代码如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW12" Animation="SizeChange">
<SkinRelativeLayout AlignParentLeft="15" AlignParentRight="15" AlignParentTop="35" AlignParentBottom="15" BkgColor="ID_COLOR_WHITE" Border="ID_COLOR_LINE">
<SkinTreeView Id="101" AlignParentLeft="1" AlignParentRight="1" AlignParentTop="1" AlignParentBottom="1" VScrollBar="VScrollBar.xml">
</SkinTreeView>
</SkinRelativeLayout>
</SkinDialog>

上面的布局文件只是定义了一个简单的树控件。接下来我们会在程序中获取该树控件，并往该树控件添加子节点。下面是代码：

void CTreeDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
CSkinTreeView* pTreeView = static_cast<CSkinTreeView*>(GetChildById(IDC_TREEVIEW));
if(pTreeView)
{
for(int64 i = 0; i < 10; ++i)
{
CSkinTreeItem* pRootItem = new CSkinTreeItem(pTreeView);
if(pRootItem)
{
pRootItem->SetLayoutHeight(30);
pRootItem->SetLayout(_T("TreeItem.xml"));
pRootItem->SetImage(_T("ListItem.png"));
pTreeView->InsertItem(NULL, pRootItem);

for(int64 j = 0; j < 10; ++j)
{
CSkinTreeItem* pTreeItem = new CSkinTreeItem(pTreeView);
if(pTreeItem)
{
pTreeItem->SetLayoutHeight(30);
pTreeItem->SetLayout(_T("TreeItem.xml"));
pTreeItem->SetImage(_T("ListItem.png"));
pTreeView->InsertItem(pRootItem, pTreeItem);
}
}
}
}
pTreeView->ResetSortedItem();
}
}

以上XML布局文件和C++代码混合，得到的窗口界面截图如下：



XML布局文件和C++代码混合