How to use the office 2013 ribbon backstage style

Ribbon for WPF Forum

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Version: 14.2.0611
Avatar

Hi, we are using the ribbon feature from the Actipro package, and we have tried to understand how to configure it to use the Office 2013 theme so that the backstage will look like the one in Word 2013.

Any pointers to how to make it happen would be really appreciated.

Thanks.

Martin

Comments (13)

Posted 4 years ago by Dom Sinclair
Avatar

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

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

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?


Actipro Software Support

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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>
Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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?

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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.

Answer - Posted 4 years ago by Dom Sinclair
Avatar

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

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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?

Posted 4 years ago by Dom Sinclair
Avatar

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

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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.

Answer - Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

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.


Actipro Software Support

Posted 4 years ago by Martin Deslongchamps - Software Specialist, SES
Avatar

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

Answer - Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Martin,

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


Actipro Software Support

The latest build of this product (v2018.1 build 0675) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.