Change the style of the 'Office2013' theme.

[George Sterg]

Hello, I want to change  the style of the Office 2013 theme.  I tried to use this:

Ribbon.SetActiveColorScheme(ribbon, Brushes.Red); from http://help.syncfusion.com/ug/wpf/default.htm#!documents/activecolorscheme.htm without any success.

I want to have multiple Office2013 custom styles (dark,blue etc). I want to be able to not only change the background of the title bar (achieved that) but also the style of each tab (tab and tabButton properties when selected, mouse hover, make the caption bold when the tab is checked etc). Trying to edit the Ribbon template throws me an exception, and also trying to edit a ribbonTab template gives me this error: "Create template failed".

[Mariappan S]

Hi George,

Thank you for contacting Syncfusion support,

We have prepared a Ribbon sample by using style file. Using this file you can edit the style of Ribbon control and change the Color, BorderBrush for RibbonTab,TabButton.

Please download the sample from the following location.

Sample link: RibbonSample.zip

Please let us know if you need further assistance.

Regards,
Mariappan S.

[George Sterg]

Thank you for the sample (Although 8000 lines are quite a lot!) I mixed around with the colors but I have an Issue with the RibbonTab (Or the RibbonTabButton). When a tab i selected . the tab 'moves' to the right. How can i fix this?
Thank you

Attachment: RibbonSample152986270Updated_33b95c32.zip

[Mariappan S]

Hi George,

We have checked your updated sample. In this sample you have changed below code snippets to change the margin it causes thereported issue.

Code snippets:

<Border x:Name="ribbonTabBorder" Panel.ZIndex="10"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

DockPanel.Dock="Bottom">

<Border.Style>

<Style>

<!--<Setter Property="Border.Margin" Value="17,-24,0,1"/>-->

<Style.Triggers>

<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Ribbon}},Path=BackStageButton.Visibility}" Value="Visible">

<Setter Property="Border.Margin" Value="17,-24,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,-24,0,1"/>

</DataTrigger>

</Style.Triggers>

</Style>

</Border.Style>

<ItemsPresenter />

</Border>

We have modified the above code snippets in this sample. Please download the sample from the following link.

Sample link: RibbonSample.zip

Please let us know if you need further assistance.

Regards,
Mariappan S.

[George Sterg]

No  I have the same problem. I am uploading some snapshots.

Loaded (Pic1)
Click the Tab1 (Pic 2)
Click Tab2 (pic 3)
Click Tab 2 again several times (Pic 4)

Is it a version issue? I am using version 12.1400.0.43

[George Sterg]

No  I have the same problem. I am uploading some snapshots.

Loaded (Pic1)
Click the Tab1 (Pic 2)
Click Tab2 (pic 3)
Click Tab 2 again several times (Pic 4)

Is it a version issue? I am using version 12.1400.0.43

Attachment: Snapshots_e452673e.zip

[George Sterg]

If I set the ribbonTabStyle in xaml, I can see it from the design view but i runtime the style is not visible. If i set the style in code behind, i have the issue above. Is there any way to set the foreground of a non selected tab without the ribbonTabStyle?

[Bharadhi K]

Hi George,

Thanks for the update.

Query 1: Is it a version issue? I am using version 12.1400.0.43

We are able to reproduce the issue "When a tab i selected . the tab 'moves' to the right" in version 12.1.0.43. This issue has been resolved in our latest version, 13.1.0.21. We recommend you to upgrade to our latest version.

Query 2: If I set the ribbonTabStyle in xaml, I can see it from the design view but i runtime the style is not visible. If i set the style in code behind, i have the issue above.

Since the style names were same, the style is taken from the source file during run time. We can resolve this by changing the Key name. We have modified the sample to describe the same. In the sample we have changed the key name to "Office2013TabButtonStyle1". Please find the modified sample in the following link.

Sample: RibbonSample.zip

Query 3: Is there any way to set the foreground of a non selected tab without the ribbonTabStyle?

The Foreground of the RibbonTab can only be set using the "TabButtonStyle" property. Currently we do not have support to change the Foreground directly.

Please let us know if you require further assistance on this.

Regards,
Bharadhi K