How to use the office 2013 ribbon backstage style

Martin

Assuming that you are already using the metro theme and have that configured then  add the following xaml in your ribbon to give you a basic starting point:

 <ribbon:Ribbon.ApplicationMenu>
                <ribbon:Backstage>
                    <ribbon:Button KeyTipAccessText="S" Label="Save" />
                    <ribbon:Button KeyTipAccessText="A" Label="Save As" />
                    <ribbon:Button KeyTipAccessText="O" Label="Open" />
                    <ribbon:Button KeyTipAccessText="C" Label="Close" />
                     <ribbon:BackstageTab Header="Options" />
                    
                    
            </ribbon:Backstage>

               
            </ribbon:Ribbon.ApplicationMenu>

 That should at least give you the basic look that you are after.  From there I suggest that you then look at the specific Quickstart in the ribbon section of the sample browser which deals with the backstage.  That will show you how to configure the special backstage tabs.

HTH

Dom

Hi Martin,

Do you mean the Backstage that covers the whole ribbon? That is available with any of the Metro themes we offer. If you run our main ribbon demo with the Metro themes, you should see it rendering Office 2013-style. Which theme are you using?

We are using the theme per default. We did not configure that part. So probably this our problem. What is the resource to link to?

Here is what we have configure so far (this is really the basis):

<ribbon:Ribbon x:Name="ribbon" ApplicationButtonLabel="File">
	<!--The Project Menu Tab -->
	<ribbon:Ribbon.ApplicationMenu>
		<ribbon:Backstage Name="fltBackStage">
			<!--New Button-->
			<ribbon:Button .../>
			<ribbon:Button .../>
			<ribbon:Separator />
			<ribbon:BackstageTab Header="Recent" KeyTipAccessText="R">
				<.../>
			</ribbon:BackstageTab>
			<ribbon:Button .../>
			<ribbon:Button .../>
		</ribbon:Backstage>
	</ribbon:Ribbon.ApplicationMenu>
	<!--Tabs-->
	<ribbon:Ribbon.Tabs>
		<.../>
	</ribbon:Tab>
	<ribbon:Ribbon.Tabs>
		<.../>
	</ribbon:Tab>
	<ribbon:Ribbon.Tabs>
		<.../>
	</ribbon:Tab>
	<ribbon:Ribbon.Tabs>
		<.../>
	</ribbon:Tab>
	<ribbon:Ribbon.Tabs>
		<.../>
	</ribbon:Tab>
	</ribbon:Ribbon.Tabs>
</ribbon:Ribbon>

The office 2013 backstage style is done through what? Is it done through a style in a xaml file or by special controls to use, or both?

I took a look to the getting started and we are more advance than this. Our ribbon is basically done, backstage is there, quick access toolbars, screen tips, etc.

We are just stuck with the 2010 look.

Hi Martin

In my application's Application.xaml I have the the following:

<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Startup="Application_Startup">
    <Application.Resources>
        
    </Application.Resources>
</Application>

 and in the application.xaml.vb file (I prefer vb) I have the following:

Imports ActiproSoftware.Windows.Themes

Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs)

        'configure theming to begin with
        ' 
        ThemeManager.BeginUpdate()
        Try
            ThemesMetroThemeCatalogRegistrar.Register()

            ' Use the Actipro styles for native WPF controls that look great with Actipro's control products
            ThemeManager.AreNativeThemesEnabled = True



            If (Environment.OSVersion.Version.Major > 6) OrElse ((Environment.OSVersion.Version.Major = 6) AndAlso (Environment.OSVersion.Version.Minor >= 2)) Then
                ThemeManager.CurrentTheme = ThemeName.MetroWhite.ToString()
            End If
        Finally
            ThemeManager.EndUpdate()
        End Try
        Dim viewmod As  New MainRibbonViewModel
        Dim frm As New MainRibbon With {.DataContext = viewmod, .WindowState=WindowState.Maximized}
        frm.Show()
    End Sub

 in C# this would be:

using ActiproSoftware.Windows.Themes;


internal class Application
{

	// Application-level events, such as Startup, Exit, and DispatcherUnhandledException
	// can be handled in this file.




	private void Application_Startup(object sender, StartupEventArgs e)
	{

		//configure theming to begin with
		// 
		ThemeManager.BeginUpdate();
		try
		{
			ThemesMetroThemeCatalogRegistrar.Register();

			// Use the Actipro styles for native WPF controls that look great with Actipro's control products
			ThemeManager.AreNativeThemesEnabled = true;



			if ((Environment.OSVersion.Version.Major > 6) || ((Environment.OSVersion.Version.Major == 6) && (Environment.OSVersion.Version.Minor >= 2)))
			{
				ThemeManager.CurrentTheme = ThemeName.MetroWhite.ToString();
			}
		}
		finally
		{
			ThemeManager.EndUpdate();
		}

		

		MainRibbonViewModel viewmod = new MainRibbonViewModel();
		MainRibbon frm = new MainRibbon {DataContext = viewmod, WindowState = WindowState.Maximized};
		frm.Show();
	}
}

That should be sufficient to give you your metro theme (you'll obviously need to reference the relevant actipro assemblies, and add the necessary XLMNS: bits to your xaml).

Hope that helps

Dom

Thanks Dom I am trying it right now. Coming back in a couple of minutes.

Thanks a lot Dom, this is the answer to our problem.

The magic line missing was:

ThemesMetroThemeCatalogRegistrar.Register()

Is each theme needs to be register? Why it's not done by default?

Hi Martin

I honestly don't know the answer to that question, but I have gone on to add theme changing to an auto expander I added to the backstage and it seems to work quite nicely without my having had to do anything else by way of registering themes.

Dom

Ok thanks Dom. I would like to see what Actipro could give us as information on this subject.

This metro theme is really nice. We are playing with it and love it.

Hi Martin,

The themes in the Shared Library are able to register themselves by default as soon as ThemeManager is referenced (because they are defined in the same assembly) but the "Office*" and "Metro*" themes are in separate assemblies, so they need to manually register themselves with our theme system via the Register() method call.

Aaaaahhhhh. Thanks, now it's clear. The documentation is not covering that I think... no?

Hi Martin,

The first section in the Themes Getting Started documentation topic talks about having to call Register() for the Office and Metro themes.