We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WPF |
Control: Ribbon |
Published Date: December 27, 2017 |
Last Revised Date: April 13, 2021

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

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon