We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the style for combobox?

Platform: WPF |
Control: GridDataControl |
.NET Framework: 4.5 |
Product Version:

Style customization is used to change the look and feel of any control. GridCellComboBoxDropDown is the UIElement loaded in GridDataControl when you set CellType as “ComboBox. Style is applied only in edit mode, when you apply the custom style to GridCellComboBoxDropDown control. Since the UIElement is loaded only in edit mode.

In the following screenshot, GridDataControl is loaded with customized style for GridCellComboBoxDropDown. But, the style is not applied.

C:\Users\jayapradha\Desktop\Customize combobox style\Without style.PNG

In Edit mode, Custom style is applied to the GridCellComboBoxDropDown as shown in the following screenshot.

C:\Users\jayapradha\Desktop\Customize combobox style\EditMode.PNG

When you load GridCellComboBoxDropDown, (with its default style), the text is drawn. When you enter edit mode, the GridCellComboBoxDropDown control is loaded directly. Custom style is applied only in an edit mode. You can overcome this problem by overriding GridCellComboBoxCellRenderer, to draw the GridCellComboBoxDropDown control by applying the custom style when GridDataControl is loaded.

Following XAML code example illustrates the customized style for GridCellComboBoxDropDown control where backgrounds are customized.



In the following XAML ComboBox CellType, set to Property1 column that loads GridCellComboBoxDropDown control.



The default renderer (GridCellComboBoxCellRenderer) of ComboBox CellType is replaced with CustomRenderer (named as GridCellDropDownRendererExt) that is derived from GridCellComboBoxCellRenderer.



GridCellComboBoxCellRenderer provides virtual methods and properties to customize its behavior. For your use case, you can apply custom style defined in application when GridCellComboBoxDropDown control is drawn. For this you need to override OnRender method in GridCellComboBoxCellRenderer. OnRender method draws GridCellComboBoxDropDown and the Text. While drawing the GridCellComboBoxDropDown, it is converted into VisualBrush and it is drawn at the specified location using DrawingContext. Creating visual brush and drawing text are covered in DrawDropDownPaintExt class that is discussed in the following section.



DropDownPaintExt class draws the GridCellDropDownControl by applying custom style and the Text to the DrawingContext. In the following class GetVisualBrush method converts the UIElement(GridCellComboBoxDropDown) into VisualBrush after merging the customized style to its ResourceDictionary. GridTextBoxPaint.DrawText draws the Text over the VisualBrush.


Finally, when you override the ComboBox cell renderer, GridCellComboBoxDropDown Control is drawn with customized style as shown in the following screenshot.


Final output

Please refer the following sample to apply the custom style for ComboBox CellType.

Sample Link: CustomStyleofComboBox

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile