An Overview Of WPF Combo Box Style

What is a ComboBox?

A Combo Box control acts as a List Box control which has a list of multiple items to select from. Only one item at a time can be selected from the collection, which means one item is visible at a time. Combo Box allows us to make a selection from the collection and the user can pick an item from it.

Example

<ComboBox Name="combobox" Height = "20" Width = "80" HorizontalAlignment = "Center" VerticalAlignment = "Center">
</ComboBox>

You can select a particular item from a list of items in the combo box using the ComboBoxItem property.

<ComboBox Name="combobox" Height="20" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center">
<ComboBoxItem Content="WPF"/>
<ComboBoxItem Content="Xamarin"/>
<ComboBoxItem Content="MVC"/>
<ComboBoxItem Content="Angular"/>
</ComboBox>

Style in Combo Box Item

Here some properties are available for ComboBoxItem to create a unique ComboBox.

Background = Represents the background color of the combo box item.
Foreground = Represents the text color of the combo box item.
FontSize = Represents the font size of the combo box item.
Content = Represents the text of the combo box item.
FontWeight = Represents the font (like Bold) of the combo box item.
FontFamily = Represents the font style of the combo box item.

List of properties for Combo Box Items,

Normal = The default style.
Focused = Focus on the element.
Unfocused = Not focus on the element.
MouseOver = Over the mouse on the combo box.
Disabled = To disable the combo box.
Selected = Currently selected item.
Unselected = Not selected item.
SelectedUnfocused = The item is selected but not focused.

List of properties for Combo Box,

Normal = The default style.
Focused = Focus on the element.
Unfocused = Not focus on the element.
Editable = IsEditable=true used to edit the property.
Uneditable = IsEditable=false used to no edit the property.
MouseOver = Over the mouse on the combo box.
Disabled = To disable the combo box.
FocusedDropDown = For focus on dropdown combo box.
ActualHeight = Get the actual height of the element.
ActualWidth = Get actual width of the element.
BorderBrush = Get or set the brush for the background of the border.
BorderThickness = Get or set the border thickness of the combo box.
Cursor = Display cursor when the mouse point over the element.
Text = Get or set the text of the currently selected item
Margin = Get or set the margin on the element.
Padding = get or set the padding inside the element.
MaxHeight = Get or set the maximum height of an element.
MaxWidth = Get or set the maximum width of an element.
MinHeight = Get or set the minimum height of an element.
MinWidth = Get or set the minimum width of an element.

Some Events for Combo Box,

FocusableChanged = Event occurs when the value of the focusable property changed.
GotFocus = Event can occur when getting a logical focus on the element.
LostFocus = Event can occur when lost the logical focus on the element.
GotKeyboardFocus = Event can occur when the keyboard is focused on the element.
LostKeyboardFocus = Event can occur when the keyboard is no longer focused on the element.
SizeChanged = Event can occur when ActualHeight or ActualWidth property change on element.
MouseUp = Event can occur when any mouse button is released over the element.
MouseDown = Event can occur when any mouse button pointer is pressed over the element.
MouseWheel = Event can occur when you rotate the mouse wheel pointer over the element.
MouseMove = Event can occur when the mouse pointer is over the element.
MouseEnter = Event occurs when the mouse pointer enters the bounds of the element.
MouseLeave = Event occurs when the mouse pointer leaves the bounds of the element.
MouseDoubleClick = Event can occur when the mouse button clicks two or more times.
KeyDown = Event can occur when the key pressed while a focus on the element.
KeyUp = Event can occur when the key released while a focus on the element.

Combo Box Style

A Style is used to give different looks on elements compared to other elements. A Style can help you to get a look of all-over application. It’s a way to set multiple properties on a single element.

To apply the same style to all combo boxes, use TargetType = “ComboBox” in style, below is the example.

Example

<StackPanel.Resources>
<Style TargetType="ComboBox">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="14"/>
</Style>
</StackPanel.Resources>

Now extend the style with the previous combo box style with the help of x: Key.
1. <StackPanel.Resources>
2. <Style BasedOn="{StaticResource {x:Type ComboBox}}"
3. TargetType = "ComboBox" x:Key = "Title">
4. <Setter Property="FontSize" Value="16"/>
5. <Setter Property=" Foreground">
6. <Setter.Value>
7. <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.3,1">
8. <LinearGradientBrush.GradientStops>
9. <GradientStop Offset="0.0" Color=" #FF00FF"/>
10. <GradientStop Offset="0.0" Color=" #BFFF00"/>
11. </LinearGradientBrush.GradientStops>
12. </LinearGradientBrush>
13. </Setter.Value>
14. </Setter>
15. </Style>
16. </StackPanel.Resources>

Here is an example of the above-declared styles.
1. <StackPanel>
2. <ComboBox Style="{StaticResource Title}" Name="combobox1" Height="20" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center">
3. <ComboBoxItem Content="WPF"/>
4. <ComboBoxItem Content=" Xamarin"/>
5. </ComboBox>
6. <ComboBox Name="combobox2" Height="20" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center">
7. <ComboBoxItem Content=" MVC"/>
8. <ComboBoxItem Content=" Angular"/>
9. </ComboBox>
10. </StackPanel>

There is also another way to create a copy of an existing template and modify it. In visual studio, open WPF designer, select combo box control, then right click combo box control and select Edit template, then select Edit a Copy. This will create a style template, you can modify it as you need.

Example

<Window.Resources>
<Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</ControlTemplate>
</Window.Resources>

Edit a Copy is the best way to use a style template in your application instead of creating a new blank template. This is also a good choice to learn how the template works. In edit a copy, you just need to change a few aspects of the visual presentation.

Conclusion

In this blog, we have learned how WPF ComboBox styles work, what are its essential properties and its uses. We have seen practically all these concepts with simple steps.