RadControls for WPF
Contents

Telerik RadRibbonBar provides a simple and consistent way for building interfaces similar to the RibbonBar used in Microsoft Office. The new Ribbon Backstage control allows you to achieve a more native Office 2010 look and feel of your application.

RibbonBackstage Fundamentals

The RibbonBackstage appears when a user clicks the Application Button. It can be used to display controls, used to perform actions on the entire document, like Save, Print and Send. The RibbonBackstage can also provide a list of recent documents, access to application options for changing user settings and preferences, and application exit.

By default the Backstage isn't opened. In order to control its state you can set the RibbonBar'sIsBackstageOpen property.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar"
                      IsBackstageOpen="True">
...
</telerik:RadRibbonBar>

Adding Backstage to the RadRibbonBar

In order to add a backstage to your RadRibbonBar control you need to set the RadRibbonBar's Backstage property. The next several code-snippets show you how to do that in XAML, as well as in the code-behind.

CopyXAML
<telerik:RadRibbonBar x:Name="radRibbonBar">
   <telerik:RadRibbonBar.Backstage>
       <telerik:RadRibbonBackstage>
       </telerik:RadRibbonBackstage>
   </telerik:RadRibbonBar.Backstage>
</telerik:RadRibbonBar>
CopyC#
this.ribbonBar.Backstage = new RadRibbonBackstage();
CopyVB.NET
Me.ribbonBar.Backstage = New RadRibbonBackstage();

Adding Backstage Items

The Backstage control derives from the RadTabControl. That fact allows you to easily customize it by adding/removing BackstageItems (the BackstageItem derives from a RadTabItem).

CopyXAML
<telerik:RadRibbonBar x:Name="ribbonBar" 
                        ApplicationButtonContent="File"
                        ApplicationButtonType="Office2010"
                        IsBackstageOpen="True">
    <telerik:RadRibbonBar.Backstage>
        <telerik:RadRibbonBackstage>
            <telerik:RadRibbonBackstageItem Header="Save" />
            <telerik:RadRibbonBackstageItem Header="Save As" />
            <telerik:RadRibbonBackstageItem Header="Open" />
            <telerik:RadRibbonBackstageItem Header="Recent"/>
            <telerik:RadRibbonBackstageItem Header="New"/>
            <telerik:RadRibbonBackstageItem Header="Options"  />
            <telerik:RadRibbonBackstageItem Header="Exit" />
        </telerik:RadRibbonBackstage>
    </telerik:RadRibbonBar.Backstage>
...
</telerik:RadRibbonBar>

BackstageItem Properties

The BackstageItem exposes the following properties that allow you to further customize it:

  • IsSelectable - specifies whether an item can be selected. If you set this property to False, the item will behave like a Button.
Note

If the BackstageItemIsSelectable property is set to False, you will be able to take advantage of the Click() event of the item, as well as its Command property.

  • IsDefault - specifies whether the item should be selected when the Backstage is opened.
Note

Please note that if you set the IsDefault property of multiple BackstageItems to True, the last one marked as default will be selected.

  • IsGroupSeparator - specifies whether an item is a group separator. Such items are used as a heading in order to differentiate a logical group of BackstageItems.
  • Icon - gets or sets BackstageItem icon
  • CloseOnClick - specifies whether the Backstage will be closed when the item is clicked.
Note

If the BackstageItem is not selectable the CloseOnClick property is set to True by default. However, if the item is selectable, then the CloseOnClick property won't affect its behavior.

CopyXAML
<telerik:RadRibbonBar x:Name="ribbonBar" 
                      ApplicationButtonContent="File"
                      ApplicationButtonType="Office2010"
                      IsBackstageOpen="True">
    <telerik:RadRibbonBar.Backstage>
        <telerik:RadRibbonBackstage>
            <telerik:RadRibbonBackstageItem CloseOnClick="False" 
                                            Header="Save"
                                            Icon="Images/Save.png"
                                            IsSelectable="False" />
            <telerik:RadRibbonBackstageItem Header="Save As" 
                                            Icon="Images/SaveAs.png"
                                            IsSelectable="False" />
            <telerik:RadRibbonBackstageItem Click="RadRibbonBackstageItem_Click" 
                                            Header="Open"
                                            Icon="Images/Open.png"
                                            IsSelectable="False" />
            <telerik:RadRibbonBackstageItem Header="Separator" IsGroupSeparator="True" />
            <telerik:RadRibbonBackstageItem Click="RadRibbonBackstageItem_Click" 
                                            Header="Recent"
                                            IsDefault="True">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Margin="15 15 0 0">
                        <TextBlock Margin="0 0 0 2" 
                                   FontSize="14"
                                   FontWeight="Bold"
                                   Text="Recent Documents" />
                        <Rectangle Height="1" Fill="{StaticResource DottedLineBrush}" />
                        <ItemsControl Margin="0 4 0 0" 
                                      ItemsSource="{StaticResource RecentDocuments}"
                                      ItemTemplate="{StaticResource RecentDocumentTemplate}" />
                    </StackPanel>
                    <Rectangle Grid.Column="1" 
                               Width="1"
                               Margin="10, 5"
                               Fill="{StaticResource VerticalSplitterBrush}" />
                    <StackPanel Grid.Column="2" Margin="5 15 7 0">
                        <TextBlock Margin="0 0 0 2" 
                                   FontSize="14"
                                   FontWeight="Bold"
                                   Text="Recent Places" />
                        <Rectangle Height="1" Fill="{StaticResource DottedLineBrush}" />
                        <ItemsControl Margin="0 4 0 0" 
                                      ItemsSource="{StaticResource RecentPlaces}"
                                      ItemTemplate="{StaticResource RecentDocumentTemplate}" />
                    </StackPanel>
                </Grid>
            </telerik:RadRibbonBackstageItem>
            <telerik:RadRibbonBackstageItem Header="New" IsSelected="True">
                <StackPanel Margin="15 15 0 0">
                    <TextBlock Margin="0 0 0 2" 
                               FontSize="14"
                               FontWeight="Bold"
                               Text="Available Templates" />
                    <Rectangle Height="1" Fill="{StaticResource DottedLineBrush}" />
                    <ItemsControl ItemsSource="{StaticResource AvailableTemplates}" ItemTemplate="{StaticResource AvailableTemplatesTemplate}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <telerik:RadWrapPanel />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </StackPanel>
            </telerik:RadRibbonBackstageItem>
            <telerik:RadRibbonBackstageItem Header="Exit" 
                                            Icon="Images/Exit.png"
                                            IsSelectable="False" />
        </telerik:RadRibbonBackstage>
    </telerik:RadRibbonBar.Backstage>
...
</telerik:RadRibbonBar>

Bellow you can find the resources used in the RibbonBarBackstage definition:

CopyXAML
<Grid.Resources>
    <local:RecentDocuments x:Key="RecentDocuments" />
    <local:RecentPlaces x:Key="RecentPlaces" />
    <local:AvailableTemplates x:Key="AvailableTemplates" />
    <LinearGradientBrush x:Key="DottedLineBrush" StartPoint="0,0.5" EndPoint="4,0.5" MappingMode="Absolute" SpreadMethod="Repeat">
        <GradientStop Color="#40000000" Offset="0" />
        <GradientStop Color="#40000000" Offset="0.5" />
        <GradientStop Color="Transparent" Offset="0.501" />
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="VerticalSplitterBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#10000000" Offset="0" />
        <GradientStop Color="#40000000" Offset="0.15" />
        <GradientStop Color="#40000000" Offset="0.95" />
        <GradientStop Color="#10000000" Offset="1" />
    </LinearGradientBrush>
    <DataTemplate x:Key="RecentDocumentTemplate">
        <telerik:RadRibbonButton Command="{Binding ElementName=UserControl, Path=Command}" Width="285">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageSource}" />
                <StackPanel Margin="3 0 0 0" HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Header}" Margin="0 0 0 2" />
                    <TextBlock Text="{Binding Folder}" Foreground="DimGray" />
                </StackPanel>
            </StackPanel>
        </telerik:RadRibbonButton>
    </DataTemplate>
    <DataTemplate x:Key="AvailableTemplatesTemplate">
        <telerik:RadRibbonButton Command="{Binding ElementName=UserControl, Path=Command}">
            <Grid Width="80">
                <Grid.ColumnDefinitions>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition  />
                </Grid.RowDefinitions>
                <Image Stretch="None" Source="{Binding ImageSource}" />
                <TextBlock TextWrapping="Wrap" Margin="2" Grid.Row="1" Text="{Binding Header}" HorizontalAlignment="Center" />
            </Grid>
        </telerik:RadRibbonButton>
    </DataTemplate>
</Grid.Resources>
CopyC#
public class RecentDocuments : ObservableCollection<DataItem>
{
    public RecentDocuments()
    {
        Add(new DataItem("RadRibbonBarSpecification", @"\\telerik.com\Resources", "", @"Images/Document.png", ""));
        Add(new DataItem("RadRibbonBackstageSpecification", @"\\telerik.com\Resources", "", @"Images/Document.png", ""));
        Add(new DataItem("RadRibbonBackstageItemSpecification", @"\\telerik.com\Resources", "", @"Images/Document.png", ""));
        Add(new DataItem("DevReach 2010", @"c:\My Documents", "", @"Images/Document.png", ""));
        Add(new DataItem("PDC 2010", @"c:\My Documents", "", @"Images/Document.png", ""));
        Add(new DataItem("MIX 2010", @"c:\My Documents", "", @"Images/Document.png", ""));
        Add(new DataItem("MS Days 2010", @"c:\My Documents", "", @"Images/Document.png", ""));
    }
}
public class RecentPlaces : ObservableCollection<DataItem>
{
    public RecentPlaces()
    {
        Add(new DataItem("My Documents", @"c:\Users\vtsvetkov\Documents", "", @"Images/Document.png", ""));
        Add(new DataItem("Downloads", @"c:\Users\vtsvetkov\Documents", "", @"Images/Document.png", ""));
        Add(new DataItem("Resources", @"\\telerik.com\Resources", "", @"Images/Document.png", ""));
    }
}
public class AvailableTemplates : ObservableCollection<DataItem>
{
    public AvailableTemplates()
    {
        Add(new DataItem("Blank     document", "", "", @"Images/DocTemplateNew.png", ""));
        Add(new DataItem("Blog post", "", "", @"Images/DocTemplateBlogPost.png", ""));
        Add(new DataItem("Recent    templates", "", "", @"Images/DocTemplateRecent.png", ""));
        Add(new DataItem("Sample    templates", "", "", @"Images/DocTemplateSamples.png", ""));
        Add(new DataItem("My templates", "", "", @"Images/DocTemplateMy.png", ""));
        Add(new DataItem("New from    existing", "", "", @"Images/DocTemplateNewBasedOn.png", ""));
    }
}
public class DataItem
{
    public string Header
    { get; set; }
    public string Description
    { get; set; }
    public string Folder
    { get; set; }
    public string ImageSource
    { get; set; }
    public string NavigateUri
    { get; set; }
    public DataItem(string header, string folder, string description, string imageSource, string navigateUri)
    {
        this.Header = header;
        this.Description = description;
        this.Folder = folder;
        this.ImageSource = imageSource;
        this.NavigateUri = navigateUri;
    }
}
CopyVB.NET
Public Class RecentDocuments
    Inherits ObservableCollection(Of DataItem)
    Public Sub New()
        Add(New DataItem("RadRibbonBarSpecification", "\\telerik.com\Resources", "", "Images/Document.png", ""))
        Add(New DataItem("RadRibbonBackstageSpecification", "\\telerik.com\Resources", "", "Images/Document.png", ""))
        Add(New DataItem("RadRibbonBackstageItemSpecification", "\\telerik.com\Resources", "", "Images/Document.png", ""))
        Add(New DataItem("DevReach 2010", "c:\My Documents", "", "Images/Document.png", ""))
        Add(New DataItem("PDC 2010", "c:\My Documents", "", "Images/Document.png", ""))
        Add(New DataItem("MIX 2010", "c:\My Documents", "", "Images/Document.png", ""))
        Add(New DataItem("MS Days 2010", "c:\My Documents", "", "Images/Document.png", ""))
    End Sub
End Class

Public Class RecentPlaces
    Inherits ObservableCollection(Of DataItem)
    Public Sub New()
        Add(New DataItem("My Documents", "c:\Users\vtsvetkov\Documents", "", "Images/Document.png", ""))
        Add(New DataItem("Downloads", "c:\Users\vtsvetkov\Documents", "", "Images/Document.png", ""))
        Add(New DataItem("Resources", "\\telerik.com\Resources", "", "Images/Document.png", ""))
    End Sub
End Class

Public Class AvailableTemplates
    Inherits ObservableCollection(Of DataItem)
    Public Sub New()
        Add(New DataItem("Blank     document", "", "", "Images/DocTemplateNew.png", ""))
        Add(New DataItem("Blog post", "", "", "Images/DocTemplateBlogPost.png", ""))
        Add(New DataItem("Recent    templates", "", "", "Images/DocTemplateRecent.png", ""))
        Add(New DataItem("Sample    templates", "", "", "Images/DocTemplateSamples.png", ""))
        Add(New DataItem("My templates", "", "", "Images/DocTemplateMy.png", ""))
        Add(New DataItem("New from    existing", "", "", "Images/DocTemplateNewBasedOn.png", ""))
    End Sub
End Class

Public Class DataItem
    Public Property Header() As String
        Get
            Return m_Header
        End Get
        Set
            m_Header = Value
        End Set
    End Property
    Private m_Header As String

    Public Property Description() As String
        Get
            Return m_Description
        End Get
        Set
            m_Description = Value
        End Set
    End Property
    Private m_Description As String

    Public Property Folder() As String
        Get
            Return m_Folder
        End Get
        Set
            m_Folder = Value
        End Set
    End Property
    Private m_Folder As String

    Public Property ImageSource() As String
        Get
            Return m_ImageSource
        End Get
        Set
            m_ImageSource = Value
        End Set
    End Property
    Private m_ImageSource As String

    Public Property NavigateUri() As String
        Get
            Return m_NavigateUri
        End Get
        Set
            m_NavigateUri = Value
        End Set
    End Property
    Private m_NavigateUri As String

    Public Sub New(header As String, folder As String, description As String, imageSource As String, navigateUri As String)
        Me.Header = header
        Me.Description = description
        Me.Folder = folder
        Me.ImageSource = imageSource
        Me.NavigateUri = navigateUri
    End Sub
End Class

Tip

The RadRibbonBar exposes the BackstageClippingElement property, that allows you to define the area over which the Backstage will be displayed:

CopyXAML
<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid x:Name="ribbonContainer">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <telerik:RadRibbonBar x:Name="ribbonBar" 
                              ApplicationButtonContent="File"
                              ApplicationButtonType="Office2010"
                              BackstageClippingElement="{Binding ElementName=ribbonContainer}"
                              IsBackstageOpen="True">

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

        </telerik:RadRibbonBar>
        ...
    </Grid>
    ...
</Grid>