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
  1. <ComboBox Name="combobox" Height = "20" Width = "80" HorizontalAlignment = "Center" VerticalAlignment = "Center">
  2. </ComboBox>
You can select a particular item from a list of items in the combo box using the ComboBoxItem property.
  1. <ComboBox Name="combobox" Height="20" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center">
  2. <ComboBoxItem Content="WPF"/>
  3. <ComboBoxItem Content="Xamarin"/>
  4. <ComboBoxItem Content="MVC"/>
  5. <ComboBoxItem Content="Angular"/>
  6. </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
  1. <StackPanel.Resources>
  2. <Style TargetType="ComboBox">
  3. <Setter Property="HorizontalAlignment" Value="Center"/>
  4. <Setter Property="FontFamily" Value="Calibri"/>
  5. <Setter Property="FontSize" Value="14"/>
  6. </Style>
  7. </StackPanel.Resources>
Example
  1. <Window.Resources>
  2. <Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}">
  3. <Setter Property="OverridesDefaultStyle" Value="true"/>
  4. <Setter Property="AllowDrop" Value="true"/>
  5. <Setter Property="MinWidth" Value="0"/>
  6. <Setter Property="MinHeight" Value="0"/>
  7. <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
  8. <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
  9. <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
  10. <Setter Property="Template">
  11. <Setter.Value>
  12. <ControlTemplate TargetType="{x:Type TextBox}">
  13. <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false"
  14. HorizontalScrollBarVisibility="Hidden"
  15. VerticalScrollBarVisibility="Hidden"/>
  16. </ControlTemplate>
  17. </Setter.Value>
  18. </Setter>
  19. </Style>
  20. <ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
  21. <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
  22. <Grid.ColumnDefinitions>
  23. <ColumnDefinition Width="*"/>
  24. <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
  25. </Grid.ColumnDefinitions>
  26. <ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
  27. </Grid>
  28. </ControlTemplate>
  29. </Window.Resources>

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.