C# WPF下自定义ComboBox背景、边线、颜色等代码实现

最新推荐文章于 2025-09-24 11:21:23 发布

原创最新推荐文章于 2025-09-24 11:21:23 发布 · 1.9w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#c# #WPF #ComboBox #自定义效果 #源码

C# 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个自定义WPF ComboBox样式的实例，详细展示了如何通过XAML实现ComboBox的外观定制，包括下拉按钮、项样式及弹出窗口等。

整体效果如下

xaml中类型代码：

<!--Combox右侧下拉按钮-->
        <Style TargetType="ToggleButton" x:Key="ComboxStyleBtn">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <!--下拉按钮内部背景色-->
                        <Border x:Name="Back" Background="#001f55" BorderThickness="1" BorderBrush="Transparent">
                            <!--下拉按钮内边框-->
                            <Path Name="PathFill" Fill="#03ffea"  Width="10" Height="6" StrokeThickness="0" Data="M5,0 L10,10 L0,10 z" RenderTransformOrigin="0.5,0.5" Stretch="Fill">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="180"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="PathFill" Property="Fill" Value="White"></Setter>
                                <Setter TargetName="Back" Property="Background" Value="#00CA4F"></Setter>
                                <Setter TargetName="Back" Property="BorderBrush" Value="#59CA4F"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--Combox-->
        <Style TargetType="ComboBox" x:Key="ComboBoxStyle">
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <!--ComBoxItem-->
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="MinHeight" Value="22"></Setter>
                        <Setter Property="MinWidth" Value="60"></Setter>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ComboBoxItem">
                                    <Border Name="Back" Background="Transparent"  BorderThickness="0,0,0,0" BorderBrush="#81D779" >
                                        <ContentPresenter ContentSource="{Binding Source}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" ></ContentPresenter>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
                                        </Trigger>
                                        <!--下拉框背景色-->
                                        <Trigger Property="IsHighlighted" Value="True">
                                            <Setter TargetName="Back" Property="Background" Value="#ff0000"></Setter>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.7*"/>
                                <ColumnDefinition Width="0.3*" MaxWidth="30"/>
                            </Grid.ColumnDefinitions>
                            <!--文字区域背景和边线样式-->
                            <TextBox Background="#001f55" VerticalAlignment="Center"  Grid.Column="0" Foreground="#03ffea" BorderBrush="#03ffea" BorderThickness="0" IsReadOnly="{TemplateBinding IsReadOnly}" Text="{TemplateBinding Text}"></TextBox>
                            <Border  Grid.Column="0" BorderThickness="1" BorderBrush="#03ffea" CornerRadius="1,0,0,1">

                            </Border>
                            <!--右侧下拉button设置-->
                            <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#03ffea" CornerRadius="0,1,1,0">
                                <ToggleButton BorderThickness="3" BorderBrush="#03ffea" Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton>
                            </Border>
                            <!--弹出popup整体设置-->
                            <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide" >
                                <!--弹出popup边框-->
                                <Border CornerRadius="1" BorderBrush="#03ffea" BorderThickness="1,0,1,1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                    <Border.Effect>
                                        <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="1"/>
                                    </Border.Effect>
                                    <!--下拉幕布边界背景设置 MaxHeight="{TemplateBinding MaxDropDownHeight}"-->
                                    <ScrollViewer Margin="0,0,0,0"   SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderBrush="#17acae" BorderThickness="2" >
                                        <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True -->
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="#001f55" />
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>