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

来源：互联网发布：matlab 矩阵矢量化编辑：程序博客网时间：2024/05/27 20:52

官方网站：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++代码混合

阅读全文

0 0

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

3.1 视图组件（CSkinView）

3.1.1设置组件 Id

3.1.2设置组件文本

3.1.3设置组件简单提示信息

3.1.4设置组件复杂提示信息

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

3.1.6设置组件是否可见

3.1.7设置组件是否可用

3.1.8设置组件是否获得焦点

3.1.9设置组件前景图像

3.1.10设置组件前景颜色

3.1.11设置组件边框颜色

3.1.12设置组件背景图片

3.1.13设置组件背景颜色

3.1.14设置组件菜单

3.1.15设置组件最大宽度

3.1.16设置组件最大高度

3.1.19设置组件模式

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

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

3.1.22设置组件外边距

3.1.23设置组件光标

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

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

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

3.1.27设置组件的布局XML文件

3.1.28设置组件布局宽度

3.1.29设置组件布局高度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2 对话框组件（CSkinDialog）

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

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

3.2.3设置对话框最小宽度

3.2.4设置对话框最小高度

3.2.5设置对话框默认宽度

3.2.6设置对话框默认高度

3.2.7设置对话框标题栏高度

3.2.8设置对话框主题高度

3.2.9设置对话框标题

3.2.10设置对话框系统按钮

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

3.1.12设置对话框图标

3.2 界面编程

3.2.1 使用XML布局文件

3.2.2 使用C++代码

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