Telerik blogs

With the Q1 2011 BETA release of RadControls for Silverlight and WPF we are announcing new ribbon control – the RadRibbonBackstage. The new RadRibbonBar Backstage functionality comes to replace the old Office 2007 Application menu with the new Office 2010 style. It is actually a collection of controls and most common actions that can be taken on the working area.

Use Cases

The new Backstage view might be used in cases where you want to achieve more native Office 2010 look and feel for your application.

  • The user can have three types of items in the Backstage Navigation. The three types can be mixed in a user defined manner.
    • Buttons – On click closes the Backstage and do the action associated with it.
    • Selectable Tabs – On click selects the tab and change the right pane content.
    • Group separator item – Non hit test visible item which can be used in order to separate some logical groups of items.
  • The user can nest Backstage tab navigations, so can achieve 2 or more layers of vertical Backstage navigation tab controls.
  • The user is able to define Content and ContentTemplates for the selectable tabs as per his/her own requirements.
  • If the Backstage is open everything should be disabled except the ribbon bar tabs.

Technical Details

The Backstage derives from RadTabControl, because it is actually a kind of a tab control, which has ordinary tab items as well as non-selectable (button) items. Most of the regular TabControl properties will be hidden, because won’t be relevant to the Backstage.

The BackstageItem will derive from RadTabItem and will add some additional functionality like:

  • IsSelectable property – will define if the item is regular Tab or Button
  • IsDefault property
  • IsGroupSeparator property – will define if the item is group separator
  • CloseOnClick property
  • Click event – will handle the button functionality
  • Commanding support

The user can set the Backstage using the Backstage property of the RadRibbonBar:

<telerik:RadRibbonBar>
            <telerik:RadRibbonBar.Backstage>
                <telerik:RadRibbonBackstage />
            </telerik:RadRibbonBar.Backstage>
        </telerik:RadRibbonBar>

You can manage the opened-closed states of the Backstage using the IsBackstageOpen property of the RadRibbonBar. If you need to organize the layout of your application, so the ribbon bar with its corresponding elements (for example RadRichTextBox) are not occupying the whole application area, you can place them in a grid (or some other container) and bind it to the BackstageClippingElement property of the RadRibbonBar, so the Backstage will place itself exactly over this part of the UI:

<Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="*" />
                <RowDefinition Height="30" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="40" />
            </Grid.ColumnDefinitions>
              
            <Grid x:Name="RibbonGrid" Grid.Row="1" Grid.Column="1">
                <telerik:RadRibbonBar BackstageClippingElement="{Binding ElementName=RibbonGrid}">
                    <telerik:RadRibbonBar.Backstage>
                        <telerik:RadRibbonBackstage />
                    </telerik:RadRibbonBar.Backstage>
                </telerik:RadRibbonBar>
            </Grid>
        </Grid>

Themes

The RadRibbonBackstage comes with full support for all our predefined themes (Office Black, Office Blue, Office Silver, Summer, Vista, Windows 7, Transparent, Expression Dark), so you can choose the most suitable for your needs.

Here is a screenshot of the end result of the demo application:

Backstage View

So what do you think about the new Backstage View? Please share your feedback.

Here is the source code of the demo project

 


About the Author

Viktor Tsvetkov

Software Developer,
WinCore Team

Comments

Comments are disabled in preview mode.