In Why Windows Ribbon I have touched up on the Authoring and implementation [Designer vs. Developer] aspect of the Window Ribbon. I will try to get into some details about the authoring part of the Ribbon development.

The outer skeleton of the Windows Ribbon markup look like this,

<Application xmlns=http://schemas.microsoft.com/windows/2009/Ribbon>
    <Application.Commands>
        <Command Name="cmdFileNew" Symbol="cmdFileNew">
        . . .
        </Command>
        . . .
    </Application.Commands>
    <Application.Views>
        <Ribbon Name="MyApp">
            <Ribbon.ApplicationMenu>
                <ApplicationMenu CommandName="cmdAppMenu">
                    . . .
                </ApplicationMenu>
            </Ribbon.ApplicationMenu>
            <Ribbon.Tabs>
                <Tab CommandName="cmdTabHome">
                    <Tab.ScalingPolicy>
                        . . .
                    </Tab.ScalingPolicy>
                    <Group CommandName=". . ." SizeDefinition=". . .">
                        . . .
                    </Group>
                </Tab>
                . . .
            </Ribbon.Tabs>
            . . .
        </Ribbon>
    </Application.Views>
</Application>

Here in the above markup a command will be specified in the Application.Commands section. eg.

<Command Name="cmdFileNew" Symbol="cmdFileNew">
    <Command.LabelTitle>
        <String>New</String>
    </Command.LabelTitle>
    <Command.LargeImages>
        <Image MinDPI="96">res\\new_32.bmp</Image>
        <Image MinDPI="120">res\\new_40.bmp</Image>
        <Image MinDPI="144">res\\new_48.bmp</Image>
        <Image MinDPI="192">res\\new_64.bmp</Image>
    </Command.LargeImages>
    <Command.SmallImages>
        <Image MinDPI="96">res\\new_16.bmp</Image>
        <Image MinDPI="120">res\\new_20.bmp</Image>
        <Image MinDPI="144">res\\new_24.bmp</Image>
        <Image MinDPI="192">res\\new_32.bmp</Image>
    </Command.SmallImages>
    <Command.TooltipTitle>
        <String>New (Ctrl+N)</String>
    </Command.TooltipTitle>
    <Command.TooltipDescription>
        <String>Create a new document</String>
    </Command.TooltipDescription>
    <Command.Keytip>
        <String>N</String>
    </Command.Keytip>
</Command

In the above definition of a concept ‘New’, we are specifying,

  1. Name of concept
  2. Big images for all main DPIs (say big button in a group)
  3. Small images for all main DPIs (say for QAT or a small button in a group)
  4. Tooltip
  5. Tooltip description
  6. Key tip (Keyboard accessibility)

It is not mandatory to specify all DPI images in your resource, but it is advice to provide the same so that we can avoid the data loss happened because of the compression or stretching.

More details Command Element

In the next blog I will touch up on the Standard group templates and Custom templates. Also will see how we can customize Ribbon with respect layout and resize logic.