wpfcomboboxstylescontroltemplatecornerradius

How to change the CornerRadius of the Combobox WPF


I want to use a ComboBox with different CornerRadius, how can I change that simply? I've tried with Style and ControlTemplate, but without any success.


Solution

  • I don't know if this is simple, but creating a ControlTemplate based on the default ComboBox should do the trick. Here is an example:

        <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"
                                Background="{TemplateBinding Background}"
                                    BorderBrush="Black">
                                <ScrollViewer x:Name="PART_ContentHost"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <Style TargetType="{x:Type ComboBox}">
            <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"
                                        Background="Azure"
                                        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>
    

    You will need to define the VisualStates/Triggers in the Style if required