Backstage View

• Jul 26, 2018
• 2 minutes to read

The Backstage View is represented by the BackstageView control. It emulates the menu in the MS Office Ribbon UI.

The Backstage View’s general structure consists of two areas. The left one - the Content Area - holds all backstage menu items. The right area – the Control Pane - displays the content of the currently selected tab item.

You can use the following item types within a Backstage View: a regular button, tab item and separator item.

• A BackstageButtonItem is a regular button item. There are two ways of specifying which actions a button item will perform - using the Click or Tapped event or attaching an ICommand object to a button via the Command property.
• A BackstageTabItem acts as a tab item in a tab control: as the end-user clicks its caption (displayed in the Content Area), its contents are displayed in the Control Pane area. In the image above, the Control Pane area displays the selected ‘Open’ tab item contents - the list of documents that can be opened.
• A BackstageSeparatorItem is a line that visually separates two neighboring elements. Use it to create visually detach item groups to improve a menu’s visual perception and readability.

To attach a Backstage View to a RibbonControl, assign a BackstageView to the RibbonControl.BackstageView property. See the example below.

XAML

<Ribbon:RibbonControl.BackstageView> 
    <Ribbon:BackstageView Caption="File" IsOpen="{Binding IsBackstageOpen, Mode=TwoWay}"> 
        <Ribbon:BackstageTabItem Content="New"> 
            <local:NewFileBackstageView dxmvvm:ViewModelExtensions.ParentViewModel="{Binding DataContext, ElementName=LayoutRoot}"/> 
        </Ribbon:BackstageTabItem> 
        <Ribbon:BackstageTabItem Content="Open"> 
            <local:OpenFileBackstageView dxmvvm:ViewModelExtensions.ParentViewModel="{Binding DataContext, ElementName=LayoutRoot}"/> 
        </Ribbon:BackstageTabItem> 
        <Ribbon:BackstageSeparatorItem /> 
        <Ribbon:BackstageButtonItem Content="Save" Command="{Binding SaveFileCommand}" CommandParameter="True"/> 
        <Ribbon:BackstageButtonItem Content="Save as..." Command="{Binding SaveFileCommand}" CommandParameter="True"/> 
        <Ribbon:BackstageSeparatorItem /> 
    </Ribbon:BackstageView> 
</Ribbon:RibbonControl.BackstageView>

A Backstage View attached to the RibbonControl will be shown after a user clicks the associated leftmost tab item.