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

Need to change colors of RadTabControl

7 Answers 715 Views

GridView

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

Tony asked on 26 Mar 2012, 07:41 PM

I'm building a WPF application that will be running on laptops mounted in police cars. The colors need to change when a user clicks on a button, one set of colors for Day time and another set for Night time. The idea is that the night time colors will be easier on the user's eyes in a dark police car at night.

I've implemented themes in my application. I use them to switch between "Day Time" colors and "Night Time" colors. This is done by switching between two different ResourceDictionaries, one for Day Time and one for Night Time.

I'm using a RadTabControl in my application and I cannot get its headerr to swap colors at all. Using Expression Blend, I've made a copy of the RadTabControl's template. Using Snoop, I inspected my program's visual tree and found that changing the background color of the Border control named "HeaderBackground" would change the background color of the header row. So I edited the copy of the RadTabControl's template and put my values into the template for that control, as shown below:

<Style TargetType="{x:Type telerik:RadTabControl}">

<Setter Property="MinWidth" Value="5" />

<Setter Property="MinHeight" Value="26" />

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

<Setter Property="VerticalContentAlignment" Value="Stretch" />

<Setter Property="IsTabStop" Value="False" />

<Setter Property="BorderBrush" Value="{DynamicResource TabBorder}" />

<Setter Property="BorderThickness" Value="1,0,1,1" />

<Setter Property="Background" Value="{DynamicResource TabBackground}" />

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<Telerik_Windows_Controls_Primitives:TabWrapPanel IsItemsHost="True" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Setter Property="DropDownButtonStyle">

<Setter.Value>

<Style TargetType="{x:Type ToggleButton}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToggleButton}">

<Grid>

<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

<Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="1" />

</Border>

<Border x:Name="CheckedVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFDCAB" Offset="0" />

<GradientStop Color="#FFFFD18F" Offset="0.5" />

<GradientStop Color="#FFFE9227" Offset="0.5" />

<GradientStop Color="#FFFFD74E" Offset="1" />

</LinearGradientBrush>

</Border.Background>

<Border BorderBrush="White" BorderThickness="1" />

</Border>

<ContentPresenter x:Name="ContentPresenter"

ContentTemplate="{TemplateBinding ContentTemplate}"

Content="{TemplateBinding Content}"

HorizontalAlignment="Center"

Margin="{TemplateBinding Padding}"

VerticalAlignment="Center" />

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="BorderBrush" TargetName="Border" Value="#FFFFC92B" />

<Setter Property="BorderBrush" TargetName="InnerBorder" Value="White" />

<Setter Property="Background" TargetName="Border">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFFBDA" Offset="0" />

<GradientStop Color="#FFFEEBAE" Offset="0.5" />

<GradientStop Color="#FFFFD25A" Offset="0.5" />

<GradientStop Color="#FFFFFBA3" Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Trigger>

<Trigger Property="IsPressed" Value="True">

<Setter Property="BorderBrush" TargetName="Border">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF282828" />

<GradientStop Color="#FF5F5F5F" Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush" TargetName="InnerBorder">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFB69A78" />

<GradientStop Color="#FFFFE17A" Offset="0.126" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Background" TargetName="Border">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFDCAB" Offset="0" />

<GradientStop Color="#FFFFD18F" Offset="0.5" />

<GradientStop Color="#FFFE9227" Offset="0.5" />

<GradientStop Color="#FFFFBA74" Offset="0" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Trigger>

<Trigger Property="IsChecked" Value="True">

<Setter Property="Opacity" TargetName="CheckedVisual" Value="1" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Content" Value="" />

<Setter Property="ContentTemplate">

<Setter.Value>

<DataTemplate>

<Path Data="M0,0L6,0 6,1 0,1 M0,2L6,2 6,3 5,3 5,4 4,4 4,5 2,5 2,4 1,4 1,3 0,3 0,2" Fill="Black" SnapsToDevicePixels="True" />

</DataTemplate>

</Setter.Value>

</Setter>

<Setter Property="Padding" Value="5,3" />

<Setter Property="telerik:RadDockPanel.Dock" Value="Right" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="White" Offset="0" />

<GradientStop Color="Gainsboro" Offset="0.5" />

<GradientStop Color="#FFADADAD" Offset="0.5" />

<GradientStop Color="#FFD4D4D4" Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush" Value="#FF848484" />

<Setter Property="BorderThickness" Value="1" />

<Setter Property="IsTabStop" Value="False" />

</Style>

</Setter.Value>

</Setter>

<Setter Property="DropDownStyle">

<Setter.Value>

<Style TargetType="{x:Type Telerik_Windows_Controls_TabControl:DropDownMenu}">

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

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="BorderThickness" Value="1" />

<Setter Property="MaxHeight" Value="500" />

<Setter Property="BorderBrush" Value="#FF848484" />

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:RadWrapPanel IsItemsHost="True" Orientation="Vertical" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type Telerik_Windows_Controls_TabControl:DropDownMenu}">

<Grid>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

<Border BorderBrush="#FF848484" BorderThickness="0,2,0,0">

<ItemsPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Border>

<Rectangle x:Name="BorderMaskElement" Fill="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Setter.Value>

</Setter>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadTabControl}">

<Grid>

<telerik:RadDockPanel LastChildFill="True">

<telerik:LayoutTransformControl x:Name="HeaderDockedElement" telerik:RadDockPanel.Dock="Top" IsTabStop="False">

<Grid>

<Border Background="{DynamicResource TabHeaderBackground}" BorderBrush="{DynamicResource TabBorder}" x:Name="HeaderBackground" Visibility="{TemplateBinding BackgroundVisibility}" />

<Border Background="{DynamicResource TabHeaderBackground}" BorderBrush="{DynamicResource TabBorder}" BorderThickness="0,0,0,1" SnapsToDevicePixels="True" />

<telerik:RadDockPanel Panel.ZIndex="10">

<ToggleButton x:Name="DropDownButtonElement" ClickMode="Press" telerik:RadDockPanel.Dock="Right"

IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

Margin="2,4,4,2" Style="{TemplateBinding DropDownButtonStyle}" Visibility="Collapsed">

<telerik:RadContextMenu.ContextMenu>

<Telerik_Windows_Controls_TabControl:DropDownMenu x:Name="DropDownMenuElement"

ClickToOpen="True"

DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"

ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"

Placement="Bottom"

Style="{TemplateBinding DropDownStyle}"

StaysOpen="False" />

</telerik:RadContextMenu.ContextMenu>

</ToggleButton>

<RepeatButton x:Name="LeftScrollButtonElement" Margin="4,4,2,2" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}">

<RepeatButton.Style>

<Style TargetType="{x:Type RepeatButton}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type RepeatButton}">

<Grid>

<Border x:Name="ButtonBorder">

<Grid>

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonVisual"

BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"

BorderThickness="1"

Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"

CornerRadius="2,0,0,2"

RenderMouseOver="{TemplateBinding IsMouseOver}"

RenderPressed="{TemplateBinding IsPressed}"

RenderEnabled="{TemplateBinding IsEnabled}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme />

</telerik:StyleManager.Theme>

</Telerik_Windows_Controls_Chromes:ButtonChrome>

<Path x:Name="Path"

Data="F1M110.692,342.252L110.692,352.682 104.594,347.467 110.692,342.252z"

Fill="Black"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Height="7"

Margin="{TemplateBinding Padding}"

Stretch="Uniform"

SnapsToDevicePixels="True"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Width="5" />

</Grid>

</Border>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True" />

<Trigger Property="IsPressed" Value="True" />

<Trigger Property="IsEnabled" Value="False">

<Setter Property="Opacity" TargetName="ButtonBorder" Value="0" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Width" Value="17" />

<Setter Property="Content" Value="" />

<Setter Property="Padding" Value="5,1" />

<Setter Property="Margin" Value="2" />

<Setter Property="telerik:RadDockPanel.Dock" Value="Left" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="White" Offset="0" />

<GradientStop Color="Gainsboro" Offset="0.5" />

<GradientStop Color="#FFADADAD" Offset="0.5" />

<GradientStop Color="#FFD4D4D4" Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush" Value="#FF848484" />

<Setter Property="IsTabStop" Value="False" />

</Style>

</RepeatButton.Style>

</RepeatButton>

<RepeatButton x:Name="RightScrollButtonElement" telerik:RadDockPanel.Dock="Right" Margin="2,4,2,2"

Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}">

<RepeatButton.Style>

<Style TargetType="{x:Type RepeatButton}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type RepeatButton}">

<Grid>

<Border x:Name="ButtonBorder">

<Grid>

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonVisual"

BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"

BorderThickness="1"

Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"

CornerRadius="0,2,2,0"

RenderMouseOver="{TemplateBinding IsMouseOver}"

RenderPressed="{TemplateBinding IsPressed}"

RenderEnabled="{TemplateBinding IsEnabled}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme />

</telerik:StyleManager.Theme>

</Telerik_Windows_Controls_Chromes:ButtonChrome>

<Path x:Name="Path"

Data="M0.5,0.5L5.2,5.4 5.2,5.4 0.5,10.5z"

Fill="Black"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Height="7"

Margin="{TemplateBinding Padding}"

Stretch="Uniform"

SnapsToDevicePixels="True"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Width="5" />

</Grid>

</Border>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver"

Value="True" />

<Trigger Property="IsPressed"

Value="True" />

<Trigger Property="IsEnabled"

Value="False">

<Setter Property="Visibility"

TargetName="ButtonBorder"

Value="Collapsed" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Width"

Value="17" />

<Setter Property="Content"

Value="" />

<Setter Property="Padding"

Value="5,1" />

<Setter Property="Margin"

Value="2" />

<Setter Property="telerik:RadDockPanel.Dock"

Value="Left" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="White"

Offset="0" />

<GradientStop Color="Gainsboro"

Offset="0.5" />

<GradientStop Color="#FFADADAD"

Offset="0.5" />

<GradientStop Color="#FFD4D4D4"

Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush"

Value="#FF848484" />

<Setter Property="IsTabStop"

Value="False" />

</Style>

</RepeatButton.Style>

</RepeatButton>

<ScrollViewer x:Name="ScrollViewerElement"

BorderThickness="0"

HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}"

IsTabStop="False"

Margin="2,4,2,0"

VerticalScrollBarVisibility="Disabled">

<ScrollViewer.Style>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="HorizontalContentAlignment"

Value="Left" />

<Setter Property="VerticalContentAlignment"

Value="Top" />

<Setter Property="Padding"

Value="0" />

<Setter Property="BorderThickness"

Value="0" />

<Setter Property="BorderBrush"

Value="Transparent" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="2">

<Grid Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ScrollContentPresenter x:Name="ScrollContentPresenter"

Cursor="{TemplateBinding Cursor}"

CanHorizontallyScroll="False"

CanVerticallyScroll="False"

ContentTemplate="{TemplateBinding ContentTemplate}"

Content="{TemplateBinding Content}"

Margin="{TemplateBinding Padding}" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ScrollViewer.Style>

<ItemsPresenter />

</ScrollViewer>

</telerik:RadDockPanel>

</Grid>

</telerik:LayoutTransformControl>

<Border x:Name="ContentBorder"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding Background}"

Padding="{TemplateBinding Padding}">

<Grid>

<ContentPresenter x:Name="ContentElement"

ContentTemplate="{TemplateBinding SelectedContentTemplate}">

<ContentPresenter.Visibility>

<Binding Path="IsContentPreserved"

RelativeSource="{RelativeSource TemplatedParent}">

<Binding.Converter>

<telerik:InvertedBooleanToVisibilityConverter />

</Binding.Converter>

</Binding>

</ContentPresenter.Visibility>

</ContentPresenter>

<Grid x:Name="ContentElementsPanel">

<Grid.Visibility>

<Binding Path="IsContentPreserved"

RelativeSource="{RelativeSource TemplatedParent}">

<Binding.Converter>

<telerik:BooleanToVisibilityConverter />

</Binding.Converter>

</Binding>

</Grid.Visibility>

</Grid>

</Border>

</telerik:RadDockPanel>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="DropDownDisplayMode"

Value="Visible">

<Setter Property="Visibility"

TargetName="DropDownButtonElement"

Value="Visible" />

</Trigger>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="DropDownDisplayMode"

Value="WhenNeeded" />

<Condition Property="ComputedHorizontalScrollBarVisibility"

SourceName="ScrollViewerElement"

Value="Visible" />

</MultiTrigger.Conditions>

<Setter Property="Visibility"

TargetName="DropDownButtonElement"

Value="Visible" />

</MultiTrigger>

<Trigger Property="TabStripPlacement"

Value="Left">

<Setter Property="telerik:RadDockPanel.Dock"

TargetName="HeaderDockedElement"

Value="Left" />

<Setter Property="LayoutTransform"

TargetName="HeaderDockedElement">

<Setter.Value>

<RotateTransform Angle="-90" />

</Setter.Value>

</Setter>

<Setter Property="BorderThickness"

Value="0,1,1,1" />

</Trigger>

<Trigger Property="TabStripPlacement"

Value="Right">

<Setter Property="telerik:RadDockPanel.Dock"

TargetName="HeaderDockedElement"

Value="Right" />

<Setter Property="LayoutTransform"

TargetName="HeaderDockedElement">

<Setter.Value>

<RotateTransform Angle="90" />

</Setter.Value>

</Setter>

<Setter Property="BorderThickness"

Value="1,1,0,1" />

</Trigger>

<Trigger Property="TabStripPlacement"

Value="Bottom">

<Setter Property="telerik:RadDockPanel.Dock"

TargetName="HeaderDockedElement"

Value="Bottom" />

<Setter Property="LayoutTransform"

TargetName="HeaderDockedElement">

<Setter.Value>

<RotateTransform Angle="180" />

</Setter.Value>

</Setter>

<Setter Property="BorderThickness"

Value="1,1,1,0" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

This does not have the desired effect, however. It appears that the {DynamicResource xxx} values I've specified are overridden somewhere, because every time I run the program and change to night mode, the colors do not change.

What am I doing wrong here? What is the correct way to do what I want to do? Here's the XAML for the RadTabControl in my program:

<telerik:RadTabControl Background="{DynamicResource ContentBackground}"

FontSize="22"

FontWeight="Bold"

Grid.Column="0"

Name="OperationsTabs"

SelectionChanged="Tabs_SelectionChanged"

Visibility="Collapsed">

<telerik:RadTabItem . . . />

</telerik:RadTabControl>

7 Answers, 1 is accepted

answered on 26 Mar 2012, 08:17 PM

Upon looking at my code more closely, I found that I had changed the Background and Foreground properties of the first RadTabItem in my XAML. I duplicated that code to the other tabs and now the header of each tab has the colors I want, though the background behind the tabs is not changing. Further, the colors for the selected tabs are still black text on white background.

So what I need to know, then, is what elements of the template do I have to modify in order to get the background behind the tabs to be the color I want, and to get the selected tab to have the background and foreground colors I want.

Tony

answered on 02 Apr 2012, 07:37 AM

Hello Chris,

You can bind the Foreground of the RadTabItems to the IsSelected property and use converter like so:

<Style TargetType="{x:Type telerik:RadTabItem}" >

<Setter Property="MinWidth" Value="5" />

<Setter Property="BorderThickness" Value="1,1,1,0" />

<Setter Property="Foreground"

Value="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}, Converter={StaticResource converter}}" />

public class IsSelectedToForeGroundConverter: IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

var selected = value as bool?;

if (selected.HasValue)

{

if (selected == true)

{

return new SolidColorBrush(){Color = Colors.Blue};

}

return new SolidColorBrush() { Color = Colors.Green };

}

Please let us know if this is suitable for you.

Greetings,
Petar Mladenov
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>