kb-colorpicker-change-palette-background-color.md

title	page_title	description	type	slug	position	tags	ticketid	res_type
How to Change RadColorPicker Palette Header Background Color	Modify the Brush of RadColorPicker Palette Header Background	Replace ColorPicker Palette Header Background Color.	how-to	kb-colorpicker-change-palette-background-color	0	color,brush,palette	1427810	kb

Environment

Product Version	2019.2.618
Product	RadColorPicker for WPF

Description

How to change the Background Color of RadColorPicker's palette Headers.

Solution

1. [Extract the ControlTemplate]({%slug styling-apperance-editing-control-templates%}) of RadColorSelector. This is the control used to display the colors in RadColorPicker.

2. In the template, find the TextBlock elements with x:Name properties set to: mainPaletteHeader, standardPaletteHeader and RecentColorsPaletteHeader.

3. Set the Background properties of the Border elements that wrap the TextBlocks.

   [XAML]

   {{region kb-colorpicker-change-palette-background-color-0}} <Style x:Key="CustomRadColorSelectorStyle" TargetType="telerik:RadColorSelector">
   <Setter.Value>

    				<!-- Change the Background property of the Border element -->
    				<Border BorderBrush="#FF848484" BorderThickness="0,0,0,1" Background="#FFB900" Margin="0,0,0,3" Grid.Row="1">
    					<TextBlock x:Name="mainPaletteHeader" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" Margin="10,2,2,2" Text="{TemplateBinding MainPaletteHeaderText}" VerticalAlignment="Center"/>
    				</Border>
   
    				<!-- other parts of the template -->
    				
    				<!-- Change the Background property of the Border element -->
    				 <Border x:Name="StandardPaletteBorder" BorderBrush="#FF848484" BorderThickness="0,0,0,1" Background="#FFB900" Margin="0,2,0,3" Grid.Row="4">
    					<TextBlock x:Name="standardPaletteHeader" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" Margin="10,2,2,2" Text="{TemplateBinding StandardPaletteHeaderText}" VerticalAlignment="Center"/>
    				</Border>
    				
    				<!-- other parts of the template -->
    				
    				<!-- Change the Background property of the Border element -->
    				<Border x:Name="RecentColorsPaletteBorder" BorderBrush="#FF848484" BorderThickness="0,0,0,1" Background="#FFB900" Margin="0,2,0,3" Grid.Row="6" Visibility="Collapsed">
    					<TextBlock x:Name="RecentColorsPaletteHeader" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" Margin="10,2,2,2" Text="{TemplateBinding RecentColorsHeaderText}" VerticalAlignment="Center"/>
    				</Border>
    									
    				<!-- other parts of the template -->
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
   

   {{endregion}}

4. Apply the customized template using the ColorSelectorStyle property of RadColorPicker.

   [XAML]

   {{region kb-colorpicker-change-palette-background-color-0}} <telerik:RadColorPicker ColorSelectorStyle="{StaticResource CustomRadColorSelectorStyle}" /> {{endregion}}