Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 920
Balo Avatar asked Jul 18 '13 15:07

Balo


People also ask

How do I change the color of a ComboBox in WPF?

Right click on the ComboBox element in the design view in Visual Studio again and then select the “Edit Additional Templates” option followed by the “Edit Generated Item Container (ItemContainerStyle)” and “Edit a copy…” options.

What happens when we select a value from a ComboBox in WPF?

Selected and Current Item Text property of ComboBox represents the text of the current selected item in a ComboBox. SelectedItem represents the first item in the currently selected items in a ComboBox. SelectedValue represents the value of the currently selected item in a ComboBox.

What is a ComboBox XAML?

Advertisements. A ComboBox represents a selection control that combines a non-editable textbox and a drop-down list box that allows users to select an item from a list. It either displays the current selection or is empty if there is no selected item.


3 Answers

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

like image 123
Richard E Avatar answered Nov 15 '22 07:11

Richard E


Thanks Richard E!

Here a clean version of Richard E's answer:

<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>
    <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>
    <Style  x:Key="RoundComboBox" 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"
                                    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>

UPDATE:

After changing to get my custom version I found out it wasn't the best example to start with (editable combobox, not optimized, missing style etc ...), I found a good example on this website:

http://www.wpfhelper.com/index.php/styles-in-wpf/combobox/15-combobox-style-in-wpf

And here my custom version (to implement in Resources ex: in tag <UserControl.Resources>):

<Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="32" />
                        </Grid.ColumnDefinitions>
                        <Border
                          x:Name="Border"
                          Grid.ColumnSpan="2"
                          CornerRadius="8"
                          Background="{TemplateBinding Background}"
                          BorderBrush="#F6F6F6"
                          BorderThickness="1" 
                        />

                        <Path
                            x:Name="Arrow"
                            Grid.Column="1"    
                            Fill="{TemplateBinding Foreground}"
                            Stroke="{TemplateBinding Foreground}"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Data="M 0 0 L 4 4 L 8 0 Z"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="True" />
    </ControlTemplate>

    <Style x:Key="theComboBox" TargetType="{x:Type ComboBox}">
        <Setter Property="Foreground" Value="#333" />
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="Background" Value="White" />
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="FontSize" Value="13" />
        <Setter Property="MinWidth" Value="150"/>
        <Setter Property="MinHeight" Value="35"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <ToggleButton
                            Cursor="Hand"
                            Name="ToggleButton"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            Foreground="{TemplateBinding Foreground}"
                            Style="{StaticResource ComboBoxToggleButton}"
                            Grid.Column="2"
                            Focusable="false"
                            IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                            ClickMode="Press"/>

                        <ContentPresenter
                            Name="ContentSite"
                            IsHitTestVisible="False"
                            Content="{TemplateBinding SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            Margin="10,3,30,3"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left" />
                        <TextBox x:Name="PART_EditableTextBox"
                            Style="{x:Null}"
                            Template="{StaticResource ComboBoxTextBox}"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Margin="3,3,23,3"
                            Focusable="True"                               
                            Visibility="Hidden"
                            IsReadOnly="{TemplateBinding IsReadOnly}"/>
                        <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
                                    CornerRadius="8"
                                    x:Name="DropDownBorder"
                                    Background="White"
                                    BorderThickness="1"
                                    BorderBrush="#F6F6F6"
                                    />
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
        </Style.Triggers>
    </Style>
    <Style x:Key="theComboBoxItem" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="FontSize" Value="13" />
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Border
                        Name="Border"
                        Padding="5"
                        Margin="2"
                        BorderThickness="2,0,0,0"
                        CornerRadius="0"
                        Background="Transparent"
                        BorderBrush="Transparent">
                        <TextBlock TextAlignment="Left">
                            <ContentPresenter />
                        </TextBlock>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter TargetName="Border" Property="BorderBrush" Value="#B3CB37"/>
                            <Setter TargetName="Border" Property="Background" Value="#F8FAEB"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And here the Combobox and style implementation:

<ComboBox 
    FontSize="13"
    Style="{DynamicResource theComboBox}"
    Padding="15,5,15,5"
    HorizontalContentAlignment="Left"
    VerticalAlignment="Center"
    MinWidth="100"
    MaxWidth="375"
    Grid.Row="1"
    Grid.Column="1"
    ItemContainerStyle="{DynamicResource theComboBoxItem}"
>
    <ComboBoxItem>Available</ComboBoxItem>
    <ComboBoxItem>Busy</ComboBoxItem>
    <ComboBoxItem>On Duty</ComboBoxItem>
    <ComboBoxItem>On Meeting</ComboBoxItem>
    <ComboBoxItem>On Vacation</ComboBoxItem>
    <ComboBoxItem>On Weekend</ComboBoxItem>
</ComboBox>
like image 40
Safe Avatar answered Nov 15 '22 07:11

Safe


Add a ComboBox in your WPF project, right click on it and select EditTemplate> Edit a copy... Choose a name for style and click ok. vs create a ComboBoxTemplate for ComboBox. now you can add a border and set desired CornerRadius to ComboBoxTemplate.

like image 21
mohsen mousavi Avatar answered Nov 15 '22 07:11

mohsen mousavi