WPF 自定义ComboBox样式

要自定义 WPF ComboBox 的样式，步骤如下：

1. 创建一个新的 WPF 项目。

2. 在项目中打开 MainWindow.xaml 文件。

3. 在窗口中添加一个 ComboBox 控件。

4. 在 ComboBox 控件中添加一些项。

<ComboBox>
    <ComboBoxItem>Item 1</ComboBoxItem>
    <ComboBoxItem>Item 2</ComboBoxItem>
    <ComboBoxItem>Item 3</ComboBoxItem>
</ComboBox>

5. 现在我们将使用模板来自定义 ComboBox 的样式。右键单击 ComboBox 控件，选择“编辑模板”->“编辑复制的模板”->“创建”。

6. 在“对象和时间线”窗口中，找到名为“ComboBox”的控件模板。

7. 在模板中找到“Border”元素，并添加以下属性：

<Border x:Name="border" Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="3">

8. 在“ToggleButton”元素中添加以下属性：

<ToggleButton x:Name="toggleButton" Grid.Column="2"
                Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                Template="{StaticResource ComboBoxToggleButton}"/>

这将在 ComboBox 上添加一个箭头按钮。

9. 在“Popup”元素中添加以下属性，以更改下拉列表的背景颜色：

<Popup x:Name="popup" Placement="Bottom"
        IsOpen="{TemplateBinding IsDropDownOpen}"
        AllowsTransparency="True" Focusable="False"
        PopupAnimation="Slide">
    <Grid x:Name="DropDown" SnapsToDevicePixels="True"
            MinWidth="{TemplateBinding ActualWidth}"
            MaxHeight="{TemplateBinding MaxDropDownHeight}">
        <Border x:Name="DropDownBorder" Background="White"
                BorderThickness="1" BorderBrush="Black"
                CornerRadius="3"/>
        <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
        </ScrollViewer>
    </Grid>
</Popup>

10. 最后，添加以下样式到项目中：

<Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="Border" Grid.ColumnSpan="2"
                            CornerRadius="3"
                            BorderThickness="1,1,1,1"
                            Background="White"
                            BorderBrush="Black"/>
                    <Border Grid.Column="0"
                            CornerRadius="3" Margin="1"
                            Background="{TemplateBinding Background}"
                            BorderThickness="0,0,0,0"/>
                    <Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"
                            Fill="Black"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="#FFC1E0FF"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="#FFA5CBE2"/>
                        <Setter TargetName="Arrow" Property="Fill" Value="#FF000000"/>
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="#FFF4F4F4"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="#FFADB2B5"/>
                        <Setter TargetName="Arrow" Property="Fill" Value="#FF808080"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

11.运行程序，现在你将看到一个美丽的自定义 ComboBox 样式。

希望这能帮助到你！