Style The Title

The RadRibbonView's API allows you to customize the Title bar of your ribbon control. First we are going to use the code in Example 1 as a starting point.

Example 1: Sample RadRibbonView

<telerik:RadRibbonView Margin="10" Title="Title" ApplicationName="My App" > 
    <telerik:RadRibbonView.Items> 
        <telerik:RadRibbonTab Header="Home"> 
            <telerik:RadRibbonGroup Header="Clipboard"/> 
            <telerik:RadRibbonGroup Header="Font"/> 
        </telerik:RadRibbonTab> 
        <telerik:RadRibbonTab Header="View" /> 
    </telerik:RadRibbonView.Items> 
</telerik:RadRibbonView> 
Rad Ribbon View How To Style The Title

To customize the foreground of text in the title bar, we can create a custom style targeting WindowTitle and set the Foreground property.

You can access the WindowTitle control through an alias pointing to the namespace: xmlns:ribbonPrimitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"

Example 2: Change Title Foreground

<telerik:RadRibbonView Margin="10" Title="Title" ApplicationName="My App" > 
    <telerik:RadRibbonView.WindowTitleStyle> 
        <Style TargetType="ribbonPrimitives:WindowTitle"> 
            <Setter Property="Foreground" Value="Red" /> 
            <Setter Property="FontFamily" Value="Tahoma" /> 
        </Style> 
    </telerik:RadRibbonView.WindowTitleStyle> 
    <telerik:RadRibbonView.Items> 
        <telerik:RadRibbonTab Header="Home"> 
            <telerik:RadRibbonGroup Header="Clipboard"> 
            </telerik:RadRibbonGroup> 
            <telerik:RadRibbonGroup Header="Font"> 
            </telerik:RadRibbonGroup> 
        </telerik:RadRibbonTab> 
        <telerik:RadRibbonTab Header="View" /> 
    </telerik:RadRibbonView.Items> 
</telerik:RadRibbonView> 
Rad Ribbon View How To Style The Title 2

To change the title bar background, you can set the TitleBarBackground property of the RadRibbonView.

Example 3: Change Title Foreground

<telerik:RadRibbonView Margin="10" Title="Title" ApplicationName="My App" TitleBarBackground="Bisque"> 
    <telerik:RadRibbonView.WindowTitleStyle> 
        <Style TargetType="ribbonPrimitives:WindowTitle"> 
            <Setter Property="Foreground" Value="Red" /> 
            <Setter Property="FontFamily" Value="Tahoma" /> 
        </Style> 
    </telerik:RadRibbonView.WindowTitleStyle> 
    <telerik:RadRibbonView.Items> 
        <telerik:RadRibbonTab Header="Home"> 
            <telerik:RadRibbonGroup Header="Clipboard"/> 
            <telerik:RadRibbonGroup Header="Font"/> 
        </telerik:RadRibbonTab> 
        <telerik:RadRibbonTab Header="View" /> 
    </telerik:RadRibbonView.Items> 
</telerik:RadRibbonView> 
Rad Ribbon View How To Style The Title 2

See Also

In this article
Not finding the help you need? Improve this article