Creating a Split Button

A split button is a control that has a regular button control on the top half and a menu control on the bottom half. The idea here is that the button control represents the default choice, and if you want some other choice, you pull down the menu to select it. You create the split button control by using the <splitButton> element:

The only unique attribute here is showLabel. When you set this attribute to true (this is the default value), the button control's label appears; if you set it to false, instead, the label doesn't appear.

You populate the split button by adding a <button> element and then a <menu> element between <splitButton> and </splitButton>. Here's an example:

<splitButton id="splitButton1" size="large">
    <button id="btnRecentDocuments"
	label="Recent Documents"
	imageMso="InkEraseMode"
	onAction="Module1.btnClearRecentDocuments_OnAction" />
    <menu id="splitButton3" itemSize="large">
	<button id="btnClearRecentDocuments"
	    label="Clear Recent Documents"
	    imageMso="InkEraseMode"
	    oAction="Module1.btnClearRecentDocuments_OnAction" />
	<button id="btnChangeNumberOfRecentDocuments"
	    label="Change Number of Recent Docs"
	    imageMso="ReadingViewShowPrintedPage"
	    onAction="Module1.btnChangeNumberOfRecentDocuments_OnAction" />
	<button id="btnDisableRecentDocuments"
	    label="Disable Recent Documents"
	    imageMso="DeclineInvitation"
	    onAction="Module1.btnDisableRecentDocuments_OnAction" />
    </menu>
</splitButton>