Introduction
Round Corner WPF Combobox is a custom WPF ComoboBox built using XAML code. It represents a selection control with a drop-down list in round corner pane that can be shown or hidden by clicking the arrow on the control.
This blog provides XAML to customize the button, the textbox and pate exist in the Combobox to make its corner round in WPF.
Round Corner WPF Combobox
 |
Round Corner WPF Combobox |
Getting Started
The main elements of a WPF Combobox are a TextBox, a Button and a panel control. The TextBox in WPF Combobox is used to display the selected item text. The Button is used to open or close the drop down pane of Combobox.
The Panel actually contains the list of items of WPF Combobox, by default it hides it's contents(Combobox Items) and displays when the Combobox button clicks for second time.
Here This blog provides code in XAML to customize the Combobox button, Combobox textbox separately and uses toghter in Combobox style to make Combobox round corner.
Round Corner WPF Combobox
Code Examples
The below XAML codes declare style for Combobox button, it makes the Combobox button roundable corner by customermize the ControlTemplate of button control. Inside the button control a border is declared that actually makes the button control roundable corner.
The CornerRadius property of Border control makes border rounded, here the CornerRadius set 0,5,5,0 which make border right upper corner and right button corner round.
Style for Combobox button
<Style x:Key="ComboboxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border
Background="White"
x:Name="border"
CornerRadius="0,5,5,0"
BorderThickness="0,1,1,1"
BorderBrush="Black">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Round Corner WPF Combobox
The below XAML code constomzes the TextBox control of Combobox. As like button control, here also customized the ControlTemplate of TextBox and declared the border to make the TextBox roundable.
The CornerRadius property of border control is 5,0,0,5, means the top left corner and the button left corner of TextBox is made roundable because the button has top right corner and buttom right corner round.
Style for WPF Combobox TextBox
<Style x:Key="ComboboxTextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="5,0,0,5"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="Black">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Round Corner WPF Combobox
This XAML codes customized the WPF Combobox and the DropDown panel to mathe WPF Combobox as Round Corner WPF Combobox. Inside the ControlTemplate of Combobox a Grid is declared to provide the proper position to TextBox, Button and DropDown panel. Inside the Grid XALML codes are written for calling Textbox style and Button Style.
Style for Combobox
<Style x:Key="ComboboxStyle" TargetType="{x:Type Combobox}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Combobox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Style="{StaticResource ComboboxTextBoxStyle}"
Padding="5,0,0,0"
Height="{TemplateBinding Height}"/>
<ToggleButton Grid.Column="1" Margin="0"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboboxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="DodgerBlue" />
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="5"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Round Corner WPF Combobox
Use style in Combobox
<Combobox Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="208,66,0,0" Height="25" Style="{StaticResource ComboboxStyle}">
<ComboboxItem>A</ComboboxItem>
<ComboboxItem>B</ComboboxItem>
<ComboboxItem>C</ComboboxItem>
</Combobox>
Related Articles
- Data Validation in WPF
- WPF Round Corner Button with click effects
- Round Corner PasswordBox in WPF
- Round Corner TextBox in WPF
- WPF Custom Datagrid Control(Filterable)
- WPF Round Corner ListBox
- Custom RadioButtonListBox With Image
- RadiobuttonList in WPF
- Custom CheckedListBox in WPF
Summary
In this blog Round Corner WPF Combobox, we saw how to create round corner Combobox in WPF,by customizing the Combobox Textbox, Toggle button and dropdown panel. Here we also discussed how to apply style in Combobox, TextBox and Button control. I hope you have enjoyed it a lot.
Thanks
