如何优雅的写UI——(4)选项卡美化
现在做出来的选项卡实在太丑的,咱们怎么把他弄得好看一点呢
tabctrl是可以添加icon图标的,那派生与tabctrl的mfctabctrl肯定也能添加图标,他们两个添加图标的原理一样,但是还是有点不同
首先给项目添加三个图标
然后在成员变量中添加ImageList对象,必须要添加在成员变量中,否则加载不出来图片。
CImageList m_imglist;
之后在初始化中创建CImageList,他的声明为
BOOL Create(int cx, int cy, UINT nFlags, int nInitial, int nGrow);
其中各项参数的含义为:
cx定义图像的宽度,单位为象素;
cy定义图象的高度,单位为象素;
nFlags确定建立图像列表的类型,
可以是以下值的组合:ILC_COLOR、ILC_COLOR4(图像为24色)、ILC_COLOR8(图像为28色)、ILC_COLOR16(图像为216色)、ILC_COLOR24、ILC_COLOR32、ILC_COLORDDB和ILC_MASK;
nInitial用来确定图像列表包含的图像数量;
nGrow用来确定图像列表可控制的图像数量。
图像控制的属性类包括返回m_hImageList.控制句柄GetSafeHandle、取得图像列表中的图像数量GetImageCount、设置图像列表的背景颜色SetBkColor、取得图像列表的背景颜色SetBkColor和取得图像的有关信息SetBkColor。
图像控制的操作方法包括将一个图像列表绑定到一个对象上Attach、将对象上的图像列表解除绑定并返回句柄Detach、删除一个图像列表DeleteImageList、将一个图像增加到图像列表中Add和将一个图像从图像列表中删除Remove等。
我们来添加三个图标
m_imglist.Create(, , ILC_COLOR32 | ILC_MASK, , );
m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON1));
m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON2));
m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON3));
m_tab.SetImageList(m_imglist);//将ImageList绑定到tab上
要注意的是SetImageList这个方法,根据MSDN上的描述,当你创建tabctrl为平面样式,例如 STYLE_FLAT 时,你的图标加载是失败的,平面样式不支持图标的绑定,这个一定要注意了。
例如这样
我们将图标写进了队列,也绑定上了选项卡,但是如何让页面知道我是用到了哪个图标呢,这得回到添加标签页的地方,我们来看AddTab的方法定义
virtual void AddTab(
CWnd* pTabWnd,
UINT uiResTabLabel,
UINT uiImageId = (UINT)-,
BOOL bDetachable = TRUE
);
这里给出一个uiImageId 的参数,这个是图标的索引,你第几个页面要用到哪个图标,你就要填这个图标在CImageList 队列里的索引值。例如我第二个画面m_dlg2要用到第一个图标,第一个图标的索引值为0;就应该为
m_tab.AddTab(m_dlg2,L"还没想好些什么控件",,FALSE);
做好的图标就是这个样子
CSDN上还有很多样式定义,但是也有很多不能用,我不知道为什么,下面来举几个例子
标签在顶部/底部
m_tab.SetLocation (CMFCTabCtrl::LOCATION_BOTTOM);//Tab标签在底部
m_tab.SetLocation (CMFCTabCtrl::LOCATION_TOP);//Tab标签在顶部
添加关闭页面按钮
m_tab.EnableActiveTabCloseButton();//是否添加关闭选项卡按钮
把某一页选项置顶
m_tab.SetActiveTab(); //激活选项卡,以当前选项卡为第一页。
设置选项卡样式
m_tab.ModifyTabStyle (style);//设置CMFCTabCtrl的样式 参数:
STYLE_3D 三维样式。
STYLE_3D_ONENOTE Microsoft OneNote样式。
STYLE_3D_VS2005 Microsoft Visual Studio 2005样式。
STYLE_3D_SCROLLED 三维与矩形选项卡标签的样式。
STYLE_FLAT_SHARED_HORZ_SCROLL 有共享水平滚动条的平面样式。
STYLE_3D_ROUNDED_SCROLL 三维与设置选项卡标签的样式。
标签拖拽
m_tab.EnableTabSwap (TRUE);//可以拖拽
m_tab.EnableTabSwap (FALSE);//不可拖拽
选项卡标签和边框颜色
CArray<COLORREF, COLORREF> arColors;
arColors.Add (RGB (, , ));
arColors.Add (RGB (, , ));
arColors.Add (RGB (, , )); m_tab.EnableAutoColor (TRUE);
m_tab.SetAutoColors (arColors);
整个选项卡初始化代码
void CtabView::OnInitialUpdate()
{
CFormView::OnInitialUpdate();
GetParentFrame()->RecalcLayout();
ResizeParentToFit(); CRect rc;
GetClientRect(rc); if (!m_tab.Create(CMFCTabCtrl::STYLE_3D_ONENOTE, rc, this, , CMFCTabCtrl::LOCATION_TOP,))
{
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_imglist.Create(, , ILC_COLOR32 | ILC_MASK, , );
m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON1));
m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON2));
m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON4));
m_tab.SetImageList(m_imglist); m_tab.AddTab(m_dlg1,L"Listctrl控件",,TRUE);
m_tab.AddTab(m_dlg2,L"还没想好些什么控件",,FALSE);
m_tab.AddTab(m_dlg3,L"还有什么控件比较难写吗",,FALSE); //m_tab.SetLocation (CMFCTabCtrl::LOCATION_BOTTOM);//Tab标签在底部
m_tab.SetLocation (CMFCTabCtrl::LOCATION_TOP);//Tab标签在顶部 m_tab.EnableActiveTabCloseButton();//是否添加关闭选项卡按钮 m_tab.SetActiveTab(); //激活选项卡,以当前选项卡为第一页。 //m_tab.ModifyTabStyle (style);//设置CMFCTabCtrl的样式 CArray<COLORREF, COLORREF> arColors;
arColors.Add (RGB (, , ));
arColors.Add (RGB (, , ));
arColors.Add (RGB (, , )); m_tab.EnableAutoColor (TRUE);
m_tab.SetAutoColors (arColors); m_tab.EnableTabSwap (TRUE);//可以拖拽
//m_tab.EnableTabSwap (FALSE);//不可拖拽
}
阶段效果
到现在还是觉得这个选项卡难看,咱们继续美化
首先每个窗口背景色太难看了,我们来把背景色换成白的
改变背景色有很多种方法,有OnCtlColor、OnPaint、 OnEraseBkgnd都可以改变背景色,这个现在不用太纠结选哪种,随便用一个就行,但是他们的添加方法都相同。
在每一个子窗口中添加消息函数WM_CTLCOLOR。实现方法返回一个系统自定义的白色画刷WHITE_BRUSH。
HBRUSH CDialog1::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor)
{
HBRUSH hbr = CDialogEx::OnCtlColor(pDC, pWnd, nCtlColor); // TODO: 在此更改 DC 的任何特性 // TODO: 如果默认的不是所需画笔,则返回另一个画笔
return (HBRUSH)::GetStockObject(WHITE_BRUSH);
}
那么美化暂时先到这,要想画出更好看的选项卡,就需要涉及到控件重绘了,也就是自定义控件,这篇帖子我会持续更新的。马上我就要开下一篇功能实现的帖子。
代码:选项卡美化.zip
如何优雅的写UI——(4)选项卡美化的更多相关文章
- 如何优雅的写UI——(5)选项卡功能实现
先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的 ...
- 如何优雅的写UI——(3)添加MFC选项卡
窗体创建完成,接下来我们讲讲控件的使用 首先在CFormView窗体下选项卡的成员变量,这里我选择MFC下的选项卡类库:CMFCTabCtrl class CtabView : public CFor ...
- 如何优雅的写UI——(6)内存泄漏
控件讲了这么久,其实我的程序有两个Bug不知道大家有没有发现,这两个Bug都不会报错,对程序运行来说都没有阻碍,但是这种Bug对整个代码来说是一个很大的安全隐患. 什么是内存泄漏 内存泄漏(Memor ...
- 如何优雅的写UI——(2)MFC下基于CFormView的文档视图程序
在MFC中可以创建多种类型的窗口程序,如对话框程序.单文档结构程序(非文档/视图结构).单文档(文档/视图结构)以及多文档视图结构程序等. 在编写一般的小工具时,我们的首选显然是对话框程序,不过基于对 ...
- 如何优雅的写UI——(1)MFC六大核心机制-程序初始化
很多做软件开发的人都有一种对事情刨根问底的精神,例如我们一直在用的MFC,很方便,不用学太多原理性的知识就可以做出各种窗口程序,但喜欢钻研的朋友肯定想知道,到底微软帮我们做了些什么,让我们在它的框架下 ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- 我为什么还要造轮子?欠踹?Monk.UI表单美化插件诞生记!
背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...
- 关于如何写UI及屏幕适配的一些技巧
因为公司开启了一个新的iOS项目, 所以近期比较忙, 没有更新博客,今天打算总结一下关于UI布局及屏幕适配的一些实战技巧,尤其使用纯代码,会对提升效率及代码易于维护等方面有明显帮助,这里提到的没有使用 ...
随机推荐
- twig 模板引擎使渲染视图更加优雅
在使用 laravel 的时候接触过 blade 模板引擎.在学习的时候,接触到了另外一个强大的模板引擎:twig 官网:https://twig.sensiolabs.org/ 中文手册:http: ...
- ifsta---统计网络接口活动状态
ifstat命令就像iostat/vmstat描述其它的系统状况一样,是一个统计网络接口活动状态的工具.ifstat工具系统中并不默认安装,需要自己下载源码包,重新编译安装,使用过程相对比较简单. 下 ...
- Unity Shader (四)片段程序示例
1.环境光+漫反射+高光+点光源 Shader "Custom/Example_Frag_1" { properties { _MainColor(,,,) _Specular ...
- Rsyslog比较详细的
http://blog.csdn.net/fishmai/article/details/51842340
- POJ——T 3255 Roadblocks|| COGS——T 315. [POJ3255] 地砖RoadBlocks || 洛谷—— P2865 [USACO06NOV]路障Roadblocks
http://poj.org/problem?id=3255 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 15680 ...
- HDU Victor and World (最短路+状态压缩)
题目链接:传送门 题意: n个城市m条路.刚開始在点1,求把每一个城市都遍历一边最后回到1的花费的最小值. 分析: +n2∗2n). 转自Bestcode. 以下说说我的状态转移,首先 ...
- FSM的几种策略
FSM是什么?FSM就是Finite(有限) State(状态) 机(Machine)的缩写.(之所以中英文混写,是为了强调学懂FSM的原理是根本,刻意去采用“几段式”的写法并不重要) riple F ...
- ControlDesigner
GetHitTest https://stackoverflow.com/questions/7762397/how-do-i-click-a-usercontrols-child-in-design ...
- 冒泡排序算法 C#版
冒泡排序算法的运作如下: 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 3.针对所 ...
- BZOJ 1598 第k短路
思路: 先反向建图 Dijkstra一遍 求出h数组 再正向建图 A_star一遍 搞定 //By SiriusRen #include <queue> #include <cstd ...