Custom Theme for RibbonView - RibbonView and RibbonWindow

Joe

31 posts

Member since:
Apr 2012

Posted 24 Mar 2014 Link to this post

Hello,
I am creating a new theme for the RibbonView based on the Windows8 theme.

I have followed the instructions in your documentation and have successfully created my own theme, however there is an issue with the RadRibbonGroup and RadRibbonButton. Both seem to be missing from the Telerik.Windows.Controls.RibbonView.xaml file that I copied from the Themes folder.

I get an error when I try to add the RadRibbonGroup to project in Blend. "Object reference not set to an instance of an object". In the visual studio project I do not get an error, but no styling is applied to the RadRibbonGroups or RadRibbonButtons. If I change to using the out of the box Windows8 style I do get styling applied to both the RadRibbonGroups and RadRibbonButtons.

I have looked for a xaml file specific to RadRibbonGroup and RadRibbonButton and have not found them. I have tried to use Blend to generate them and receive an exception.

I also looked at the RadRibbonBar but RadRibbonBar and RadRibbonView would not work together in Blend.

Can you tell me how I can get a Telerik.Windows.Controls.RibbonView.xaml file that includes the RadRibbonGroup and RadRibbonButton or how I can get a RadRibbonGroup.xaml file and RadRibbonButton.xaml file?

Thank you,
Craig

Kiril Vandov

Admin

324 posts

Posted 26 Mar 2014 Link to this post

Hello Craig,

I have checked the "Telerik.Windows.Controls.RibbonView.xaml" located in the "\Themes.Implicit\Windows8\Themes" folder and the styles for the RadRibbonButton ("RadRibbonButtonStyle") and RadRibbonGroup ("RadRibbonGroupStyle") are included in it.
Also when I tried to extract the style, it was extracted without any errors. Could you please let us know your version of Blend and the version of the binaries you are using(noxaml/xaml) in order to test it on our side.

I have extracted the styles for the RadRibbonButton and RadRibbonGroup in a sample project for your convenience. I used binaries from our latest official release (2014.1 224).

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

Joe

31 posts

Member since:
Apr 2012

Posted 02 Apr 2014 in reply to Kiril Vandov Link to this post

I have upgraded the project to 2014.1 224 and am using Blend 2013.

The issue I am having is that when I generate the RadRibbonGroupStyle there are no settings to change the style.


<Style x:Key="RadRibbonGroupStyleMyProject" TargetType="telerik:RadRibbonGroup">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource RibbonForegroundBrush}"/>
<Setter Property="SeparatorStyle" Value="{StaticResource SeparatorStyle}"/>
<Setter Property="ItemsPanel" Value="{StaticResource RadRibbonGroupPanelTemplate}"/>
<Setter Property="Icon">
<Setter.Value>
<BitmapImage UriSource="/Telerik.Windows.Controls.RibbonView;component/RibbonGroupCollapsedIcon.png"/>
</Setter.Value>
</Setter>
<Setter Property="Template" Value="{StaticResource RadRibbonGroupTemplate}"/>
</Style>

How do I change the background color etc. of the RadRibbonGroup?
Do I have to change the RadRibbonGroupPanelTemplate Template? If so, How ddo I do that with Blend?

Thank you ,
Craig

Kiril Vandov

Admin

324 posts

Posted 07 Apr 2014 Link to this post

Hello Craig,

The background color of the RadRibbonGroup comes from the GroupChrome element in its ControlTemplate. In order to change that color you could edit the ControlTemplate of the RadRibbonGroup and set Background of the GroupChrome to be template bound to the background of the group like follows:

<Primitives:GroupChrome x:Name="ExpandedChrome" Background="{TemplateBinding Background}" ...

doing so you will be able to set background to the RadRibbonGroup and it will be applied to its chrome. We will consider that improvement for one of our next internal build.

However there is another approach, you could use an Implicit style targeting the GroupChrome and change its Background. Please note that doing so all of your RadRibbonGroups will have the same color and you will not be able to have different background colors for different groups.

xmlns:Primitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"

<Window.Resources>

<Style TargetType="Primitives:GroupChrome">

<Setter Property="Background" Value="Lime" />

</Style>

</Window.Resources>

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Joe

31 posts

Member since:
Apr 2012

Posted 07 Apr 2014 in reply to Kiril Vandov Link to this post

Thank you.
Changing the GroupChrome worked.

How do I change the background of the text to a darker color, similar to what you do in your demo with the Windows8Touch theme?

Thank you,
Craig

Kiril Vandov

Admin

324 posts

Posted 08 Apr 2014 Link to this post

Hello Craig,

If you are referring to the background color of the RadRibbonGroup you will need to change the ControlTemplate of the GroupChrome. How to get the control template of an control is shown in this article, the only change is that you will need to open the RibbonView.xaml files and look for x:Key="GroupChromeTemplate". In the ControlTemplate of the group chrome there is an element with x:Name="Tray" you need to set its background property to the desired color.

Kind regards,
Kiril Vandov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Joe

31 posts

Member since:
Apr 2012

Posted 11 Apr 2014 in reply to Kiril Vandov Link to this post

Thank you.

I am using the windows8 theme and it does not seem to have the "GroupChromeTemplate". However that is okay, I will just use the Windows8 look without the darker background at the bottom of the RadGroup.

I do have another question though. As soon as I apply a style to the RadRibbonGroup (or the QuickAccessToolbar) I get a designer error. The project executes correctly with the style applied. However I would like to be able to use the designer for the rest of the project.

This is the error I receive both in Visual Studio and Blend.
Error 1 Invalid XAML. C:\projects2\Silverlight\MyTheme\source\TestTacomTheme\Themes\Telerik.Windows.Controls.Navigation.xaml 5741 17 TestMyTheme

This occurs if I apply the style right on the control or if I merge the resource using the app.xaml file.

<Style TargetType="telerikRibbonView:RadRibbonGroup" BasedOn="{StaticResource RadRibbonGroupMyStyle}" />
<telerik:RadRibbonGroup Header="Events" Style="{StaticResource RadRibbonGroupMyStyle}" >

Is there a way to fix this for the designer or will I have to merge these at runtime?

Thank you,
Craig

Joe

31 posts

Member since:
Apr 2012

Posted 11 Apr 2014 in reply to Joe Link to this post

I meant to say, apply the style at runtime, not merge at runtime.

Joe

31 posts

Member since:
Apr 2012

Posted 11 Apr 2014 in reply to Joe Link to this post

Sorry, This is the error I meant to post in the message above.

Error 1 This feature requires service 'Microsoft.Windows.Design.Services.ValueTranslationService' to be present, but it could not be located. C:\projects2\Silverlight\MyTheme\source\TestMyTheme\RibbonViewPage.xaml 66 25 TestMyTheme

Thank you,
Craig

Kiril Vandov

Admin

324 posts

Posted 15 Apr 2014 Link to this post

Hello Craig,

We were not able reproduce the design error that you have reported on our side. That is why I would like to ask you to take a look at the sample project I attached and modify it in order to reproduce the issue on our side and assist your further. Also please note that if you have an implicit style, targeting the RadRibbonGroup:

<Style TargetType="telerikRibbonView:RadRibbonGroup" BasedOn="{StaticResource RadRibbonGroupMyStyle}" />

you do not need to apply the same style locally to every RadRibbonGroup, lke you showed in the code snippet:

<telerik:RadRibbonGroup Header="Events" Style="{StaticResource RadRibbonGroupMyStyle}" >

The implicit style will be applied to all RadRibbonGroups.

Looking forward to hearing from you.

Kind regards,
Kiril Vandov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

RibbonView-ImplicitStyles.zip