wpf ComboBox 自定义圆角样式使用iconfont图标并实现带箭头的下拉框功能

1. 首先，我们需要创建一个自定义样式来实现圆角和图标的效果。我们可以使用样式模板来定义 ComboBox 的外观，如下所示：

<Style x:Key="CustomComboBoxStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid>
                    <ToggleButton x:Name="ToggleButton" Grid.Column="2" ClickMode="Press" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                        <ToggleButton.Template>
                            <ControlTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="5" BorderThickness="1">
                                        <Border.BorderBrush>
                                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                <GradientStop Color="#FF2E2E2E" Offset="0"/>
                                                <GradientStop Color="#FF4F4F4F" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.BorderBrush>
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                <GradientStop Color="#FF4F4F4F" Offset="0"/>
                                                <GradientStop Color="#FF2E2E2E" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <TextBlock x:Name="TextBlock" Text="{TemplateBinding SelectionBoxItem}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Foreground="White"/>
                                    </Border>
                                    <Canvas Grid.Column="1" Width="20" Height="20">
                                        <Path Data="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Fill="White" Stretch="Uniform" Width="20" Height="20"/>
                                    </Canvas>
                                    <Path Grid.Column="2" Data="M0,0 L4,4 L8,0" Fill="White" Margin="0,4,4,4" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="Gray"/>
                                        <Setter TargetName="Border" Property="BorderBrush" Value="Gray"/>
                                    </Trigger>
                                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="Gray"/>
                                        <Setter TargetName="Border" Property="BorderBrush" Value="Gray"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="DarkGray"/>
                                        <Setter TargetName="Border" Property="BorderBrush" Value="DarkGray"/>
                                        <Setter TargetName="TextBlock" Property="Foreground" Value="Gray"/>
                                        <Setter TargetName="ToggleButton" Property="IsEnabled" Value="False"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                        <Border x:Name="DropDownBorder" CornerRadius="5" BorderThickness="1" BorderBrush="Gray" Background="White">
                            <ScrollViewer>
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在这个样式模板中，我们使用了 ToggleButton 控件作为 ComboBox 的触发器，当用户单击 ToggleButton 时，下拉框就会弹出。ToggleButton 中包含了一个 Border 控件和一个 Canvas 控件，用于显示 ComboBox 的文本和图标。我们还为 Border 设置了圆角和边框样式，以实现圆角的效果。

2. 接下来，我们需要添加一个 iconfont 图标。我们可以在 iconfont 网站上找到所需的图标，并将其添加到项目中。

<Window.Resources>
    <FontFamily x:Key="IconFont">/Resources/Fonts/#iconfont</FontFamily>
</Window.Resources>

...

<Path x:Key="ComboBoxIcon" Data="M0,0 L4,4 L8,0" Fill="White" Stretch="Uniform" Width="20" Height="20" Margin="0,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Right"/>

在这个例子中，我们使用了一个 Path 控件来显示图标，这个 Path 控件的 Data 属性指定了图标的轮廓路径。我们还为 ComboBoxIcon 设置了 Fill、Stretch、Width、Height 和 Margin 等属性，以实现图标的效果。

3. 最后，我们需要将 ComboBox 样式应用到 ComboBox 控件，并将 ComboBoxIcon 添加到 ComboBox 的 Tag 属性中。这样就可以在 ComboBox 中显示带箭头的下拉框了。

<ComboBox Style="{StaticResource CustomComboBoxStyle}" Width="120" Height="30">
    <ComboBoxItem Content="Option 1"/>
    <ComboBoxItem Content="Option 2"/>
    <ComboBoxItem Content="Option 3"/>
    <ComboBox.Tag>
        <StaticResource ResourceKey="ComboBoxIcon"/>
    </ComboBox.Tag>
</ComboBox>

在这个例子中，我们创建了一个 ComboBox 控件，并将 CustomComboBoxStyle 样式应用到 ComboBox 中。我们还添加了几个 ComboBoxItem 作为 ComboBox 的选项。最后，我们将 ComboBoxIcon 添加到 ComboBox 的 Tag 属性中，以显示图标。