Skip to content

Commit f36b49f

Browse files
durga-muthudurga-muthu
authored
Merge pull request #2035 from syncfusion-content/998696-RibbonBackStageButton-dev
WPF-998696-Documentation for BackStageHeaderTemplate support in Ribbon
2 parents 5d38733 + 3390c5a commit f36b49f

File tree

3 files changed

+176
-18
lines changed

3 files changed

+176
-18
lines changed

‎wpf/Ribbon/Backstage.md‎

Lines changed: 176 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: post
33
title: Backstage in WPF Ribbon control | Syncfusion®
44
description: Learn about Backstage support in Syncfusion® Essential Studio® WPF Ribbon control, its elements and more.
5-
platform: WPF
5+
platform: wpf
66
control: Ribbon
77
documentation: ug
88
---
@@ -101,7 +101,7 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2013White" >
101101

102102
{% endtabs %}
103103

104-
![WPF Ribbon displays BackStage](GettingStarted_images/wpf-ribbon-backstage.jpg)
104+
![WPF Ribbon displays BackStage](getting-started_images/wpf-ribbon-back-stage.jpg)
105105

106106
### Customize the BackStage Visibility
107107

@@ -285,7 +285,7 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2013White" >
285285

286286
{% endtabs %}
287287

288-
![WPF Ribbon Backstage with BackStageCommandButton](GettingStarted_images/wpf-ribbon-backstage-commandbutton.jpg)
288+
![WPF Ribbon Backstage with BackStageCommandButton](getting-started_images/wpf-ribbon-backstage-commandbutton.jpg)
289289

290290
## Setting image to BackStageCommandButton
291291

@@ -419,7 +419,7 @@ The [`IconTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools
419419

420420
{% endtabs %}
421421

422-
![WPF Ribbon Backstage displays Image for BackStageCommandButton](GettingStarted_images/wpf-ribbon-backstage-commandbutton-icon.png)
422+
![WPF Ribbon Backstage displays Image for BackStageCommandButton](getting-started_images/wpf-ribbon-backstage-commandbutton-icon.png)
423423

424424
N> [View sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-ribbon-examples/tree/main/Samples/Setting-icons-using-IconTemplate)
425425

@@ -493,7 +493,7 @@ The [`IconTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools
493493

494494
{% endtabs %}
495495

496-
![WPF Ribbon Backstage displays Image for BackStageCommandButton](GettingStarted_images/wpf-ribbon-backstage-icon.png)
496+
![WPF Ribbon Backstage displays Image for BackStageCommandButton](getting-started_images/wpf-ribbon-backstage-icon.png)
497497

498498
### Setting vector image
499499

@@ -598,7 +598,7 @@ The [`IconTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools
598598
{% endtabs %}
599599

600600

601-
![WPF Ribbon Backstage displays Image for BackstageButton using VectorImage](GettingStarted_images/wpf-ribbon-backstage-button-with-image.png)
601+
![WPF Ribbon Backstage displays Image for BackstageButton using VectorImage](getting-started_images/wpf-ribbon-backstage-button-with-image.png)
602602

603603
## Add BackStageTabItem
604604

@@ -704,7 +704,7 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2013White" >
704704

705705
{% endtabs %}
706706

707-
![WPF Ribbon Backstage with BackStageTabItem](GettingStarted_images/wpf-ribbon-backstage-tabitem.jpg)
707+
![WPF Ribbon Backstage with BackStageTabItem](getting-started_images/wpf-ribbon-backstage-tabitem.jpg)
708708

709709
## Add BackStage separator
710710

@@ -811,7 +811,7 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2013White" >
811811

812812
{% endtabs %}
813813

814-
![WPF Ribbon Backstage with BackStageSeparator](GettingStarted_images/wpf-ribbon-backstage-with-separator.jpg)
814+
![WPF Ribbon Backstage with BackStageSeparator](getting-started_images/wpf-ribbon-backstage-with-separator.jpg)
815815

816816
## BackStage items position
817817

@@ -926,7 +926,7 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2019Colorful" Width="820" Height
926926

927927
{% endtabs %}
928928

929-
![Changinh BackStageItems Position in WPF Ribbon Backstage](GettingStarted_images/wpf-ribbon-backstage-item-position.jpg)
929+
![Changinh BackStageItems Position in WPF Ribbon Backstage](getting-started_images/wpf-ribbon-backstage-item-position.jpg)
930930

931931
N> [View sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-ribbon-examples/tree/main/Samples/Positioning-BackStageItems)
932932

@@ -1236,7 +1236,7 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
12361236

12371237
{% endtabs %}
12381238

1239-
![WPF Ribbon BackStage Placed in RibbonWindow as FullScreen](GettingStarted_images/wpf-ribbon-backstage-in-ribbonwindow.png)
1239+
![WPF Ribbon BackStage Placed in RibbonWindow as FullScreen](getting-started_images/wpf-ribbon-backstage-in-ribbonwindow.png)
12401240

12411241
#### Backstage placed in MS Window
12421242

@@ -1450,7 +1450,7 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
14501450

14511451
{% endtabs %}
14521452

1453-
![WPF Ribbon BackStage Placed in MS Window as FullScreen](GettingStarted_images/wpf-ribbon-backstage-in-ms-window.png)
1453+
![WPF Ribbon BackStage Placed in MS Window as FullScreen](getting-started_images/wpf-ribbon-backstage-in-ms-window.png)
14541454

14551455
#### Backstage placed in Placement target
14561456

@@ -1670,7 +1670,7 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
16701670

16711671
{% endtabs %}
16721672

1673-
![WPF Ribbon BackStage Placed in Target Element as FullScreen](GettingStarted_images/wpf-ribbon-backstage-target-placement.png)
1673+
![WPF Ribbon BackStage Placed in Target Element as FullScreen](getting-started_images/wpf-ribbon-backstage-target-placement.png)
16741674

16751675
### Place the backstage in BelowTab
16761676

@@ -1886,7 +1886,7 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
18861886

18871887
{% endtabs %}
18881888

1889-
![WPF Ribbon BackStage Placed in RibbonWindow as BelowTab](GettingStarted_images/wpf-ribbon-backstage-in-belowtab.png)
1889+
![WPF Ribbon BackStage Placed in RibbonWindow as BelowTab](getting-started_images/wpf-ribbon-backstage-in-belowtab.png)
18901890

18911891
#### Backstage placed in MS Window
18921892

@@ -2100,7 +2100,7 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
21002100

21012101
{% endtabs %}
21022102

2103-
![WPF Ribbon BackStage Placed in MS Window as BelowTab](GettingStarted_images/wpf-ribbon-backstage-belowtab-mswindow.png)
2103+
![WPF Ribbon BackStage Placed in MS Window as BelowTab](getting-started_images/wpf-ribbon-backstage-belowtab-mswindow.png)
21042104

21052105
#### Backstage placed in Placement target
21062106

@@ -2320,11 +2320,170 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
23202320

23212321
{% endtabs %}
23222322

2323-
![WPF Ribbon BackStage Placed in Target Element as BelowTab](GettingStarted_images/wpf-ribbon-backstage-belowtab-placement.png)
2323+
![WPF Ribbon BackStage Placed in Target Element as BelowTab](getting-started_images/wpf-ribbon-backstage-belowtab-placement.png)
23242324

23252325
N> View [sample](https://github.com/SyncfusionExamples/How-to-set-placement-type-and-placement-target-for-Backstage) in GitHub.
23262326

2327-
## Customize the BackStageButton visibility
2327+
## Customization of BackStageButton
2328+
2329+
The BackStage button in Ribbon can be customized to change its header text, apply a custom header template, or control its visibility.
2330+
2331+
### BackStageHeader
2332+
2333+
The `BackStageHeader` property allows you to set the header text for the Backstage button in the Ribbon. By default, this header is displayed as File in plain text.
2334+
2335+
{% tabs %}
2336+
2337+
{% highlight XAML %}
2338+
2339+
<syncfusion:RibbonWindow x:Class="IconSupport_BackStageButton.MainWindow"
2340+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2341+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
2342+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
2343+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
2344+
xmlns:local="clr-namespace:IconSupport_BackStageButton"
2345+
mc:Ignorable="d"
2346+
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
2347+
syncfusion:SfSkinManager.VisualStyle="Windows11Light"
2348+
Title="MainWindow" Height="450" Width="800"
2349+
WindowStartupLocation="CenterScreen">
2350+
<Grid>
2351+
<syncfusion:Ribbon x:Name="_ribbon" VerticalAlignment="Top" BackStageHeader="App">
2352+
<syncfusion:RibbonTab Caption="HOME" IsChecked="True">
2353+
<syncfusion:RibbonBar Name="New" Width="120" Header="New">
2354+
<syncfusion:RibbonButton SizeForm="Large" Label="New Email"/>
2355+
<syncfusion:DropDownButton SizeForm="Large" Label="New Items">
2356+
<syncfusion:DropDownMenuItem Header="E-mail Message"/>
2357+
<syncfusion:DropDownMenuItem Header="Appointment"/>
2358+
<syncfusion:DropDownMenuItem Header="Meeting"/>
2359+
<syncfusion:DropDownMenuItem Header="Contact"/>
2360+
<syncfusion:DropDownMenuItem Header="Task"/>
2361+
</syncfusion:DropDownButton>
2362+
</syncfusion:RibbonBar>
2363+
<syncfusion:RibbonBar Name="Delete" Width="130" Header="Delete">
2364+
<syncfusion:RibbonButton Label="Ignore"/>
2365+
<syncfusion:RibbonButton Label="Delete" SizeForm="Large"/>
2366+
</syncfusion:RibbonBar>
2367+
<syncfusion:RibbonBar Name="Respond" Width="200" Header="Respond">
2368+
<syncfusion:RibbonButton Label="Reply" SizeForm="Large"/>
2369+
<syncfusion:RibbonButton Label="Reply All" SizeForm="Large"/>
2370+
<syncfusion:RibbonButton Label="Forward" SizeForm="Large"/>
2371+
<syncfusion:RibbonButton Label="Meeting"/>
2372+
</syncfusion:RibbonBar>
2373+
<syncfusion:RibbonBar Name="Quicksteps" Width="90" Header="Quick Steps"/>
2374+
<syncfusion:RibbonBar Name="Find" Width="90" Header="Find"/>
2375+
</syncfusion:RibbonTab>
2376+
<syncfusion:RibbonTab Caption="SEND/RCEIVE" IsChecked="False"/>
2377+
<syncfusion:RibbonTab Caption="FOLDER" IsChecked="False"/>
2378+
<syncfusion:RibbonTab Caption="VIEW" IsChecked="False"/>
2379+
</syncfusion:Ribbon>
2380+
</Grid>
2381+
</syncfusion:RibbonWindow>
2382+
2383+
{% endhighlight %}
2384+
2385+
{% tabs %}
2386+
2387+
![WPF Ribbon BackStage Header](getting-started_images/wpf-ribbon-backstageheader.png)
2388+
2389+
### BackstageHeaderTemplate
2390+
2391+
The `BackStageHeaderTemplate` property allows you to customize the Backstage header by applying a DataTemplate. This enables you to define a custom layout, such as adding an icon and text.
2392+
2393+
The following code example illustrates how to customize the Backstage header.
2394+
2395+
{% endtabs %}
2396+
2397+
{% highlight XAML %}
2398+
2399+
<syncfusion:RibbonWindow x:Class="IconSupport_BackStageButton.MainWindow"
2400+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2401+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
2402+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
2403+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
2404+
xmlns:local="clr-namespace:IconSupport_BackStageButton"
2405+
mc:Ignorable="d"
2406+
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
2407+
syncfusion:SfSkinManager.VisualStyle="Windows11Light"
2408+
Title="MainWindow" Height="450" Width="800"
2409+
WindowStartupLocation="CenterScreen">
2410+
<syncfusion:RibbonWindow.Resources>
2411+
<DataTemplate x:Key="FileHeaderTemplate">
2412+
<StackPanel Orientation="Horizontal">
2413+
<Path
2414+
Width="15"
2415+
Height="15"
2416+
Margin="0,0,0,0"
2417+
Data="M21,7.9999917L21,27.000005C21,28.103001,20.103027,29.000005,19,29.000005L8,29.000005 8,29.999991 22,29.999991 22,7.9999917z
2418+
M18,5.0000043L18,24.000001C18,25.102999,17.103,26.000001,16,26.000001L5,26.000001 5,27.000005 6.0000002,27.000005 8,26.999991
2419+
19,27.000005 19,7.9999917 19,5.9999917 19,5.0000043z
2420+
M7,3.414L3.3819871,7.0320127 7,7.0320127z
2421+
M9,1.9999999L9,9.0320108 2.0000004,9.0320108 2.0000004,24.000001 16,24.000001 16,5.0000043 16,3.0000044 16,1.9999999z
2422+
M7.586,0L16,0C17.103,0,18,0.89700007,18,1.9999999L18,3.0000044 19,3.0000044C20.103027,3.0000045,21,3.8969772,21,5.0000043L21,5.9999917
2423+
22,5.9999917C23.103001,5.9999917,24,6.8969915,24,7.9999917L24,29.999991C24,31.102992,23.103001,31.999991,22,31.999991L8,31.999991
2424+
C6.8970001,31.999991,6,31.102992,6.0000002,29.999991L6.0000002,29.000005 5,29.000005C3.8969727,29.000005,3,28.103001,3.0000001,27.000005
2425+
L3.0000001,26.000001 2.0000004,26.000001C0.89700007,26.000001,0,25.102999,0,24.000001L0,7.5860002z"
2426+
Fill="{sfskin:ThemeResource ThemeKey={sfskin:ThemeKey Key=PrimaryBackground}}"
2427+
RenderTransformOrigin="0.5,0.5"
2428+
Stretch="Uniform">
2429+
<Path.RenderTransform>
2430+
<TransformGroup>
2431+
<TransformGroup.Children>
2432+
<RotateTransform Angle="0" />
2433+
<ScaleTransform ScaleX="1" ScaleY="1" />
2434+
</TransformGroup.Children>
2435+
</TransformGroup>
2436+
</Path.RenderTransform>
2437+
</Path>
2438+
<TextBlock
2439+
Text="{Binding}"
2440+
FontWeight="Bold"
2441+
Margin="4,0,0,0"
2442+
HorizontalAlignment="Center"
2443+
VerticalAlignment="Center" />
2444+
</StackPanel>
2445+
</DataTemplate>
2446+
</syncfusion:RibbonWindow.Resources>
2447+
<Grid>
2448+
<syncfusion:Ribbon x:Name="_ribbon" VerticalAlignment="Top" BackStageHeaderTemplate="{StaticResource FileHeaderTemplate}" BackStageHeader="App">
2449+
<syncfusion:RibbonTab Caption="HOME" IsChecked="True">
2450+
<syncfusion:RibbonBar Name="New" Width="120" Header="New">
2451+
<syncfusion:RibbonButton SizeForm="Large" Label="New Email"/>
2452+
<syncfusion:DropDownButton SizeForm="Large" Label="New Items">
2453+
<syncfusion:DropDownMenuItem Header="E-mail Message"/>
2454+
<syncfusion:DropDownMenuItem Header="Appointment"/>
2455+
<syncfusion:DropDownMenuItem Header="Meeting"/>
2456+
<syncfusion:DropDownMenuItem Header="Contact"/>
2457+
<syncfusion:DropDownMenuItem Header="Task"/>
2458+
</syncfusion:DropDownButton>
2459+
</syncfusion:RibbonBar>
2460+
<syncfusion:RibbonBar Name="Delete" Width="130" Header="Delete">
2461+
<syncfusion:RibbonButton Label="Ignore"/>
2462+
<syncfusion:RibbonButton Label="Delete" SizeForm="Large"/>
2463+
</syncfusion:RibbonBar>
2464+
<syncfusion:RibbonBar Name="Respond" Width="200" Header="Respond">
2465+
<syncfusion:RibbonButton Label="Reply" SizeForm="Large"/>
2466+
<syncfusion:RibbonButton Label="Reply All" SizeForm="Large"/>
2467+
<syncfusion:RibbonButton Label="Forward" SizeForm="Large"/>
2468+
<syncfusion:RibbonButton Label="Meeting"/>
2469+
</syncfusion:RibbonBar>
2470+
<syncfusion:RibbonBar Name="Quicksteps" Width="90" Header="Quick Steps"/>
2471+
<syncfusion:RibbonBar Name="Find" Width="90" Header="Find"/>
2472+
</syncfusion:RibbonTab>
2473+
<syncfusion:RibbonTab Caption="SEND/RCEIVE" IsChecked="False"/>
2474+
<syncfusion:RibbonTab Caption="FOLDER" IsChecked="False"/>
2475+
<syncfusion:RibbonTab Caption="VIEW" IsChecked="False"/>
2476+
</syncfusion:Ribbon>
2477+
</Grid>
2478+
</syncfusion:RibbonWindow>
2479+
2480+
{% endhighlight %}
2481+
2482+
{% endtabs %}
2483+
2484+
![WPF Ribbon BackStageButton header template support by using BackStageHeaderTemplate property](getting-started_images/wpf-ribbon-backstagebutton-template.png)
2485+
2486+
### BackStageButton visibility
23282487

23292488
Ribbon control allows to show or hide the `BackStageButton` by using its `Visibility` property.
23302489

@@ -2404,5 +2563,4 @@ private void MainWindow_Loaded(object sender, RoutedEventArgs e)
24042563

24052564
{% endtabs %}
24062565

2407-
![WPF Ribbon BackStageButton collapsed by using Visibility property](GettingStarted_images/wpf-ribbon-backstagebutton-visibility.png)
2408-
2566+
![WPF Ribbon BackStageButton collapsed by using Visibility property](getting-started_images/wpf-ribbon-backstagebutton-visibility.png)

‎wpf/Ribbon/getting-started_images/wpf-ribbon-backstagebutton-template.png‎

17.5 KB
Loading

‎wpf/Ribbon/getting-started_images/wpf-ribbon-backstageheader.png‎

18 KB
Loading

0 commit comments

Comments
 (0)