WPF ComboBox圆角设置、自定义项背景及下拉图标样式修改咨询

一、解决外部Border无效问题 #

单独给ComboBox加外部Border没效果，是因为WPF ComboBox的默认ControlTemplate内部自带Border元素，外部Border会被模板覆盖。必须通过修改ControlTemplate来实现样式自定义。

二、设置ComboBox圆角样式 #

通过修改模板内的主Border和下拉弹窗Border的CornerRadius属性实现圆角：

<Style x:Key="RoundedComboBoxStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid>
                    <!-- 主控件圆角Border -->
                    <Border x:Name="MainBorder" CornerRadius="8" BorderBrush="#E0E0E0" BorderThickness="1" Background="White">
                        <Grid>
                            <ToggleButton x:Name="ToggleButton" 
                                          Grid.Column="2" 
                                          IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                          Focusable="False"
                                          ClickMode="Press"
                                          Background="Transparent"
                                          BorderThickness="0">
                                <!-- 自定义图标区域，后续替换 -->
                            </ToggleButton>
                            <ContentPresenter x:Name="ContentSite"
                                              IsHitTestVisible="False"
                                              Content="{TemplateBinding SelectionBoxItem}"
                                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                              Margin="10,3,30,3"
                                              VerticalAlignment="Center" />
                            <TextBox x:Name="PART_EditableTextBox"
                                     Style="{x:Null}"
                                     HorizontalAlignment="Left"
                                     VerticalAlignment="Center"
                                     Margin="10,3,30,3"
                                     Focusable="True"
                                     Background="Transparent"
                                     Visibility="Hidden"
                                     IsReadOnly="{TemplateBinding IsReadOnly}" />
                        </Grid>
                    </Border>
                    <!-- 下拉弹窗圆角Border -->
                    <Popup x:Name="Popup"
                           Placement="Bottom"
                           IsOpen="{TemplateBinding IsDropDownOpen}"
                           AllowsTransparency="True"
                           Focusable="False"
                           PopupAnimation="Slide">
                        <Border x:Name="DropDownBorder"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="#E0E0E0"
                                Background="White">
                            <ScrollViewer x:Name="DropDownScrollViewer">
                                <ItemsPresenter x:Name="ItemsPresenter"
                                                KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
                <!-- 状态触发器 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEditable" Value="True">
                        <Setter Property="Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                        <Setter Property="Visibility" TargetName="ContentSite" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="MainBorder" Value="#B0B0B0"/>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="BorderBrush" TargetName="MainBorder" Value="#409EFF"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

三、自定义下拉列表项背景 #

修改ComboBoxItem的样式，实现鼠标悬停、选中状态的自定义背景：

<Style x:Key="CustomComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
    <Setter Property="Background" Value="White"/>
    <Setter Property="Foreground" Value="#333333"/>
    <Setter Property="Padding" Value="10,6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Border x:Name="ItemBorder" CornerRadius="4" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="ItemBorder" Value="#F5F7FA"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" TargetName="ItemBorder" Value="#E6F7FF"/>
                        <Setter Property="Foreground" Value="#409EFF"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="#CCCCCC"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在ComboBox中引用该样式：

<ComboBox Style="{StaticResource RoundedComboBoxStyle}" 
          ItemContainerStyle="{StaticResource CustomComboBoxItemStyle}"/>

四、替换下拉图标为指定样式 #

在ComboBox模板的ToggleButton中，替换默认箭头为自定义Path或图片：

用Path绘制图标（匹配参考样式） #

<ToggleButton x:Name="ToggleButton" 
              Grid.Column="2" 
              IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
              Focusable="False"
              ClickMode="Press"
              Background="Transparent"
              BorderThickness="0">
    <Grid Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Path Data="M7 10L12 15L17 10" Stroke="#666666" StrokeThickness="2" Fill="Transparent" />
    </Grid>
</ToggleButton>

用本地图片资源 #

<ToggleButton x:Name="ToggleButton" 
              Grid.Column="2" 
              IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
              Focusable="False"
              ClickMode="Press"
              Background="Transparent"
              BorderThickness="0">
    <Image Source="/YourProjectName;component/Images/CustomDropDownIcon.png" Width="16" Height="16"/>
</ToggleButton>

注意：将图片的生成操作设置为Resource，确保路径正确。

内容的提问来源于stack exchange，提问作者Hiba HL