RadControls for Silverlight
Contents

This topic aims to explain the controls' structure needed to create a fully functional RadRibbonBar control.

Tip
Before proceeding with this topic, it is recommended to get familiar with the Visual Structure of the RadRibbonBar control.
Note

This section defines the terms and the concepts used in the scope of RadRibbonBar which you have to get familiar with before you continue reading the other topics of this help.

Fundamentals

The root level container is the RadRibbonBar itself. It is separated in two main areas: the title bar and the tabs container. The title bar contains the application menu button, the Quick Access Toolbar and the application title, while the tabs container is the place where all of your RadRibbonTabs are hosted just like the tabs of the standard tab control. One single RadRibbonBar can contain as many tabs as needed. The only restriction here is the visual area of your application.

Here is how a sample XAML declaration of these elements looks like:

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar" Title="My Title" ApplicationName="My Application">

    <telerik:RadRibbonBar.ApplicationMenu>
        <telerik:ApplicationMenu/>
    </telerik:RadRibbonBar.ApplicationMenu>

    <telerik:RadRibbonBar.QuickAccessToolBar>
        <telerik:QuickAccessToolBar/>
    </telerik:RadRibbonBar.QuickAccessToolBar>

    <telerik:RadRibbonTab Header="Home"/>
    <telerik:RadRibbonTab Header="View"/>
    <telerik:RadRibbonTab Header="Text"/>

</telerik:RadRibbonBar>

As you can see, the declared structure is pretty forward. You have an empty ApplicationMenu, an empty QuickAccessToolbar and three empty tabs added as children to the RadRibbonBar. The title and the application name are defined as attributes of the RadRibbonBar.

Application Menu

The application menu is separated in three main areas:

  • Menu Items - used to display the application menu items.
  • Content - used to display any kind of content, mostly related to the currently selected menu item.
  • Footer - footer container used to host buttons or other kind of controls related to the application.

Here is how a sample XAML declaration of these elements looks like:

CopyXAML
<telerik:RadRibbonBar.ApplicationMenu>
    <telerik:ApplicationMenu>

        <telerik:ApplicationMenu.Content>
            <TextBlock Text="Content Area"></TextBlock>
        </telerik:ApplicationMenu.Content>

        <telerik:ApplicationMenu.FooterContent>
            <telerik:RadRibbonButton Content="Footer Button"/>
        </telerik:ApplicationMenu.FooterContent>

        <telerik:RadRibbonButton Text="New"/>
        <telerik:RadRibbonButton Text="Open"/>
        <telerik:RadRibbonButton Text="Save"/>

    </telerik:ApplicationMenu>
</telerik:RadRibbonBar.ApplicationMenu>

As you can see the declaration of the ApplicationMenu contains a TextBlock "Content Area" hosted in its content area, a RadRibbonButton titled "Footer Button" in its footer and three more RadRibbonButtons placed in the menu area.

For more information take a look at the ApplicationMenu topic.

QuickAccessToolbar

The QuickAccessToolbar is composed of two parts:

  • Toolbar - used to host some commonly used actions.
  • Menu - contains menu items for minimization or changing the position of the RadRibbonBar.

Currently you can only add or remove buttons to the toolbar but cannot modify its menu.

Here is how a sample XAML declaration of these elements looks like:

CopyXAML
<telerik:RadRibbonBar.QuickAccessToolBar>
    <telerik:QuickAccessToolBar>
        <telerik:RadRibbonButton Content="Save"/>
        <telerik:RadRibbonButton Content="Undo"/>
        <telerik:RadRibbonButton Content="Redo"/>
    </telerik:QuickAccessToolBar>
</telerik:RadRibbonBar.QuickAccessToolBar>

As you can see the declaration of the QuickAccessToolbar contains three buttons: "Save", "Undo" and "Redo".

For more information take a look at the Quick Access ToolBar topic.

RadRibbonTab

The RadRibbonTab is the main container control of the RadRibbonBar. It is actually a tab page that's ment to host your buttons, check boxes, combo boxes, galleries and all the other types of controls that you need. The RadRibbonTab consists of two parts:

  • Header - used to display informational text (i.e. "Formatting") that describes the kind of actions it contains.
  • Content Area - this is the area where all your controls are going to be placed in.

You never add your controls to the RadRibbonBar directly. Instead they should be always placed inside of RadRibbonGroups. The RadRibbonGroup container is used to organize your controls in groups and to re-arrange them correctly when the parent container is resized. Additionally you can group your buttons in RadButtonGroup,while all other controls can be hosted in any other container.

Here is how a sample XAML declaration of these elements looks like:

CopyXAML
<telerik:RadRibbonTab Header="Home">
    <telerik:RadRibbonGroup Header="Text">
        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/bold.png"/>
            <telerik:RadRibbonButton SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/italic.png"/>
            <telerik:RadRibbonButton SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/underline.png"/>
        </telerik:RadButtonGroup>
        <telerik:RadRibbonGallery  Title="Styles" ItemWidth="72" ItemHeight="56">
            <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph.png"></telerik:RadGalleryItem>
            <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph1.png"></telerik:RadGalleryItem>
            <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph2.png"></telerik:RadGalleryItem>
            <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph3.png"></telerik:RadGalleryItem>
            <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph4.png"></telerik:RadGalleryItem>
            <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph5.png"></telerik:RadGalleryItem>
        </telerik:RadRibbonGallery>
    </telerik:RadRibbonGroup>
    <telerik:RadRibbonGroup Header="Page">
        <telerik:RadRibbonRadioButton Size="Large" LargeImage="/RadRibbonBarSample;component/Images/IconMSOffice/32/Footer.png"/>
        <telerik:RadRibbonRadioButton Size="Large" LargeImage="/RadRibbonBarSample;component/Images/IconMSOffice/32/PageBreak.png"/>
    </telerik:RadRibbonGroup>
</telerik:RadRibbonTab>

As you can see two RadRibbonGroups - "Text" and "Page", have been declared. The first one - "Text", contains a button group with three buttons inside, plus a RadRibbonGallery with 6 gallery items. The second group - "Page", contains two radio buttons with their size set to Large.

Here you can see how the whole XAML declaration of the RadRibbonBar looks like:

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar" Title="My Title" ApplicationName="My Application">

    <telerik:RadRibbonBar.ApplicationMenu>
        <telerik:ApplicationMenu>
            <telerik:ApplicationMenu.Content>
                <TextBlock Text="Content Area"></TextBlock>
            </telerik:ApplicationMenu.Content>
            <telerik:ApplicationMenu.FooterContent>
                <telerik:RadRibbonButton Content="Footer Button"/>
            </telerik:ApplicationMenu.FooterContent>
            <telerik:RadRibbonButton Text="New"/>
            <telerik:RadRibbonButton Text="Open"/>
            <telerik:RadRibbonButton Text="Save"/>
        </telerik:ApplicationMenu>
    </telerik:RadRibbonBar.ApplicationMenu>

    <telerik:RadRibbonBar.QuickAccessToolBar>
        <telerik:QuickAccessToolBar>
            <telerik:RadRibbonButton Content="Save"/>
            <telerik:RadRibbonButton Content="Undo"/>
            <telerik:RadRibbonButton Content="Redo"/>
        </telerik:QuickAccessToolBar>
    </telerik:RadRibbonBar.QuickAccessToolBar>

    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Text">
            <telerik:RadButtonGroup>
                <telerik:RadRibbonButton SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/bold.png"/>
                <telerik:RadRibbonButton SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/italic.png"/>
                <telerik:RadRibbonButton SmallImage="/RadRibbonBarSample;component/Images/IconMSOffice/16/underline.png"/>
            </telerik:RadButtonGroup>
            <telerik:RadRibbonGallery  Title="Styles" ItemWidth="72" ItemHeight="56">
                <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph.png"></telerik:RadGalleryItem>
                <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph1.png"></telerik:RadGalleryItem>
                <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph2.png"></telerik:RadGalleryItem>
                <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph3.png"></telerik:RadGalleryItem>
                <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph4.png"></telerik:RadGalleryItem>
                <telerik:RadGalleryItem Image="/RadRibbonBarSample;component/Images/IconMSOffice/paragraph5.png"></telerik:RadGalleryItem>
            </telerik:RadRibbonGallery>
        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Header="Page">
            <telerik:RadRibbonRadioButton Size="Large" LargeImage="/RadRibbonBarSample;component/Images/IconMSOffice/32/Footer.png"/>
            <telerik:RadRibbonRadioButton Size="Large" LargeImage="/RadRibbonBarSample;component/Images/IconMSOffice/32/PageBreak.png"/>
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
    <telerik:RadRibbonTab Header="View"/>
    <telerik:RadRibbonTab Header="Text"/>

</telerik:RadRibbonBar>

This RibbonBar is far from being ready but at least it illustrates the element's structure you have to follow in order to have a fully functional RadRibbonBar.

References

The RadRibbonBar consists of various elements, for more information on each of them take a look at the topics below:

Additional features that you may find interesting are:

See Also