Styling RadToolBar

RadToolBar control uses StyleSelector mechanism to re-style its items. The control has predefined styles for the most commonly used controls as its content.

Example 1: Default predefined styles

<Style TargetType="telerik:RadToolBar" x:Key="RadToolBarStyle">
    <Setter Property="ItemContainerStyleSelector">
        <Setter.Value>
            <telerik:ToolBarContainerStyleSelector>
                <telerik:ToolBarContainerStyle TypeName="RadToolBarSeparator" ContainerStyle="{StaticResource RadToolBarSeparatorStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="TextBlock" ContainerStyle="{StaticResource ToolBarTextBlockStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="TextBox" ContainerStyle="{StaticResource ToolBarTextBoxStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="Button" ContainerStyle="{StaticResource ToolBarButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="ToggleButton" ContainerStyle="{StaticResource ToolBarToggleButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="CheckBox" ContainerStyle="{StaticResource ToolBarCheckBoxStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="RadioButton" ContainerStyle="{StaticResource ToolBarRadioButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="RadButton" ContainerStyle="{StaticResource ToolBarRadButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="RadToggleButton" ContainerStyle="{StaticResource ToolBarRadToggleButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="RadRadioButton" ContainerStyle="{StaticResource ToolBarRadRadioButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="RadDropDownButton" ContainerStyle="{StaticResource ToolBarRadDropDownButtonStyle}"/>
                <telerik:ToolBarContainerStyle TypeName="RadSplitButton" ContainerStyle="{StaticResource ToolBarRadSplitButtonStyle}"/>
            </telerik:ToolBarContainerStyleSelector>
        </Setter.Value>
    </Setter>
</Style>

To change a predefined style of a given control the TypeName property of the Style need to be set.

RadToolBarSeparator

<Window.Resources>
     <Style x:Key="CustomRadToolBarSeparatorStyle" TargetType="telerik:RadToolBarSeparator">
        <Setter Property="BorderBrush" Value="Red"/>
        <Setter Property="Width" Value="5"/>
        <Setter Property="Margin" Value="5 5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadToolBarSeparator">
                    <Grid MinWidth="2" MinHeight="2" SnapsToDevicePixels="True">
                        <Rectangle Margin="1 1 0 0" Fill="{TemplateBinding BorderBrush}"/>
                        <Rectangle Margin="0 0 1 1" Fill="{TemplateBinding Background}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadToolBarSeparator" ContainerStyle="{StaticResource CustomRadToolBarSeparatorStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <telerik:RadToolBarSeparator />
</telerik:RadToolBar>

Button

<Window.Resources>
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="Button" ContainerStyle="{StaticResource CustomButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <Button Content="Button" />
</telerik:RadToolBar>

RadButton

<Window.Resources>
    <Style x:Key="CustomRadButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadButton" ContainerStyle="{StaticResource CustomRadButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <telerik:RadButton Content="RadButton" />
</telerik:RadToolBar>

ToggleButton

<Window.Resources>
    <Style x:Key="CustomToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="ToggleButton" ContainerStyle="{StaticResource CustomToggleButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <ToggleButton Content="ToggleButton" />
</telerik:RadToolBar>

RadToggleButton

<Window.Resources>
    <Style x:Key="CustomRadToggleButtonStyle" TargetType="telerik:RadToggleButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadToggleButton" ContainerStyle="{StaticResource CustomRadToggleButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <telerik:RadToggleButton Content="RadToggleButton" />
</telerik:RadToolBar>

RadioButton

<Window.Resources>
    <Style x:Key="CustomRadioButtonStyle" TargetType="RadioButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadioButton" ContainerStyle="{StaticResource CustomRadioButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <RadioButton Content="RadioButton" />
</telerik:RadToolBar>

RadRadioButton

<Window.Resources>
    <Style x:Key="CustomRadRadioButtonStyle" TargetType="telerik:RadRadioButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadRadioButton" ContainerStyle="{StaticResource CustomRadRadioButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <telerik:RadRadioButton Content="RadRadioButton" />
</telerik:RadToolBar>

RadDropDownButton

<Window.Resources>
    <Style x:Key="CustomRadDropDownButtonStyle" TargetType="telerik:RadDropDownButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadDropDownButton" ContainerStyle="{StaticResource CustomRadDropDownButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <telerik:RadDropDownButton Content="RadDropDownButton" />
</telerik:RadToolBar>

RadSplitButton

<Window.Resources>
    <Style x:Key="CustomRadSplitButtonStyle" TargetType="telerik:RadSplitButton">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="RadSplitButton" ContainerStyle="{StaticResource CustomRadSplitButtonStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <telerik:RadSplitButton Content="Button" />
</telerik:RadToolBar>

CheckBox

<Window.Resources>
    <Style x:Key="CustomCheckBoxStyle" TargetType="CheckBox">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="CheckBox" ContainerStyle="{StaticResource CustomCheckBoxStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <CheckBox Content="CheckBox Text" />
</telerik:RadToolBar>

TextBlock

<Window.Resources>
    <Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="TextBlock" ContainerStyle="{StaticResource CustomTextBlockStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <TextBlock Text="Custom Text" />
</telerik:RadToolBar>

TextBox

<Window.Resources>
    <Style x:Key="CustomTextBoxStyle" TargetType="TextBox">
        <Setter Property="Background" Value="Red"/>
    </Style>        
    <telerik:ToolBarContainerStyleSelector x:Key="selector">
        <telerik:ToolBarContainerStyle TypeName="TextBox" ContainerStyle="{StaticResource CustomTextBoxStyle}" />
    </telerik:ToolBarContainerStyleSelector>
</Window.Resources>
<telerik:RadToolBar ItemContainerStyleSelector="{StaticResource selector}">
    <TextBox Text="Custom Text" />
</telerik:RadToolBar>

See Also

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