65.9K
CodeProject 正在变化。 阅读更多。
Home

漂亮的自定义控件库

Tarmo Kalda
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.77/5 (21投票s)

2007年3月28日

CPOL

7分钟阅读

viewsIcon

166116

downloadIcon

2347

自定义控件库为您提供了一组不同的自定义控件和 API 函数。

引言

自定义控件库为您提供了一组不同的自定义控件和 API 函数。

Nice Custom Controls

特点

  • 用于 MFC 应用程序的 MFC 包装类
  • 用于 WTL 应用程序的 WTL 包装类
  • 工具提示
  • 颜色方案（可自定义文本和背景颜色）
  • 通知掩码
  • 自定义绘制
  • 炫酷主题 API
  • 炫酷图形 API

自定义控件库中包含的独立自定义控件

炫酷组合框 (Nice ComboBox) 组合框控件是一种复合控件，包含一个项目列表，用户可以从中选择。
炫酷直方图控件 (Nice Histogram control) 直方图是一种显示统计图表的控件窗口。
炫酷热键控件 (Nice Hot Key control) 热键控件是一个窗口，允许用户输入一个按键组合作为热键。
炫酷超链接控件 (Nice Hyperlink control) 超链接控件将文本显示为超链接（类似于网页浏览器中的链接）。
炫酷 IP 地址查找 (Nice Lookup IP Address) IP 地址查找控件是一种复合控件，允许您浏览、输入、查看和编辑互联网协议 (IP) 地址格式的地址。
炫酷信息栏控件 (Nice Infobar control) 信息栏控件是一种允许您通过文本和图像显示应用程序特定信息的控件。
炫酷 IP 地址控件 (Nice IP Address control) IP 地址控件是一种允许您输入、查看和编辑互联网协议 (IP) 地址格式的地址的控件。
炫酷列表框控件 (Nice ListBox control) 列表框是一种控件窗口，包含一个项目列表，用户可以从中选择。
炫酷边栏控件 (Nice Outbar control) 边栏控件充当子窗口的容器，就像在 Microsoft® Outlook 中看到的那样。
炫酷页面控件 (Nice Page control) 页面控件提供了一种方便的方式以多页格式呈现信息。
炫酷滚动条 (Nice Scrollbar) 滚动条控件是一种允许您将滚动条的值转换为其他组件的可视内容的控件。
炫酷表单标签页控件 (Nice SheetTab control) 表单标签页控件提供了在框架窗口中轻松切换不同视图的功能。
炫酷静态控件 (Nice Static control) 静态控件是一种不可编辑的控件，包含标识控件或提供有关控件的附加信息的文本或图形。
炫酷切换栏控件 (Nice SwitchBar control) 切换栏控件是一种允许您在不同源之间切换的控件。
炫酷开关 (Nice Toggle) 开关控件是一种保持选中状态的控件。
炫酷工具提示控件 (Nice Tooltip control) 工具提示控件是一个小型弹出窗口，其中包含描述工具的文本和图像。

实现细节

自定义控件

所有自定义控件都是从头开始编写的。

使用自定义控件库

集成到您的项目中

要将炫酷自定义控件库集成到您的程序中，您必须在源文件中包含 cuctrl.h 并链接 cuctrl.lib 库。
对于 MFC 应用程序，您必须在源文件中包含 cuctrl.hpp 并链接 nicefc.lib 库。
对于 WTL 应用程序，只需在源文件中包含 atlnicectrls.h 并链接 cuctrl.lib 库。

Visual Studio 2005 的链接示例（Debug Unicode）

Linking in VS2005

Visual Studio 6 的链接示例（Debug Unicode）

Linking in VS6

库命名约定

此发行版中包含的 DLL 和库遵循结构化的命名约定。这使得更容易知道您应该为哪个目的使用哪个 DLL 或库。
构建使用这些 DLL 的应用程序或扩展 DLL 所需的导入库具有与 DLL 相同的基本名称，但文件名扩展名为 .lib。

DLL 和库名称的格式如下：

CuCtrl[d|][u|].lib (dll)

其中字母是说明符的占位符，其含义如下表所示：

库/DLL 名称 构建 字符集
CuCtrl Release Ansi
CuCtrld Debug (调试) Ansi
CuCtrlu Release Unicode (Unicode)
CuCtrldu Debug (调试) Unicode (Unicode)

使用自定义控件

您可以通过调用 CreateWindowEx 函数来创建炫酷自定义控件，并指定适当的 WC_NICE* 窗口类。此窗口类在加载自定义控件动态链接库 (DLL) 时注册。为确保 DLL 被加载，请使用 CuCtrl_InitControls 函数。
您可以向炫酷自定义控件发送消息来影响控件的外观和行为。每条消息都有一个相应的宏，您可以使用它而不是显式发送消息。

以下示例创建了切换栏自定义控件。

Win32 应用程序

以下函数创建切换栏控件并添加按钮

HWND WINAPI CreateControl(HWND hWndParent, HINSTANCE hInst)
{
    SWBUTTON    swb;
    HWND        hWndSwb;
    
    hWndSwb = CreateWindow(
                WC_SWITCHBAR, "",
                WS_CHILD | WS_CLIPSIBLINGS | WS_VISIBLE |
                SWS_RIGHTNAVBUTTONS | SWS_LISTBUTTON | SWS_LISTDIALOG | SWS_TOOLTIPS, 
                0, 0, 120, 18, 
                hWndParent, NULL, hInst, NULL);


    if (hWndSwb == NULL)
        return NULL; 

    swb.uiMask = SWIF_TEXT | SWIF_IMAGE | SWIF_ID;
    swb.lpszText = TEXT("Item number 1");
    swb.iImage = 0;
    swb.uiId   = 1000;
    
    SwitchBar_AddButton(hWndSwb, &swb);


    swb.lpszText = TEXT("Item number 2");
    swb.iImage = 1;
    swb.uiId   = 1001;
    
    SwitchBar_AddButton(hWndSwb, &swb);

    return hWndSwb; 
}

对话框模板

另一种方法是在对话框模板中创建切换栏自定义控件，在这种情况下，使用的是 Microsoft Visual Studio 6。

  1. 从工具箱中选择自定义控件工具

    MS Visual Studio Toolbox

  2. 将其拖放到对话框上

    MS Visual Studio Dialog

  3. 编辑属性

    Caption 文本不被切换栏控件使用。
    将 Class 设置为 "NiceSwitchBar32"，以便窗口可以创建切换栏控件。
    根据需要，使用 WS_、SWS_* 和 WS_EX_* 值填充 Style 和 ExStyle。

    MS Visual Studio Properties

  4. 结果是带有切换栏控件的对话框

    Dialog with switchbar controls

使用自定义控件库提供的 API 函数

自定义控件库实现了一组您可以使用的 API 函数。以下部分描述了一些最实用的函数。

  1. CuCtrl_InitControls

    注册给定的自定义控件类并确保 cuctrl.dll 已加载。

  2. NiceGraphics_GetCharDimensions 和 NiceGraphics_GetCharsInWidth

    这些函数用于计算平均 char 尺寸以及将在给定宽度内容纳的字符数。

使用炫酷主题 API

使用炫酷主题 API，您可以为应用程序添加视觉样式。炫酷主题资源位于 *.ntr 文件（ntr - nice theme resource）或 *.njr 文件（njr - nice join theme resource）中。.ntr 和 .njr 文件是常规 DLL，其中包含用于炫酷主题引擎的位图和数据。炫酷主题引擎将联合主题资源添加到炫酷主题资源中，因此您可以为现有炫酷主题资源创建自己的主题资源。

炫酷主题 API 还提供了注册和注销用于通用用途和特定应用程序用途的炫酷主题资源的功能。

Dialog with switchbar controls
  1. 以下 XML 文件内容描述了列表框的视觉主题。
    <class name="listbox">
    <parts items="2">
        <part name="Common" index="0">
            <property name="BackgroundType" value="BorderFill" />
            <property name="FillColor" value="RGB(0, 254, 254)" />
            <property name="BorderColor" value="RGB(255, 171, 63)" />
            <property name="BorderSize" value="1" />
            <property name="MinSize" value="5, 5" />

            <themetext>
                <property name="TextColor" value="RGB(0, 0, 0)" />
            </themetext>

            <states items="5">
                <state name="Active" index="0">
                </state>
                <state name="ActiveHot" index="1">
                </state>
                <state name="Inactive" index="2">
                    <property name="FillColor" value="RGB(240, 240, 240)" />
                </state>
                <state name="InactiveHot" index="3">
                    <property name="FillColor" value="RGB(240, 240, 240)" />
                </state>
                <state name="Disabled" index="4">
                    <themetext>
                        <property name="TextColor" value="RGB(161, 161, 146)" />
                    </themetext>
                </state>
            </states>
        </part>

        <part name="List" index="1">
            <property name="FillColor" value="RGB(255, 255, 255)" />
            <property name="BorderColor" value="RGB(0, 60, 116)" />
            <property name="BackgroundType" value="ContentFill" />

            <themetext>
                <property name="TextColor" value="RGB(0, 0, 0)" />
            </themetext>

            <gradients items="4">
                <gradient name="Selected" items="3" index="0">
                    <gradientitem index="0">
                        <property name="StartColor" value="RGB(224, 224, 191)" />
                        <property name="EndColor" value="RGB(212, 212, 43)" />
                        <property name="Ratio" value="45" />
                    </gradientitem>
                    <gradientitem index="1">
                        <property name="StartColor" value="RGB(212, 212, 43)" />
                        <property name="EndColor" value="RGB(212, 212, 43)" />
                        <property name="Ratio" value="10" />
                    </gradientitem>
                    <gradientitem index="2">
                        <property name="StartColor" value="RGB(212, 212, 43)" />
                        <property name="EndColor" value="RGB(248, 248, 8)" />
                        <property name="Ratio" value="45" />
                    </gradientitem>
                </gradient>
                <gradient name="Selected" items="2" index="1">
                    <gradientitem index="0">
                        <property name="StartColor" value="RGB(255, 254, 226)" />
                        <property name="EndColor" value="RGB(255, 223, 124)" />
                        <property name="Ratio" value="38" />
                    </gradientitem>
                    <gradientitem index="1">
                        <property name="StartColor" value="RGB(255, 214, 96)" />
                        <property name="EndColor" value="RGB(255, 234, 169)" />
                        <property name="Ratio" value="62" />
                    </gradientitem>
                </gradient>
                <gradient name="Selected" items="2" index="2">
                    <gradientitem index="0">
                        <property name="StartColor" value="RGB(255, 217, 170)" />
                        <property name="EndColor" value="RGB(255, 187, 110)" />
                        <property name="Ratio" value="40" />
                    </gradientitem>
                    <gradientitem index="1">
                        <property name="StartColor" value="RGB(255, 171, 63)" />
                        <property name="EndColor" value="RGB(254, 225, 122)" />
                        <property name="Ratio" value="60" />
                    </gradientitem>
                </gradient>
                <gradient name="SelectedInactive" items="2" index="3">
                    <gradientitem index="0">
                        <property name="StartColor" value="RGB(255, 254, 228)" />
                        <property name="EndColor" value="RGB(255, 232, 167)" />
                        <property name="Ratio" value="45" />
                    </gradientitem>
                    <gradientitem index="1">
                        <property name="StartColor" value="RGB(255, 215, 103)" />
                        <property name="EndColor" value="RGB(255, 230, 158)" />
                        <property name="Ratio" value="55" />
                    </gradientitem>
                </gradient>
            </gradients>

            <states items="11">
                <state name="Active" index="0">
                </state>
                <state name="ActiveHot" index="1">
                </state>
                <state name="Inactive" index="2">
                    <property name="FillColor" value="RGB(240, 240, 240)" />
                    <themetext>
                        <property name="TextColor" value="RGB(100, 100, 100)" />
                    </themetext>
                </state>
                <state name="InactiveHot" index="3">
                    <property name="FillColor" value="RGB(240, 240, 240)" />
                </state>
                <state name="Disabled" index="4">
                    <themetext>
                        <property name="TextColor" value="RGB(161, 161, 146)" />
                    </themetext>
                </state>
                <state name="Selected" index="5">
                    <renderitems items="2">
                        <renderitem type="gradient" index="0">
                            <property name="GradientIndex" value="2" />
                            <property name="GradientType" value="VerticalGradient"/>
                        </renderitem>
                        <renderitem type="fill" index="1">
                            <property name="BackgroundType" value="BorderFill" />
                            <property name="BorderColor" 
				value="RGB(255, 171, 63)" />
                        </renderitem>
                    </renderitems>
                </state>
                <state name="SelectedInactive" index="6">
                    <themetext>
                        <property name="TextColor" value="RGB(100, 100, 100)" />
                    </themetext>
                </state>
                <state name="SelectedDisabled" index="7">
                    <property name="FillColor" value="RGB(97, 104, 139)" />
                    <themetext>
                        <property name="TextColor" value="RGB(243, 244, 248)" />
                    </themetext>
                </state>
                <state name="Visited" index="8">
                    <property name="BackgroundType" value="BackgroundFill" />
                    <property name="FillColor" value="RGB(255, 244, 215)" />
                </state>
                <state name="VisitedInactive" index="9">
                    <property name="FillColor" value="RGB(221, 221, 221)" />
                </state>
                <state name="VisitedDisabled" index="10">
                    <property name="FillColor" value="RGB(230, 230, 230)" />
                </state>
            </states>
        </part>
    </parts> 
</class>
  2. 以下函数绘制选中的 listbox 项目
    void DrawThemedSelectedListItem(HNICETHEME hTheme, HDC hdc)
{
    RECT    rcItem = { 10, 10, 150, 45 };

    NiceTheme_DrawBackground(
        hTheme, 
        hdc,
        LBXPT_LIST,
        LBXLST_SELECTED,
        &rcItem,
        NULL);
}
  3. 结果如下：

    ListBox Item with Visual Style

使用颜色方案

所有自定义控件的绘制都基于内置的颜色方案。每个自定义控件状态（活动、非活动、禁用等）都有自己的文本和背景颜色。您可以使用 *_SETCOLORCHEME 消息或 *_Set*ColorScheme 宏更改方案颜色。

  1. 以下函数更改 InfoBar 的活动状态颜色方案。
    void SetInfoBarColorScheme(HWND hWndIb)
{
    NICECOLORSCHEME ncs;

    ncs.uiMask = CLRSCHF_TEXTCOLOR | CLRSCHF_BACKCOLOR;
    ncs.crText = RGB(255, 128, 255);
    ncs.crBack = RGB(0, 128, 192);

    NiceInfoBar_SetActiveColorScheme(hWndIb, &ncs);
}
  2. 一个具有默认（系统）颜色方案和自定义颜色方案的 InfoBar

    InfoBar with Color Schemes

使用通知掩码

通知掩码启用或禁用指定的通知，因此您的应用程序只获取所需的通知。您可以使用 *_SETNOTIFYMASK 消息或 *_SetNotifyMask* 宏更改通知掩码。

  1. 以下函数启用或禁用 PageCtrl 中的自定义绘制（PageCtrl 控件的父控件接收 NCN_CUSTOMDRAW 通知）。
    void EnablePageCtrlCustomDrawing(HWND hWndPage, BOOL fEnable)
{
    DWORD   dwNotify = fEnable ? PCNMF_CUSTOMDRAW : 0;
    PageCtl_SetNotifyMaskEx(hWndPage, dwNotify, PCNMF_CUSTOMDRAW);
}
  2. 一个禁用了自定义绘制通知的 PageCtrl 和一个启用了自定义绘制通知的 PageCtrl

    PageCtrl Custom Draw

自定义控件库参考

有关详细参考，请参阅此发行版中包含的文档。

最新更新

最新更新可在 此处 获取 [^]。

修订历史

2007.08.06 - 1.1b1 新的测试版

  • 新控件
    • 直方图控件
    • 超链接控件
    • 边栏控件
    • 表单标签页控件
  • 新控件功能
    • 组合框控件
    • 列表框控件
  • 新的炫酷主题功能
    • 主题注册和加载
    • 应用程序特定主题注册和加载
    • 主题文件格式更改
    • 文档
  • Bug 修复

2007.03.29 - 1.01 错误修复，文章更新

  • 错误修复
    • 在炫酷滚动条（bin60\test.exe），Controls\Scrollbar... 菜单中，点击 [>|] 按钮，滚动条会移到最右边，然后点击 [|<] 按钮而不将鼠标悬停在滚动条上，直到您将鼠标悬停在其上才会重绘...（感谢 Kochise）。

2007.03.28 - 1.0 首次公开发布

反馈

如果您在运行此软件时遇到严重问题，或者发现任何错误，请随时与我联系。
我的邮箱地址是：Tarmo Kalda tka1969 'att' gmail 'dot' com。

许可证

版权所有 (c) 2007 Tarmo Kalda。

本软件按“原样”提供，不提供任何明示或暗示的保证。在任何情况下
作者均不对因使用本软件而产生的任何损害承担责任。

允许任何人出于任何目的使用本软件，包括商业
应用程序，但须遵守以下限制：

  1. 不得歪曲本软件的来源；您不得声称您
    编写了原始软件。如果您在产品中使用本软件，则需要在产品文档中
    提供致谢（请参见下文），这是推荐的做法。
    版权所有 (c) 2007 Tarmo Kalda。
  2. 您不得将其用于“广告软件”、“间谍软件”或“批量邮件”（垃圾邮件）应用程序。
  3. 您不得将本软件作为软件产品进行销售、出租或租赁。
  4. 修改后的源代码版本必须清楚地标记为已修改，并且不得
    被歪曲为原始软件。
  5. 此声明不得从任何源代码分发中删除或修改。
© . All rights reserved.