Skip to content

Commit c42efc1

Browse files
harinath-2699harinath-2699
committed
Changes done as per the new structure
1 parent 68a3b6c commit c42efc1

File tree

3 files changed

+161
-70
lines changed

3 files changed

+161
-70
lines changed

‎wpf/Ribbon/Backstage.md‎

Lines changed: 161 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2324,7 +2324,166 @@ When the [`PlacementType`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows
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+
{% tabs %}
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,72 +2563,4 @@ private void MainWindow_Loaded(object sender, RoutedEventArgs e)
24042563

24052564
{% endtabs %}
24062565

2407-
![WPF Ribbon BackStageButton collapsed by using Visibility property](getting-started_images/wpf-ribbon-backstagebutton-visibility.png)
2408-
2409-
## Customize the Backstage Header
2410-
2411-
You can customize the `BackstageButton` header in Ribbon by using the `BackStageHeaderTemplate` property. This property accepts a DataTemplate to define the header layout, such as adding an icon and text.
2412-
2413-
The following code example illustrates how to customize the BackstageButton header.
2414-
2415-
{% tabs %}
2416-
2417-
{% highlight XAML %}
2418-
2419-
<syncfusion:RibbonWindow x:Class="IconSupport_BackStageButton.MainWindow"
2420-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2421-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
2422-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
2423-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
2424-
xmlns:local="clr-namespace:IconSupport_BackStageButton"
2425-
mc:Ignorable="d"
2426-
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
2427-
syncfusion:SfSkinManager.VisualStyle="Windows11Light"
2428-
Title="MainWindow" Height="450" Width="800"
2429-
WindowStartupLocation="CenterScreen">
2430-
<syncfusion:RibbonWindow.Resources>
2431-
<DataTemplate x:Key="FileHeaderTemplate">
2432-
<StackPanel Orientation="Horizontal">
2433-
<Image Width="16" Height="16" Source="\Image\10782771.png"/>
2434-
<TextBlock Text="File" FontWeight="Bold"/>
2435-
</StackPanel>
2436-
</DataTemplate>
2437-
</syncfusion:RibbonWindow.Resources>
2438-
<Grid>
2439-
<syncfusion:Ribbon x:Name="_ribbon" VerticalAlignment="Top" BackStageHeaderTemplate="{StaticResource FileHeaderTemplate}">
2440-
<syncfusion:RibbonTab Caption="HOME" IsChecked="True">
2441-
<syncfusion:RibbonBar Name="New" Width="120" Header="New">
2442-
<syncfusion:RibbonButton SizeForm="Large" Label="New Email"/>
2443-
<syncfusion:DropDownButton SizeForm="Large" Label="New Items">
2444-
<syncfusion:DropDownMenuItem Header="E-mail Message"/>
2445-
<syncfusion:DropDownMenuItem Header="Appointment"/>
2446-
<syncfusion:DropDownMenuItem Header="Meeting"/>
2447-
<syncfusion:DropDownMenuItem Header="Contact"/>
2448-
<syncfusion:DropDownMenuItem Header="Task"/>
2449-
</syncfusion:DropDownButton>
2450-
</syncfusion:RibbonBar>
2451-
<syncfusion:RibbonBar Name="Delete" Width="130" Header="Delete">
2452-
<syncfusion:RibbonButton Label="Ignore"/>
2453-
<syncfusion:RibbonButton Label="Delete" SizeForm="Large"/>
2454-
</syncfusion:RibbonBar>
2455-
<syncfusion:RibbonBar Name="Respond" Width="200" Header="Respond">
2456-
<syncfusion:RibbonButton Label="Reply" SizeForm="Large"/>
2457-
<syncfusion:RibbonButton Label="Reply All" SizeForm="Large"/>
2458-
<syncfusion:RibbonButton Label="Forward" SizeForm="Large"/>
2459-
<syncfusion:RibbonButton Label="Meeting"/>
2460-
</syncfusion:RibbonBar>
2461-
<syncfusion:RibbonBar Name="Quicksteps" Width="90" Header="Quick Steps"/>
2462-
<syncfusion:RibbonBar Name="Find" Width="90" Header="Find"/>
2463-
</syncfusion:RibbonTab>
2464-
<syncfusion:RibbonTab Caption="SEND/RCEIVE" IsChecked="False"/>
2465-
<syncfusion:RibbonTab Caption="FOLDER" IsChecked="False"/>
2466-
<syncfusion:RibbonTab Caption="VIEW" IsChecked="False"/>
2467-
</syncfusion:Ribbon>
2468-
</Grid>
2469-
</syncfusion:RibbonWindow>
2470-
2471-
{% endhighlight %}
2472-
2473-
{% endtabs %}
2474-
2475-
![WPF Ribbon BackStageButton header template support by using BackStageHeaderTemplate property](getting-started_images/wpf-ribbon-backstagebutton-template.png)
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‎

-87 Bytes
Loading

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

18 KB
Loading

0 commit comments

Comments
 (0)