Change background color RadRibbonView, RadRibbonTab and RadRibbonGroup

[Andre]

I saw that by default RadRibbonView color is black, but I need to move to another custom color and I'm not getting, even managed to change the color of RadRibbonView in general, but when I add a RadRibbonTab the color set to the main RadRibbonView is behind and superior color remains black, fasso change in the Background of the controls, but the look remains the same. How can I solve this.?


 <Grid>
        <telerik:RadRibbonView Margin="0,3">
            <telerik:RadRibbonView.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF0098C5" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </telerik:RadRibbonView.Background>
            
            <telerik:RadRibbonTab Header="Tab 1">
                <telerik:RadRibbonGroup>
                    <telerik:RadRibbonGroup.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0098C5" Offset="0"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                        </telerik:RadRibbonGroup.Background>
                    <telerik:RadRibbonButton Content="Teste">
                        
                    </telerik:RadRibbonButton>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </telerik:RadRibbonView>
    </Grid>

I changed the background color of each component, but only RadRibbonView was changed, but stayed behind the other

graciously
André

[Dimitrina]

Hi, Andre

The background  which you want to change is the Title component of the RadRibbonView control. 
Plaese see the following code 

<telerik:RadRibbonView Margin="0,3" TitleBarBackground="Red">
            <telerik:RadRibbonView.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF0098C5" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </telerik:RadRibbonView.Background>
            <telerik:RadRibbonTab Header="Tab 1">
                <telerik:RadRibbonGroup>
                    <telerik:RadRibbonGroup.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0098C5" Offset="0"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </telerik:RadRibbonGroup.Background>
                    <telerik:RadRibbonButton Content="Teste">
                    </telerik:RadRibbonButton>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </telerik:RadRibbonView>

If you have further questions please do not hesitate to contact us.

I hope this will help you.

Regards,
Dimitrina
Telerik

[Andre]

No, I do not want to change the background color of the title, what I want is to set a color for my entire menu is independent of adding new tab, group, button and other controls.

the problem is to define a background RadRibbonView far so good, but when a new adicino RadRibbonTab the background of RadRibbonTab covers the entire background set for RadRibbonView.

graciously
André

[Dimitrina]

Hi, Andre

Can you send us a screenshot of the RibbonView control and mark the element which background you want to change.

Thank you in advance.

Regards,
Dimitrina
Telerik

[Andre]

Ok, here are the pictures you requested, summarizing our menu control in our system is all blue light independent of adding new Tabs and Groups.
Descupas by encomodo, but it is now adiquimos your product shortly, however we have read your help, but still gets a twinge of doubt perhaps not this property Fassa this type of function, but we do not know each other.
OBS. If you are not understanding my English is my original language is Portuguese.

graciously
André

[Kiril Vandov]

Hello Andre,

If I understand correctly you want the Background applied to the RadRibbonView to be also applied to all of its children. You could do that by using our TransparentTheme and apply it to the RadRibbonView. Doing so will make the RadRibbonView and all of its children transparent. However the RadRibbonGroup background will not be changed to transparent, that is why you will need to change its Background property using implicit styles, like follows:

xmlns:telerikRibbonViewPrimitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"
...
<Style TargetType="telerikRibbonViewPrimitives:GroupChrome">
    <Setter Property="Background" Value="Transparent" />
</Style>

I have attached a sample project demonstrating this approach for your convenience. 

I hope this information helps, please let us know if this works for you.

Kind regards,
Kiril Vandov
Telerik

[Andre]

That's right you needed.
Thank you very much!

Graciously
André

[Sergey]

Hi, Why I cannot just set a Background property? It has no effect. If I use a solution from this topic then my RadRibbonGroup just dissappear

[Kiril Vandov]

Hello Sergey,

The attached project demonstrates how you can change the Background of the RadRibbonGroup's. With the current implemnetation of the RadRibbonGroup's and the parts they consist of the GroupChrome is the one responsible for the Background.
As for why the groups disappear, my guess is that you are using NoXaml binaries when you use NoXaml binaries you need to BasedOn all custom styles to their original one's otherwise the properties such s Template(responsible for the visualization) will not be set and will not show the control. In this case you need to BasedOn the custom style to BasedOn={StaticResource GroupChromeStyle}.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik by Progress

Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.