Show buttons in Fluent Ribbon backstage

Question

I've the following XAML for defining a Fluent Ribbon:

<Fluent:RibbonWindow x:Class="WMathTest.MainWindow"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:Fluent="urn:fluent-ribbon"
                     Title="Some Application" 
                     Width="800" 
                     Height="600" >
  <Fluent:Ribbon>
    <!--Backstage-->
    <Fluent:Ribbon.Menu>
      <Fluent:Backstage Header="File">
        <Fluent:BackstageTabControl>
          <Fluent:BackstageTabItem Header="Database"/>
        </Fluent:BackstageTabControl>

      </Fluent:Backstage>
    </Fluent:Ribbon.Menu>
    <!--Tabs-->
    <Fluent:RibbonTabItem Header="author">
      <Fluent:RibbonGroupBox Header="Group">
        <Fluent:Button Header="Green"
                       Icon="Images\Green.png"
                       LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Grey" 
                       Icon="Images\Gray.png"
                       LargeIcon="Images\GrayLarge.png" />
      </Fluent:RibbonGroupBox>
    </Fluent:RibbonTabItem>
  </Fluent:Ribbon>
</Fluent:RibbonWindow>

If I run my project and I click on the File application button I can see the backstage. If I click on Database I see an empty backstage:

Now I'd like to add some button (Open Database, Save Database and so on) but I don't know how to add a XAML for showing a page with the options (like the one that I can see in Word).

How can I add custom controls in the backstage when I click on the Database Tab Item?

Answer 1

You just need to add the controls under your BackstageTabItem like this (I have used a couple of wrap panels for a quick layout but you can use a grid etc.):

  <!--Backstage-->
        <fluent:Ribbon.Menu>
            <fluent:Backstage>
                <fluent:BackstageTabControl>
                    <fluent:BackstageTabItem Header="Database">
                        <WrapPanel Orientation="Horizontal">
                            <WrapPanel Orientation="Vertical">
                                <fluent:Button Header="Open Database" Foreground="Black" />
                                <fluent:Button Header="Save Database" Foreground="Black" />
                                <fluent:Button Header="Do something" Foreground="Black" />
                            </WrapPanel>
                            <fluent:TextBox Header="Database Name" Text="Your Database" Foreground="Black"/>
                        </WrapPanel>
                    </fluent:BackstageTabItem>
                    <fluent:Button x:Name="ExitButton" Header="Exit" Click="ExitButton_OnClick" />
                </fluent:BackstageTabControl>
            </fluent:Backstage>
        </fluent:Ribbon.Menu>

I seem to have to explicity set the foreground color for it to show up.