This is a migrated thread and some comments may be shown as answers.

Change background color RadRibbonView, RadRibbonTab and RadRibbonGroup

8 Answers 593 Views

RibbonView and RibbonWindow

This is a migrated thread and some comments may be shown as answers.

Andre asked on 07 Jul 2013, 01:59 AM

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é

8 Answers, 1 is accepted

Accepted

answered on 10 Jul 2013, 01:01 PM

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

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 11 Jul 2013, 12:49 PM

01.jpg

02.jpg

03.jpg

04.jpg

05.jpg

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é

Accepted

answered on 16 Jul 2013, 10:45 AM

RibbonView-TransparentTheme.zip

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

answered on 06 Oct 2016, 07:24 AM

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.