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

XAML

	<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>

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

XAML

	<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>

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

Example 3: Change Title Foreground

XAML

	<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>

See Also

• Handle double click on application button
• Add Screen Tips in the Code Behind
• Change the Application Menu's Image