如何优雅的写UI——(3)添加MFC选项卡

窗体创建完成,接下来我们讲讲控件的使用

首先在CFormView窗体下选项卡的成员变量,这里我选择MFC下的选项卡类库:CMFCTabCtrl

class CtabView : public CFormView
{
    ......
    ......
    public:
          CMFCTabCtrl m_tab;      

}    

在初始化中动态创建选项卡并设置选项卡的样式,这里我们使用了Creat函数,他的原型是

BOOL Create(Style style, const RECT& rect, CWnd* pParentWnd, UINT nID, Location location = LOCATION_BOTTOM, BOOL bCloseBtn = FALSE);

第一个参数 Style style

是一个枚举类型,它定义了选项卡的样式,基本都为3D的样式

public:
    CMFCTabCtrl();

enum Style
    {
        STYLE_3D                      = 0,
        STYLE_FLAT                    = 1,
        STYLE_FLAT_SHARED_HORZ_SCROLL = 2,
        STYLE_3D_SCROLLED             = 3,
        STYLE_3D_ONENOTE              = 4,
        STYLE_3D_VS2005               = 5,
        STYLE_3D_ROUNDED              = 6,
        STYLE_3D_ROUNDED_SCROLL       = 7,
    };

第二个参数:设置选项卡大小

第三个参数:窗体句柄

第四个参数:设置选项卡控件ID

第五个参数:设置选项卡标签位置,MFC只给了上下两个方向来显示选项卡标签的位置

public:
 CMFCBaseTabCtrl();

enum Location
 {
  LOCATION_BOTTOM = 0,
  LOCATION_TOP = 1
 };

第六个参数:是否带关闭按钮,关闭按钮的逻辑是要自己实现的,这个我们下面再说。

添加选项卡代码:

void CtabView::OnInitialUpdate(){    CFormView::OnInitialUpdate();    GetParentFrame()->RecalcLayout();    ResizeParentToFit();

    CRect rc;    GetClientRect(rc);    if (!m_tab.Create(CMFCTabCtrl::STYLE_3D_ONENOTE, rc, this, CMFCTabCtrl::RESIZE_HORIZ, CMFCTabCtrl::LOCATION_TOP))    {        return ;         }}

创建好的选显卡是光秃秃的没有任何标签页的,这个需要我们手动添加

如何给选项卡创建标签页 ,这需要我们新建窗体在选项卡中显示

创建三个Dialog窗体备用

给窗体添加类,自动生成就可以

之后咱们给选项卡添加标签页,在选项卡中引用我们刚刚新建的Dialog类的指针

#include "Dialog1.h"
#include "Dialog2.h"
#include "Dialog3.h"

class CtabView : public CFormView
{
    public:
    CMFCTabCtrl m_tab;
    CDialog1 *m_dlg1;
    CDialog2 *m_dlg2;
    CDialog3 *m_dlg3;

}

在程序初始化时动态创建的窗体

void CtabView::OnInitialUpdate()
{
 CFormView::OnInitialUpdate();
 GetParentFrame()->RecalcLayout();
 ResizeParentToFit();

CRect rc;
 GetClientRect(rc);
 if (!m_tab.Create(CMFCTabCtrl::STYLE_3D_ONENOTE, rc, this, 3000, CMFCTabCtrl::LOCATION_TOP,0))
 {
  return ;    
 }

m_dlg1=new CDialog1;
 m_dlg2=new CDialog2;
 m_dlg3=new CDialog3;

m_dlg1->Create(IDD_DIALOG1,&m_tab);
 m_dlg1->SetFont(&afxGlobalData.fontRegular);
 //m_dlg1->SetWindowTextW(L"Listctrl控件");

m_dlg2->Create(IDD_DIALOG2,&m_tab);
 m_dlg2->SetFont(&afxGlobalData.fontBold);
 //m_dlg2->SetWindowTextW(L"还没想好些什么控件");

m_dlg3->Create(IDD_DIALOG3,&m_tab);
 m_dlg3->SetFont(&afxGlobalData.fontDefaultGUIBold);
 /*m_dlg3->SetWindowTextW(L"还有什么控件比较难写吗");*/

m_tab.AddTab(m_dlg1,L"Listctrl控件");
 m_tab.AddTab(m_dlg2,L"还没想好些什么控件");
 m_tab.AddTab(m_dlg3,L"还有什么控件比较难写吗");

m_tab.EnableActiveTabCloseButton();//是否添加关闭选项卡按钮
 m_tab.SetActiveTab(0); //激活选项卡,以当前选项卡为第一页。

}

运行一下看一下效果

看起来还可以,但是当我们点击标签页的时候会发现,我们的窗体是弹出式的并不是嵌入式,这是因为我门少了少了一步,导致窗体在创建的时候是以弹出的方式打开。

打开窗体属性,将Style属性由弹出Popup改为Child子窗口,所有的标签用的窗体都要这么改

效果

里面的窗体太难看了了,把边框和标题去掉就好了

窗体属性,把Border改为None就好了

最终效果

原文地址:https://www.cnblogs.com/ye-ming/p/9266558.html

时间: 2024-10-09 06:21:29

如何优雅的写UI——(3)添加MFC选项卡的相关文章

如何优雅的写UI——(4)选项卡美化

现在做出来的选项卡实在太丑的,咱们怎么把他弄得好看一点呢 tabctrl是可以添加icon图标的,那派生与tabctrl的mfctabctrl肯定也能添加图标,他们两个添加图标的原理一样,但是还是有点不同 首先给项目添加三个图标 然后在成员变量中添加ImageList对象,必须要添加在成员变量中,否则加载不出来图片. CImageList m_imglist; 之后在初始化中创建CImageList,他的声明为 BOOL Create(int cx, int cy, UINT nFlags, i

如何优雅的写UI——(5)选项卡功能实现

先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的原因就是主窗口在改变的大小的时候没有通知选项卡让他跟着主窗口一起变,所以我们现在通知选项卡一下 添加ON_WM_SIZE消息,实现函数 void CtabView::OnSize(UINT nType, int cx, int cy) { //CFormView::OnSize(nType, cx,

javascript动手写日历组件(2)——优化UI和添加交互(by vczero)

一.优化UI 继上一篇,http://www.cnblogs.com/vczero/p/js_ui_1.html.开始优化UI,主要优化的部分有: (1)增加星期行.(2)字体设置.(3)日期垂直居中.(4)将单元格->底部线条.(5)修改文本的颜色对比.(6)将内部调用的函数加前缀_,如_addHeader()._addWeekday(). 修改的后基本效果如下图: 整个代码做了小修小改: 1 var Calendar = function(div){ 2 this.div = documen

关于代码手写UI,xib和StoryBoard

代码手写UI 这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用.Geek们喜欢用代码构建UI,是因为代码是键盘敲出来的,这样可以做到不开IB,手不离开键盘就完成工作,可以专注于编码环境,看起来很cool很高效,而且不到运行时大家都不知道会是什么样子,也显出了程序员这一职业的高大上及神秘气息(这个真的不是在黑..想想大家一起在设计师背后指点江山的场景吧).大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代码UI可

IOS基础UI之(三)手写UI和storyboard方式实现图片移动和缩放

手写UI是最早进行UI界面布局的方法,优点是灵活自由,缺点是使代码看起来比较长.平时学习的时候可以多尝试手写ui,这样会更深入熟悉控件.storyboard开发效率相对比较高.实际开发中看情况而定!! 下面用这两种方式分别实现图片移动和缩放. 功能描述: 1. 界面布局 2.点击相应的按钮,对显示的图片移动.缩放. 效果如下:    掌握点: 一:熟悉代码的描述UIButton属性 1.UIButton状态 UIControlStateNormal          // 正常状态 UICont

jquery UI datepicker 添加时间的选择。

仅有日期的原始效果图: 支持时间选择的目标效果图: 第一步:引入几个重要的jquery UI 文件,其中zh-CN.js是支持中文的 <script href="Js/Jquery/jquery.js"/><script/> <script href="Js/jqueryui/jquery.ui.js"/><script/> <script href="Js/jqueryui/i18n/zh-CN.js

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧 最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系.而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:使用代码手写UI及布局:使用单个xib文件组织viewController或者view:使用StoryBoard来通过

每天都有新发现——如何优雅的用js动态添加html代码

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

如何优雅的写一篇安利文-以Sugar ORM为例

前言 我最近喜欢把写的十分优美的技术文章叫做安利文.首先,文章必须是原创而非软广:其次,阅读之后不仅能快速吸纳技术要点并入门开发,还能感同身受的体会作者热情洋溢的赞美和急于分享心得体验的心情,让人感觉相见恨晚,醍醐灌顶. 安利文基于技术文章但又高于技术文章,同是经验总结,但却因为作者认真的揣摩每一个标点.断句而变得优雅.一篇满是主观感受的文章却不嚼之乏味,作者用心的指出每一个需要注意的技术亮点在文字中如蛟龙戏水,让阅读者大呼过瘾.因此,我觉得能原创分享一篇技术文章精神已经难能可贵,但若能锦上添花