Ribbon第一节：控件大全

原创已于 2025-02-15 11:30:02 修改 · 1.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ribbon #excel #microsoft #xml #制造

于 2024-05-10 11:33:39 首次发布

VBA实战专栏收录该内容

16 篇文章

订阅专栏

1.结构

1.1 基本结构

以下为一个自定义UI 的基本结构，ribbon为自定义工具栏，tabs为选项卡集合，其下是一个个自定义Tab选项卡。

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
    <ribbon startFromScratch="true"><!--功能区仅显示自定义项为 true；否则为 false。默认值为 false-->
        <tabs>
            <tab id="rxtabCustom1" label="My TAB1" insertBeforeMso="TabHome">
                <group id="rxgrp1" label="Group1">
                    <!--此处放控件内容-->
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

1.2 Tab—选项卡

<!--idMso为office自带选项卡-->
<!--visible选项卡可见为true，不可见为false，适用于tab，group-->
<tab idMso="TabHome" visible="true"/><!--开始-->
<tab idMso="TabData" visible="false"/><!--数据-->
<!--插入TabInsert,页面布局TabPageLayoutExcel,公式TabFormulas,视图TabReview-->

<!--自定义选项卡-->
<!--insertBeforeMso自定义选项卡插在Tabhome之前；insertafterMso-->
<tab id="rxtabCustom1" label="My TAB1" insertBeforeMso="TabHome">
</tab>

1.3 Group—组别

一个Tab选项卡下依功能进行的的分组，作用是分区命名，实例：

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
	<ribbon startFromScratch="true">
		<tabs>
			<tab id="rxtabCustom1" label="My TAB1" insertBeforeMso="TabHome">
				<group id="rxgrp6" label="程序列表控件">
					<menu label="程序列表选项" id="rxmenu1" imageMso="AppointmentColorDialog" supertip="http://excelbbx.net" screentip="Excelbbx" size="large">
						<button label="试验1" id="rxmenu1btn1" imageMso="AddressBook" onAction="rxmenu1btn1_Chick" supertip="试验1" screentip="试验1123123"/>
						<menuSeparator id="分隔条001"/>
						<button label="试验2" id="rxmenu1btn2" imageMso="AutoFormatChange" onAction="rxmenu1btn2_Chick" supertip="试验2" screentip="提示"/>
						<menuSeparator id="分隔条002"/>
						<button label="试验3" id="rxmenu1btn3" imageMso="ClipArtInsert" onAction="rxmenu1btn3_Chick" supertip="试验3" screentip="提示"/>
						<menuSeparator id="分隔条003" title="分隔条加内容"/>
						<button label="试验4" id="rxmenu1btn4" imageMso="ChartTypeColumnInsertGallery" onAction="rxmenu1btn4_Chick" supertip="试验4" screentip="提示"/>
						<menuSeparator id="分隔条004"/>
						<button label="试验5" id="rxmenu1btn5" imageMso="Chart3DPieChart" onAction="rxmenu1btn5_Chick" supertip="试验5" screentip="提示"/>
						<menuSeparator id="分隔条005"/>
					</menu>
				</group>
			</tab>
		</tabs>
	</ribbon>
</customUI>

1.4 Box— 集合

将一个组别中的控件进行组合排成一行，方便控件排布美观，此结构可以不用。可选属性boxStyle设置排布方向，默认vertical。

<box id="rxSortBox1" boxStyle="vertical">
	<button id="Button4" label="生成" imageMso="PivotTableFieldSettings" onAction="getalldata"/>
	<button id="Button5" label="另存" imageMso="QuerySelectQueryType" onAction="export_excel"/>
	<button id="Button6" label="清除" imageMso="Clear" onAction="content_clear"/>
</box>

2.控件

2.1 button—按钮

<!--label标签，onAction绑定VBA中的函数名，showlabel为false表示不显示标签只有图标，默认为true-->
<!--size图标尺寸large大，默认normal-->
<button id="Button1" label="保存" imageMso="FrameSaveCurrentAs" size="large" onAction="Saveas"/>
<button id="Button2" showLabel="false" imageMso="ControlImage" onAction="picture" screentip="图览"/>

2.2 editBox—文本输入框

<editBox id="account" label="账号:" sizeString="123456789012" onChange="account_Click" showLabel="true"/>

回调函数

Sub account_Click(control As Office.IRibbonControl, text As String)
'此函数在焦点离开editbox控件后运行
debug.print text'text是在editbox中输入的文本内容
End Sub

2.3 menu—下拉按钮菜单

<!--imageMso指定图标，screentip悬停文本提示加粗，supertip提示正文-->
<menu label="程序列表选项" id="rxmenu1" imageMso="AppointmentColorDialog" supertip="xwlink1996" screentip="加微信" size="large">
	<button label="试验1" id="rxmenu1btn1" imageMso="AddressBook" onAction="rxmenu1btn1_Chick" supertip="试验1" screentip="提示"/>
	<menuSeparator id="分隔条001"/>
	<button label="试验2" id="rxmenu1btn2" imageMso="AutoFormatChange" onAction="rxmenu1btn2_Chick" supertip="试验2" screentip="提示"/>
	<menuSeparator id="分隔条002"/>
	<button label="试验3" id="rxmenu1btn3" imageMso="ClipArtInsert" onAction="rxmenu1btn3_Chick" supertip="试验3" screentip="提示"/>
	<menuSeparator id="分隔条003" title="分隔条加内容"/>
	<button label="试验4" id="rxmenu1btn4" imageMso="ChartTypeColumnInsertGallery" onAction="rxmenu1btn4_Chick" supertip="试验4" screentip="提示"/>
	<menuSeparator id="分隔条004"/>
	<button label="试验5" id="rxmenu1btn5" imageMso="Chart3DPieChart" onAction="rxmenu1btn5_Chick" supertip="试验5" screentip="提示"/>
	<menuSeparator id="分隔条005"/>
</menu>

2.4 splitButton—拆分式按钮

默认一个按钮可以点击，还有下拉按钮可供选择

<splitButton id="splitButton1" size="large" visible="true">
	<button id="button1" label="多表数据汇总" imageMso="QueryAppend" enabled="true" onAction="SheetsQather"/>
	<menu id="menu1" itemSize="large" visible="true" enabled="true" keytip="D">
		<button id="button2" label="多表数据汇总" imageMso="QueryAppend" onAction="SheetsQather"/>
		<button id="button3" label="按颜色汇总" imageMso="AppointmentColorDialog" onAction="ColorQather"/>
	</menu>
</splitButton>

对应的回调函数

Sub SheetsQather(control As IRibbonControl)
    Dim id As String
    id = control.id
    Select Case id
        Case "button1"
            
        Case "button2"
        
    End Select
    MsgBox "多表数据汇总......请补充代码", vbOKOnly, "友情提示"
End Sub
'单击功能区中id为button3的过程所执行的过程
Sub ColorQather(control As IRibbonControl)
    MsgBox "按颜色汇总......请补充代码", vbOKOnly, "友情提示"
End Sub

2.5 dropDown—下拉选择菜单

<!--sizestring调整下拉栏宽度-->
<dropDown id="SelectFactory" label="工厂:" sizeString="123456789" onAction="factory_click">
	<item id="factory1101" label="1101"/>
	<item id="factory1102" label="1102"/>
	<item id="factory1103" label="1103"/>
	<item id="factory1104" label="1104"/>
</dropDown>

vba对应的回调函数

Public Sub factory_click(control As IRibbonControl, id As String, index As Integer)
    debug.print id
end sub

2.6 ComboBox—选择菜单可编辑

<comboBox id="SelectFactory" label="工厂:" sizeString="123456789" onChange="ComboBox1_Change">
	<item id="factory1101" label="1101"/>
	<item id="factory1102" label="1102"/>
	<item id="factory1103" label="1103"/>
	<item id="factory1104" label="1104"/>
</comboBox>

2.7 checkBox—勾选

<!--visible为true可见，enable为true可以点击，keytip快捷键C-->
<checkBox id="rxchkR1C1" label="记住密码" visible="true" enabled="true"  getPressed="remember_getPressed" onAction="remember_click" keytip="C"/>

回调函数

Sub remember_click(control As IRibbonControl, pressed As Boolean)
    If pressed Then   '如果参数pressed的值为true
        MsgBox "复选框:" & control.ID & "已打勾", vbOKOnly, "友情提示" 'control.ID代表当前所单击的按钮的ID号
    Else
        MsgBox "复选框:" & control.ID & "未打勾", vbOKOnly, "友情提示"
    End If
End Sub

2.8 toggleButton—切换按钮

分为按下和弹起两个状态

<toggleButton id="toggleButton1" label="显示零值" visible="true" enabled="true" onAction="zero" imageMso="ChartTypeOtherInsertGallery" size="large" screentip="切换"  keytip="L"/>

对应的回调函数

Sub zero(control As IRibbonControl, pressed As Boolean)
    If pressed = True Then '如果切换按钮处于按下状态
        Debug.Print True
    Else
        Debug.Print False
    End If
End Sub

2.9 separator—竖向分割条

用于组内分割，使按钮排布清晰美观

<separator id="separator1"/>

2.10 dialogBoxLauncher—对话框启动器

按钮图标位置在group右下角

<dialogBoxLauncher>
	<button id="dialogOne" screentip="工资条工具" supertip="单击可将工资明细表转换成工资条" onAction="wage" keytip="G"/>
</dialogBoxLauncher>

2.11 labelControl—标签控件

<labelControl id="Label1" getLabel="getLabel"/>

对应回调函数

Sub getLabel(control As IRibbonControl, ByRef returnedVal)
returnedVal = ActiveSheet.Shapes.Count  '将活动工作表中的图形对象数量赋值给参数returnedVal
End Sub

2.12 buttonGroup—按钮集合

<buttonGroup id="rxbgrpMsoControls">
	<toggleButton idMso="Bold"/>
	<toggleButton idMso="Italic"/>
	<toggleButton idMso="Underline"/>
	<toggleButton idMso="UnderlineDouble" showLabel="false"/>
</buttonGroup>

2.13 buttonGroup—按钮集合

<gallery id="gallery1" label="图库" size="large" columns="3" rows="3" imageMso="HappyFace" onAction="galleryAction">
    <item id="item1" image="图片1" label="选项1" />
    <item id="item2" image="图片2" label="选项2" />
    <item id="item3" image="图片3" label="选项3" />
</gallery>

动态加载

<gallery id="gallery1" label="动态图库" size="large" columns="3" rows="3" getItemCount="getItemCount" getItemID="getItemID" getItemImage="getItemImage" getItemLabel="getItemLabel" onAction="galleryAction" />

回调

public int getItemCount(IRibbonControl control) {
    // 返回图库中的选项数量
    return 3;
}

public string getItemID(IRibbonControl control, int index) {
    // 返回指定索引项的 ID
    return "item" + (index + 1);
}

public IImage getItemImage(IRibbonControl control, int index) {
    // 返回指定索引项的图标
    return LoadImage("图片" + (index + 1));
}

public string getItemLabel(IRibbonControl control, int index) {
    // 返回指定索引项的标签
    return "选项" + (index + 1);
}

public void galleryAction(IRibbonControl control, string selectedID, int selectedIndex) {
    // 处理用户选择的选项
    MessageBox.Show("您选择了：" + selectedID);
}

分组显示

<gallery id="gallery1" label="分组图库" size="large" columns="3" rows="3">
    <menu id="menu1" label="分组1">
        <button id="button1" image="图片1" label="选项1" />
        <button id="button2" image="图片2" label="选项2" />
    </menu>
    <menu id="menu2" label="分组2">
        <button id="button3" image="图片3" label="选项3" />
        <button id="button4" image="图片4" label="选项4" />
    </menu>
</gallery>

技术交流：