Create Consistent Style for RadComboBox in a RadToolBar Control

Environment

Product Version	2022.1 117
Product	RadToolBar for WPF

Description

The RadToolBar control has predefined styles for the most commonly used controls as its content. A list of these controls can be found in the Styling RadToolBar article.

However, you may want to use a control which is not styled out of the box, such as the RadComboBox control, for example. This article provides an example on how to set a style for the RadComboBox element, which is defined inside a RadToolBar element.

Solution

Add a new ToolBarContainerStyle instance to the ToolBarContainerStyleSelector property of the RadToolBar element, and set its TypeName property to "RadComboBox".

<telerik:ToolBarContainerStyleSelector> 
    <telerik:ToolBarContainerStyle TypeName="RadComboBox" /> 
</telerik:ToolBarContainerStyleSelector> 

When using certain themes, different properties would need to be changed, so that the RadComboBox element would look the same as the rest of the controls inside the RadToolBar instance.

For Office2019 and Crystal themes, modify the Margin property:

<!--Set BasedOn property if NoXaml assemblies are used: BasedOn="{StaticResource RadComboBoxStyle}"--> 
<Style x:Key="ToolBarRadComboBoxStyle" TargetType="telerik:RadComboBox"> 
    <Setter Property="Margin" Value="1" /> 
</Style> 

For VisualStudio2019 theme, modify the BorderThickness, Margin, and Background properties:

<!--Set BasedOn property if NoXaml assemblies are used: BasedOn="{StaticResource RadComboBoxStyle}"--> 
<Style x:Key="ToolBarRadComboBoxStyle" TargetType="telerik:RadComboBox"> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="Margin" Value="4" /> 
    <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="BorderThickness" Value="1" /> 
        </Trigger> 
        <Trigger Property="IsKeyboardFocusWithin" Value="True"> 
            <Setter Property="BorderThickness" Value="1" /> 
        </Trigger> 
        <Trigger Property="IsEditable" Value="False"> 
            <Setter Property="Background" Value="Transparent"/> 
        </Trigger> 
        <Trigger Property="IsEditable" Value="True"> 
            <Setter Property="BorderThickness" Value="1" /> 
        </Trigger> 
    </Style.Triggers> 
</Style> 

Finally, set the created Style to the ContainerStyle property of the newly introduced ToolBarContainerStyle element.

<telerik:ToolBarContainerStyleSelector> 
    <telerik:ToolBarContainerStyle TypeName="RadComboBox" ContainerStyle="{StaticResource ToolBarRadComboBoxStyle}" /> 
</telerik:ToolBarContainerStyleSelector> 

See Also

• Styling RadToolBar