Articles in this section
Category / Section

How to display ApplicationMenu in WPF Ribbon control for Office2013 style?

7 mins read

You can display the ApplicationMenu instead of BackStage for Office2013 style by merging the ApplicationMenu style with Office2013 style in App.Xaml and modified the layout of ApplicationMenu to BackStageButton in WPF Ribbon control.

 

MainWindow.Xaml

<syncfusion:RibbonWindow
    x:Class="WPFRibbon.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WPFRibbon"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    Title="MainWindow"
    Width="525"
    Height="350"
    Style="{StaticResource Office2013RibbonWindowStyle}"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <syncfusion:Ribbon
            x:Name="ribbon"
            VerticalAlignment="Top"
            Style="{StaticResource Office2013RibbonStyle}">
            <!--  Applicaton Menu  -->
            <syncfusion:Ribbon.ApplicationMenu>
                <syncfusion:ApplicationMenu
                    Width="65"
                    Height="38"
                    syncfusion:Ribbon.KeyTip="F"
                    ApplicationButtonImage="/Resources/syncfusion.png"
                    IsPopupOpen="False">
 
                    <syncfusion:ApplicationMenu.ToolTip>
                        <syncfusion:ScreenTip
                            MinWidth="150"
                            Description="Office Button"
                            ImageSource="/Resources/AppMenuImage.png"
                            VerticalOffset="10">
                            <TextBlock Width="180" TextWrapping="Wrap">
                                Click here to open, save or print, and to see everything you can do with your document
                            </TextBlock>
                        </syncfusion:ScreenTip>
                    </syncfusion:ApplicationMenu.ToolTip>
                    <!--  Application Recent Document list Area  -->
                    <syncfusion:ApplicationMenu.MenuItems>
<TextBlock MinWidth="300" FontWeight="Bold">Create New Outlook Item</TextBlock>
                        <Separator Padding="0" />
                    </syncfusion:ApplicationMenu.MenuItems>
                    <syncfusion:SimpleMenuButton syncfusion:Ribbon.KeyTip="M" Label="New Mail Message" />
                    <syncfusion:SimpleMenuButton Label="Send" />
                    <Separator Margin="40,0,0,0" />
                    <syncfusion:SimpleMenuButton
                        syncfusion:Ribbon.KeyTip="S"
                        syncfusion:RibbonCommandManager.SynchronizedItem="Save"
                        Label="Save" />
                </syncfusion:ApplicationMenu>
            </syncfusion:Ribbon.ApplicationMenu>
            <syncfusion:RibbonTab
                x:Name="ribbontab1"
                Caption="Home"
                IsChecked="True">
                <syncfusion:RibbonBar Header="File">
                    <syncfusion:RibbonButton Content="Copy" />
                </syncfusion:RibbonBar>
                <syncfusion:RibbonBar
                    Name="Find"
                    Width="170"
                    Header="Find">
               </syncfusion:RibbonBar>
            </syncfusion:RibbonTab>
        </syncfusion:Ribbon>
    </Grid>
</syncfusion:RibbonWindow>

 

App.Xaml

<Style x:Key="Office2013RibbonStyle" TargetType="{x:Type local:Ribbon}">
                <Setter Property="BackStageColor" Value="{StaticResource RibbonBackStageColor}" />
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="Panel.ZIndex" Value="1000" />
                <Setter Property="TabGroupLabelAlignment" Value="Center" />
                <Setter Property="FocusManager.IsFocusScope" Value="True" />
                <Setter Property="ContextAdornerStyle" Value="{StaticResource Office2013ContextAdornerStyle}" />
                <Setter Property="BackStageButton" Value="{StaticResource BackStageOffice2013Key}" />
                <Setter Property="Height" Value="95" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <local:TabPanel Name="TabPanel" SeparatorColor="{StaticResource Blue.TapPanel.SeparatorColor}" />
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background" Value="{StaticResource Office2013RibbonBackgroundBrush}" />
                <Setter Property="BorderBrush" Value="{StaticResource RibbonBorderBrush}" />
                <Style.Triggers>
                    <Trigger Property="RibbonState" Value="Normal">
                        <Setter Property="Template" Value="{StaticResource Normal}" />
                    </Trigger>
                    <Trigger Property="RibbonState" Value="Adorner">
                        <Setter Property="Height" Value="0" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type local:Ribbon}">
                                    <AdornerDecorator
                                        Name="PART_AdornerDecorator"
                                        Margin="0,-53,0,0"
                                        Panel.ZIndex="100"
                                        DockPanel.Dock="Top">
                                        <Border>
                                            <Grid x:Name="LayoutGrid" ClipToBounds="True">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition>
                                                        <RowDefinition.Style>
                                                            <Style>
                                                                <Setter Property="RowDefinition.Height" Value="53" />
                                                                <Style.Triggers>
                                                                    <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                                                    <Setter Property="RowDefinition.Height" Value="73" />
                                                                    </Trigger>
                                                                    <!--<DataTrigger Binding="{Binding IsQATBelow,RelativeSource={RelativeSource AncestorType={x:Type local:Ribbon}}}" Value="True">
                                                                <Setter Property="RowDefinition.Height" Value="53"/>
                                                            </DataTrigger>-->
                                                                </Style.Triggers>
                                                            </Style>
                                                        </RowDefinition.Style>
                                                    </RowDefinition>
                                                </Grid.RowDefinitions>
                                                <DockPanel
                                                    x:Name="dockPanel"
                                                    Grid.Row="0"
                                                    Panel.ZIndex="200">
                                                    <local:RibbonWindowPanel
                                                        x:Name="PART_RibbonWindowPanel"
                                                        Panel.ZIndex="100"
                                                        DockPanel.Dock="Top">
                                                        <Border
                                                            x:Name="PART_TitleBorder"
                                                            Width="{TemplateBinding ActualWidth}"
                                                            Height="30"
                                                            Margin="0,0,0,-20"
                                                            Visibility="Collapsed" />
          <!--Display ApplicationMenu instead of BackStageButton-->
             <ContentPresenter Name="PART_ApplicationMenu" Margin="0,20,0,0" Width="65"
                     Content="{TemplateBinding ApplicationMenu}" ContentSource="ApplicationMenu">
                          <ContentPresenter.Style>
                               <Style>
                                    <Setter Property="FrameworkElement.Height" Value="38" />
                                    <Setter Property="FrameworkElement.Width" Value="38" />
                                         <Style.Triggers>
                                              <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                                    <Setter Property="FrameworkElement.Height" Value="48" />
                                                    <Setter Property="FrameworkElement.Width" Value="48" />
                                                </Trigger>
                                           </Style.Triggers>
                                   </Style>
                              </ContentPresenter.Style>
                   </ContentPresenter>
                   <ContentPresenter Margin="30,0,0,0" HorizontalAlignment="Center"
                        shell:WindowChrome.IsHitTestVisibleInChrome="True"
                        Content="{TemplateBinding QuickAccessToolBar}"
                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsQATBelow, Converter={StaticResource BoolInvertConverter}}">
                             <ContentPresenter.Style>
                                  <Style>
                                     <Setter Property="FrameworkElement.Height" Value="31" />
                                     <Style.Triggers>
                                        <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                           <Setter Property="FrameworkElement.Height" Value="35" />
                                        </Trigger>
                                      </Style.Triggers>
                                   </Style>
                               </ContentPresenter.Style>
                    </ContentPresenter>
           </local:RibbonWindowPanel>
            <Border Width="5" Height="0" Margin="0,-14,0,0" DockPanel.Dock="Left" />
            <Border Width="41" Height="0" Margin="0,-14,0,0" Panel.ZIndex="11"
              BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1"
              DockPanel.Dock="Left" />
             <Border Width="5" Height="0.02" Margin="0,-14,0,0" Panel.ZIndex="12"
                DockPanel.Dock="Right" />
              <Border Panel.ZIndex="12" Background="{StaticResource TransparentBrush}"
                DockPanel.Dock="Right">
                  <Border.Style>
                     <Style>
                        <Setter Property="Border.Margin" Value="0,-23,0,1" />
                        <Setter Property="Border.Height" Value="28" />
                      </Style>
                   </Border.Style>
                   <ContentPresenter ContentSource="TabPanelItem" />
             </Border>
             <Border x:Name="ribbonTabBorder" Panel.ZIndex="10"
               BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
             DockPanel.Dock="Bottom">
             <Border.Style>
                <Style>
                  <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Visible">
                          <Setter Property="Border.Margin" Value="17,-25,0,2" />
                     </DataTrigger>
                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Collapsed">
                             <Setter Property="Border.Margin" Value="-46,-25,0,2" />
                     </DataTrigger>
                  </Style.Triggers>
               </Style>
        </Border.Style>
     <ItemsPresenter />
    </Border>
  </DockPanel>
<Popup x:Name="Part_AdornerPopup" AllowsTransparency="True" ClipToBounds="True"
   IsOpen="False" PlacementTarget="{Binding ElementName=dockPanel}" StaysOpen="False">
         <Border MinHeight="92" Margin="0,7,0,15">
                <Border x:Name="AdornerTabPanelBorder" Padding="0"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1">
                    <Grid>
                          <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                           </Grid.ColumnDefinitions>
                              <local:RibbonTabItemsControl DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.DisplayMemberPath}"
Focusable="False"  ItemContainerStyle="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemContainerStyle}"
 ItemContainerStyleSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemContainerStyleSelector}" ItemStringFormat="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemStringFormat}"
ItemTemplate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemTemplate}" ItemTemplateSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemTemplateSelector}"
ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.Items}">
                                <local:RibbonTabItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <local:RibbonLayoutPanel />
                                     </ItemsPanelTemplate>
                                 </local:RibbonTabItemsControl.ItemsPanel>
                               </local:RibbonTabItemsControl>
  <Grid Grid.Column="1" HorizontalAlignment="Right">
        <local:RibbonToggleButton x:Name="ToggleButton" Width="29" Height="22"
              HorizontalAlignment="Right" VerticalAlignment="Bottom" Panel.ZIndex="12"
                 local:Ribbon.IsQATItem="False"  Style="{DynamicResource RibbonToggleButtonStyle}"
                   Visibility="{TemplateBinding MinimizeButtonVisibility}" />
    </Grid>
   </Grid>
      <Border.Style>
          <Style>
             <Style.Triggers>
                  <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                        <Setter Property="Border.Margin" Value="0,-3,0,0" />
                   </Trigger>
              </Style.Triggers>
            </Style>
      </Border.Style>
    </Border>
    </Border>
   </Popup>
 </Grid>
</Border>
</AdornerDecorator>
<ControlTemplate.Triggers>
     <Trigger Property="componentModel:DesignerProperties.IsInDesignMode" Value="True">
              <Setter TargetName="PART_AdornerDecorator" Property="Margin" Value="0" />
      </Trigger>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=SelectedTabItem.HasContextTabGroup}" Value="True">
            <Setter TargetName="AdornerTabPanelBorder" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Converter={StaticResource colorToBrushConverter}, Path=SelectedContextTabGroupBackColor}" />
            <Setter TargetName="AdornerTabPanelBorder" Property="BorderThickness" Value="0,1,0,1" />
      </DataTrigger>
        <MultiTrigger>
           <MultiTrigger.Conditions>
                <Condition Property="RibbonState" Value="Adorner" />
                <Condition Property="IsQATBelow" Value="True" />
                 <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
            </MultiTrigger.Conditions>
       </MultiTrigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
</Trigger>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="RibbonState" Value="Normal" />
         <Condition Property="IsQATBelow" Value="True" />
     </MultiTrigger.Conditions>
            <Setter Property="Height" Value="125" />
             <Setter Property="Template">
             <Setter.Value>
                  <ControlTemplate TargetType="{x:Type local:Ribbon}">
                      <AdornerDecorator Name="PART_AdornerDecorator" Margin="0,-53,0,0"
                             Panel.ZIndex="100" DockPanel.Dock="Top">
             <Border>
                  <Grid ClipToBounds="True">
                       <Grid.RowDefinitions>
                         <RowDefinition>
                             <RowDefinition.Style>
                               <Style>
                                    <Setter Property="RowDefinition.Height" Value="53" />
                                    <Style.Triggers>
                                       <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                            <Setter Property="RowDefinition.Height" Value="73" />
                                        </Trigger>
                                     </Style.Triggers>
                                 </Style>
                                </RowDefinition.Style>
                               </RowDefinition>
                       <RowDefinition>
                           <RowDefinition.Style>
                            <Style>
                                <Setter Property="RowDefinition.Height" Value="95" />
                                <Style.Triggers>
                                  <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                       <Setter Property="RowDefinition.Height" Value="125" />
                                   </Trigger>
                                  </Style.Triggers>
                             </Style>
                             </RowDefinition.Style>
                         </RowDefinition>
                         <RowDefinition>
                            <RowDefinition.Style>
                               <Style>
                                  <Setter Property="RowDefinition.Height" Value="30" />
                                  <Style.Triggers>
                                      <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                           <Setter Property="RowDefinition.Height" Value="41" />
                                      </Trigger>
                                   </Style.Triggers>
                                </Style>
                                </RowDefinition.Style>
                              </RowDefinition>
                            </Grid.RowDefinitions>
                         <DockPanel Grid.Row="0" Panel.ZIndex="200">
                           <local:RibbonWindowPanel x:Name="PART_RibbonWindowPanel"
                               Panel.ZIndex="100" DockPanel.Dock="Top">
                                 <Border x:Name="PART_TitleBorder" Width="{TemplateBinding ActualWidth}"
                                      Height="30" Margin="0,0,0,-20 Visibility="Collapsed" />
                                       <ContentPresenter Content="{TemplateBinding BackStageButton}" />
                                          </local:RibbonWindowPanel>
                                             <Border Width="5" Height="0" Margin="0,-14,0,0"
                                                        DockPanel.Dock="Left" />
                                                <Border Width="41" Height="0" Margin="0,-14,0,0"
                                                  Panel.ZIndex="11" BorderBrush="{TemplateBinding BorderBrush}"
                                               BorderThickness="0,0,0,1" DockPanel.Dock="Left" />
         <Border Width="5" Height="0.02" Margin="0,-14,0,0" Panel.ZIndex="12"   
                        DockPanel.Dock="Right" />
              <Border Height="23" Margin="0,-23,0,1" Panel.ZIndex="12"
                  Background="{StaticResource TransparentBrush}" DockPanel.Dock="Right">
                     <ContentPresenter ContentSource="TabPanelItem" />
           </Border>
         <Border Panel.ZIndex="10" BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}" DockPanel.Dock="Bottom">
                    <ItemsPresenter />
                       <Border.Style>
                         <Style>
                            <Style.Triggers>
                              <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Visible">
                                  <Setter Property="Border.Margin" Value="17,-25,0,1" />
                              </DataTrigger>
                              <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Collapsed">
                                  <Setter Property="Border.Margin" Value="-46,-25,0,1" />
                               </DataTrigger>
                              </Style.Triggers>
                        </Style>
                      </Border.Style>
                     </Border>
        </DockPanel>
        <Border x:Name="ribBorder" Grid.Row="1" Margin="0,-1,0,-6" Padding="0"
            Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding 
                     BorderBrush}" BorderThickness="0,1,0,1">
              <Grid>
                   <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                   </Grid.ColumnDefinitions>
                    <local:RibbonTabItemsControl DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.DisplayMemberPath}"
                       Focusable="False" ItemContainerStyle="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemContainerStyle}"
                       ItemContainerStyleSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemContainerStyleSelector}"
                       ItemStringFormat="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemStringFormat}"
                       ItemTemplate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemTemplate}"
                       ItemTemplateSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.ItemTemplateSelector}"
                       ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTabItem.Items}">
                     <local:RibbonTabItemsControl.ItemsPanel>
                          <ItemsPanelTemplate>
                                 <local:RibbonLayoutPanel />
                           </ItemsPanelTemplate>
                        </local:RibbonTabItemsControl.ItemsPanel>
                     </local:RibbonTabItemsControl>
                    <Grid Grid.Column="1" HorizontalAlignment="Right">
                        <local:RibbonToggleButton   x:Name="ToggleButton"
                              Width="29" Height="22" HorizontalAlignment="Right"
                              VerticalAlignment="Bottom" Panel.ZIndex="12"
                              Style="{DynamicResource RibbonToggleButtonStyle}"
                              Visibility="{TemplateBinding MinimizeButtonVisibility}" />
                      </Grid>
                    </Grid>
        </Border>
        <Border Name="PART_QAT" Grid.Row="2" Background="Transparent">
           <Border.Style>
               <Style TargetType="Border">
                  <Setter Property="Margin" Value="0,6,0,0" />
                   <Style.Triggers>
                      <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                          <Setter Property="Margin" Value="0,1,0,0" />
                      </Trigger>
                    </Style.Triggers>
                </Style>
             </Border.Style>
          <ContentPresenter HorizontalAlignment="Left" Content="{TemplateBinding QuickAccessToolBar}" DockPanel.Dock="Top" />
        </Border>
       </Grid>
       </Border>
</AdornerDecorator>
<ControlTemplate.Triggers>
    <Trigger Property="RibbonState" Value="Adorner">
         <Setter TargetName="PART_QAT" Property="Visibility" Value="Collapsed" />
     </Trigger>
      <Trigger Property="componentModel:DesignerProperties.IsInDesignMode" Value="True">
           <Setter TargetName="PART_AdornerDecorator" Property="Margin" Value="0" />
       </Trigger>
       <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:RibbonWindow}}, Path=WindowState}" Value="Maximized">
            <Setter TargetName="PART_AdornerDecorator" Property="Margin" Value="0,-53,0,0" />
         </DataTrigger>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=SelectedTabItem.HasContextTabGroup}" Value="True">
              <Setter TargetName="ribBorder" Property="BorderThickness" Value="0,0.6,0,0" />
              <Setter TargetName="ribBorder" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Converter={StaticResource colorToBrushConverter}, Path=SelectedContextTabGroupBackColor}" />
          </DataTrigger>
          <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                 <Setter Property="Height" Value="175" />
           </Trigger>
         </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
</MultiTrigger>
 <MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="RibbonState" Value="Hide" />
        <Condition Property="IsQATBelow" Value="False" />
     </MultiTrigger.Conditions>
            <Setter Property="Height" Value="0" />
            <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Ribbon}">
                  <AdornerDecorator Name="PART_AdornerDecorator" Margin="0,-53,0,0"
                       Panel.ZIndex="100" DockPanel.Dock="Top">
                      <Border>
                         <Grid ClipToBounds="True">
                          <Grid.RowDefinitions>
                             <RowDefinition>
                                 <RowDefinition.Style>
                                   <Style>
                                       <Setter Property="RowDefinition.Height" Value="53" />
                                       <Style.Triggers>
                                          <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                                <Setter Property="RowDefinition.Height" Value="73" />
                                          </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                  </RowDefinition.Style>
                              </RowDefinition>
                           </Grid.RowDefinitions>
                <DockPanel Grid.Row="0" Panel.ZIndex="200">
                   <local:RibbonWindowPanel x:Name="PART_RibbonWindowPanel"
                        Panel.ZIndex="100" DockPanel.Dock="Top">
                         <Border x:Name="PART_TitleBorder" Width="{TemplateBinding ActualWidth}"
                                Height="30" Margin="0,0,0,-20" Visibility="Collapsed" />
                              <ContentPresenter Name="PART_ApplicationMenu" Margin="0,20,0,0" 
                                       Width="65" Content="{TemplateBinding ApplicationMenu}"
                                       ContentSource="ApplicationMenu">
                                  <ContentPresenter.Style>
                                     <Style>
                                       <Setter Property="FrameworkElement.Height" Value="38" />
                                       <Setter Property="FrameworkElement.Width" Value="38" />
                                       <Style.Triggers>
                                           <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                              <Setter Property="FrameworkElement.Height" Value="48" />
                                              <Setter Property="FrameworkElement.Width" Value="48" />
                                            </Trigger>
                                         </Style.Triggers>
                                      </Style>
                             </ContentPresenter.Style>
                          </ContentPresenter>
          <ContentPresenter Margin="30,0,0,0" HorizontalAlignment="Center"
                 shell:WindowChrome.IsHitTestVisibleInChrome="True"
                Content="{TemplateBinding QuickAccessToolBar}">
                <ContentPresenter.Style>
                   <Style>
                     <Setter Property="FrameworkElement.Height" Value="31" />
                     <Style.Triggers>
                         <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                            <Setter Property="FrameworkElement.Height" Value="35" />
                          </Trigger>
                      </Style.Triggers>
                     </Style>
                  </ContentPresenter.Style>
              </ContentPresenter>
         </local:RibbonWindowPanel>
    <Border Width="5" Height="0" Margin="0,-14,0,0" DockPanel.Dock="Left" />
     <Border Width="41" Height="0" Margin="0,-14,0,0" Panel.ZIndex="11"
         BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1"
         DockPanel.Dock="Left" />
      <Border Width="5" Height="0.02" Margin="0,-14,0,0" Panel.ZIndex="12"
           DockPanel.Dock="Right" />
       <Border Panel.ZIndex="12" Background="{StaticResource TransparentBrush}"
              DockPanel.Dock="Right">
        <Border.Style>
             <Style>
                <Setter Property="Border.Margin" Value="0,-23,0,1" />
                <Setter Property="Border.Height" Value="23" />
                 <Style.Triggers>
                   <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                          <Setter Property="Border.Margin" Value="0,-39,0,1" />
                          <Setter Property="Border.Height" Value="40" />
                    </Trigger>
                  </Style.Triggers>
                 </Style>
               </Border.Style>
      <ContentPresenter ContentSource="TabPanelItem" />
    </Border>
<Border x:Name="ribbonTabBorder" Panel.ZIndex="10"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" DockPanel.Dock="Bottom">
     <ItemsPresenter />
     <Border.Style>
        <Style>
         <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Visible">
                <Setter Property="Border.Margin" Value="17,-25,0,2" />
            </DataTrigger>
           <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Collapsed">
               <Setter Property="Border.Margin" Value="-46,-25,0,2" />
             </DataTrigger>
          </Style.Triggers>
   </Style>
   </Border.Style>
  </Border>
 </DockPanel>
 </Grid>
 </Border>
</AdornerDecorator>
<ControlTemplate.Triggers>
   <Trigger Property="componentModel:DesignerProperties.IsInDesignMode" Value="True">
           <Setter TargetName="PART_AdornerDecorator" Property="Margin" Value="0" />
    </Trigger>
    <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
         <Setter TargetName="ribbonTabBorder" Property="Margin" Value="17,-27,0,2" />
     </Trigger>
     </ControlTemplate.Triggers>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
  </MultiTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:RibbonWindow}}, Path=WindowState}" Value="Maximized">
        <Setter Property="Margin" Value="0,2,0,0" />
</DataTrigger>
 <MultiTrigger>
     <MultiTrigger.Conditions>
         <Condition Property="RibbonState" Value="Hide" />
         <Condition Property="IsQATBelow" Value="True" />
      </MultiTrigger.Conditions>
             <Setter Property="Height" Value="30" />
             <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:Ribbon}">
                <AdornerDecorator  Name="PART_AdornerDecorator" Margin="0,-53,0,0"
                    Panel.ZIndex="100" DockPanel.Dock="Top">
                   <Border>
                      <Grid ClipToBounds="True">
                        <Grid.RowDefinitions>
                             <RowDefinition>
                                <RowDefinition.Style>
                                   <Style>
                                       <Setter Property="RowDefinition.Height" Value="53" />
                                       <Style.Triggers>
                                          <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                             <Setter Property="RowDefinition.Height" Value="73" />
                                           </Trigger>
                                       </Style.Triggers>
                                   </Style>
                                 </RowDefinition.Style>
                             </RowDefinition>
                                <RowDefinition Height="1" />
                                <RowDefinition Height="1" />
                                <RowDefinition>
                                 <RowDefinition.Style>
                            <Style>
                              <Setter Property="RowDefinition.Height" Value="25" />
                              <Style.Triggers>
                                 <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                    <Setter Property="RowDefinition.Height" Value="40" />
                                  </Trigger>
                               </Style.Triggers>
                             </Style>
                          </RowDefinition.Style>
                     </RowDefinition>
                    </Grid.RowDefinitions>
      <DockPanel Grid.Row="0" Panel.ZIndex="200">
           <local:RibbonWindowPanel x:Name="PART_RibbonWindowPanel"
                 Panel.ZIndex="100" DockPanel.Dock="Top">
                <Border x:Name="PART_TitleBorder" Width="{TemplateBinding ActualWidth}"
                      Height="30" Margin="0,0,0,-20" Visibility="Collapsed" />
                    <ContentPresenter Name="PART_ApplicationMenu" Margin="0,20,0,0" Width="65"
                      Content="{TemplateBinding ApplicationMenu}"ContentSource="ApplicationMenu">
                        <ContentPresenter.Style>
                           <Style>
                             <Setter Property="FrameworkElement.Height" Value="38" />
                             <Setter Property="FrameworkElement.Width" Value="38" />
                             <Style.Triggers>
                                 <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                                      <Setter Property="FrameworkElement.Height" Value="48" />
                                      <Setter Property="FrameworkElement.Width" Value="48" />
                                  </Trigger>
                              </Style.Triggers>
                           </Style>
                    </ContentPresenter.Style>
               </ContentPresenter>
         </local:RibbonWindowPanel>
   <Border Width="5" Height="0" Margin="0,-14,0,0" DockPanel.Dock="Left" />
   <Border Width="41" Height="0" Margin="0,-14,0,0" Panel.ZIndex="11"
      BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1"
      DockPanel.Dock="Left" />
    <Border Width="5" Height="0.02" Margin="0,-14,0,0" Panel.ZIndex="12"
          DockPanel.Dock="Right" />
     <Border Height="23" Margin="0,-23,0,1" Panel.ZIndex="12"
        Background="{StaticResource TransparentBrush}" DockPanel.Dock="Right">
           <ContentPresenter ContentSource="TabPanelItem" />
      </Border>
      <Border x:Name="ribbonTabBorder" Panel.ZIndex="10" BorderBrush="{TemplateBinding  
       BorderBrush}” BorderThickness="{TemplateBinding BorderThickness}"   
       DockPanel.Dock="Bottom">
           <ItemsPresenter />
           <Border.Style>
              <Style>
                <Style.Triggers>
                   <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Visible">
                           <Setter Property="Border.Margin" Value="17,-25,0,2" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}}, Path=BackStageButton.Visibility}" Value="Collapsed">
                           <Setter Property="Border.Margin" Value="-46,-25,0,2" />
                     </DataTrigger>
              </Style.Triggers>
           </Style>
       </Border.Style>
    </Border>
</DockPanel>
     <Border Name="PART_QAT" Grid.Row="3" Padding="0,1,0,0"
          Background="Transparent">
            <ContentPresenter HorizontalAlignment="Left" Content="{TemplateBinding QuickAccessToolBar}" DockPanel.Dock="Top" />
      </Border>
     </Grid>
   </Border>
</AdornerDecorator>
   <ControlTemplate.Triggers>
        <Trigger Property="RibbonState" Value="Adorner">
             <Setter TargetName="PART_QAT" Property="Visibility" Value="Collapsed" />
         </Trigger>
          <Trigger Property="componentModel:DesignerProperties.IsInDesignMode" Value="True">
               <Setter TargetName="PART_AdornerDecorator" Property="Margin" Value="0" />
           </Trigger>
           <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                 <Setter Property="Height" Value="35" />
           </Trigger>
           <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
                  <Setter TargetName="ribbonTabBorder" Property="Margin" Value="17,-27,0,2" />
            </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </MultiTrigger>
    <Trigger Property="shared:SkinStorage.EnableTouch" Value="True">
         <Setter Property="Height" Value="175" />
     </Trigger>
     <MultiTrigger>
         <MultiTrigger.Conditions>
             <Condition Property="RibbonState" Value="Normal" />
             <Condition Property="IsQATBelow" Value="False" />
             <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
         </MultiTrigger.Conditions>
             <Setter Property="Height" Value="145" />
         </MultiTrigger>
         <MultiTrigger>
             <MultiTrigger.Conditions>
                 <Condition Property="RibbonState" Value="Normal" />
                 <Condition Property="IsQATBelow" Value="True" />
                  <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
           </MultiTrigger.Conditions>
           <Setter Property="Height" Value="185" />
       </MultiTrigger>
   <MultiTrigger>
     <MultiTrigger.Conditions>
            <Condition Property="RibbonState" Value="Hide" />
            <Condition Property="IsQATBelow" Value="False" />
            <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
     </MultiTrigger.Conditions>
         <Setter Property="Height" Value="30" />
     </MultiTrigger>
     <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="RibbonState" Value="Hide" />
            <Condition Property="IsQATBelow" Value="True" />
            <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
         </MultiTrigger.Conditions>
               <Setter Property="Height" Value="75" />
          </MultiTrigger>
          <MultiTrigger>
              <MultiTrigger.Conditions>
                  <Condition Property="RibbonState" Value="Adorner" />
                  <Condition Property="IsQATBelow" Value="False" />
                  <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
               </MultiTrigger.Conditions>
                       <Setter Property="Height" Value="30" />
               </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="RibbonState" Value="Adorner" />
                            <Condition Property="IsQATBelow" Value="True" />
                            <Condition Property="shared:SkinStorage.EnableTouch" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Height" Value="40" />
                    </MultiTrigger>
                </Style.Triggers>
            </Style>
            <Style BasedOn="{StaticResource Office2013RibbonStyle}" TargetType="{x:Type local:Ribbon}" />

 

The ApplicationMenu shows in Office2013 style of Ribbon

View WPF Ribbon ApplicationMenu Demo in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied