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>
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>
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>
Style
to the ContainerStyle
property of the newly introduced ToolBarContainerStyle
element.
<telerik:ToolBarContainerStyleSelector>
<telerik:ToolBarContainerStyle TypeName="RadComboBox" ContainerStyle="{StaticResource ToolBarRadComboBoxStyle}" />
</telerik:ToolBarContainerStyleSelector>