How to add a backstage view in WinUI Ribbon?
You can add a Backstage to the Ribbon by using the Backstage property. The BackstageView is embedded within the Ribbon’s backstage area.
Backstage View contains the following items:
- BackstageViewTabItem: Displays a dedicated view when the tab item is selected.
- BackstageViewButtonItem: A clickable button that triggers a specific action.
- BackstageViewItemSeparator: Displays a separator line between backstage items.
These items are added using Items property.
The BackstageView provides the ability to add footer items through its FooterItems property.
Add Backstage View in Backstage:
The Ribbon interface opens a separate Backstage View when the Backstage button is clicked.
Xaml
<StackPanel> <ribbon:SfRibbon> <ribbon:SfRibbon.Backstage> <ribbon:RibbonBackstage> <ribbon:BackstageView> <!—Add Back stage view items here --> </ribbon:BackstageView> </ribbon:RibbonBackstage> </ribbon:SfRibbon.Backstage> </ribbon:SfRibbon> </StackPanel>
Output:
Add items through its ‘Items’ property:
Below is a code snippet demonstrating how to add tabs, buttons, and separators as items within the BackstageView of the Ribbon. The Header property is used to specify the display name for both tabs and buttons.
Xaml
<ribbon:SfRibbon.Backstage> <ribbon:RibbonBackstage> <ribbon:BackstageView> <ribbon:BackstageView.Items> <ribbon:BackstageViewTabItem Header=”New” /> <ribbon:BackstageViewTabItem Header=”Open” /> <ribbon:BackstageViewItemSeparator /> <ribbon:BackstageViewButtonItem Header=”Save” /> <ribbon:BackstageViewButtonItem Header=”Close” /> </ribbon:BackstageView.Items> </ribbon:BackstageView> </ribbon:RibbonBackstage> </ribbon:SfRibbon.Backstage>
Output
Add Footer Items through its ‘FooterItems’ property:
We can add items in the Footer of Back stage view using “FooterItems”.
Xaml
<ribbon:BackstageView> <ribbon:BackstageView.FooterItems> <ribbon:BackstageViewItemSeparator /> <ribbon:BackstageViewTabItem Header="Account" /> <ribbon:BackstageViewTabItem Header="Feedback" /> <ribbon:BackstageViewButtonItem Header="Option" /> </ribbon:BackstageView.FooterItems> </ribbon:BackstageView>
Output:
Adding content within BackstageViewTabItem
The BackstageViewTabItem is a valuable component of the BackstageView, offering users a separate and distinct view within the backstage area when selected. The Header property allows you to assign a name to the tab, making it easier for users to identify and navigate to the appropriate view.
Each tab item can host any layout panel with custom content. When a user clicks a tab item, its associated content is displayed, enabling a user-friendly and organized way to present additional information or functionality.
Below is a code snippet that demonstrates how clicking the ‘New’ tab item displays a separate view with custom content.
Xaml
<ribbon:BackstageViewTabItem Header="New">
<Grid>
<Grid.Resources>
<x:Double x:Key="TileHeight">307</x:Double>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Grid.Column="1"
MinHeight="{StaticResource TileHeight}"
Margin="6"
Background="DarkGray" />
<Grid Grid.Row="0"
Grid.Column="2"
MinHeight="{StaticResource TileHeight}"
Margin="6"
Background="LightGray" />
<Grid Grid.Row="1"
Grid.Column="1"
MinHeight="{StaticResource TileHeight}"
Margin="6"
Background="LightGray" />
<Grid Grid.Row="1"
Grid.Column="2"
MinHeight="{StaticResource TileHeight}"
Margin="6"
Background="DarkGray" />
<Grid x:Name="SourceElement"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
MinWidth="250"
MinHeight="{StaticResource TileHeight}"
Margin="5"
Background="{ThemeResource SystemAccentColor}" />
</Grid>
</ribbon:BackstageViewTabItem>
Output:
Conclusion
I hope you enjoyed learning to add a backstage view in WinUI Ribbon.
You can refer to our WinUI Ribbon feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinUI Ribbon example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
