ComboBox下拉框样式,带设置圆角外框和选中内容

最新推荐文章于 2025-10-24 16:52:42 发布
原创最新推荐文章于 2025-10-24 16:52:42 发布 · 3.3k 阅读
1 ·
CC 4.0 BY-SA版权
WPF 专栏收录该内容
64 篇文章
订阅专栏
本文介绍如何为ComboBox组件定制样式，实现圆角外框及个性化选中内容显示，适用于前端界面设计，提升用户体验。
    <!-- 下拉列表中ToggleButton -->
    <Style TargetType="ToggleButton" x:Key="stlToggleButton">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ToggleButton}">
                    <Grid>
                        <TextBlock></TextBlock>
                        <Border Width="22.5"  HorizontalAlignment="Right"  BorderBrush="White" >
                            <Border.Background>
                                <SolidColorBrush Color="#2ED1D0"/>
                            </Border.Background>
                            <Path Data="M0,0L3.5,4 7,0z" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 短下拉框样式 -->
    <Style TargetType="{x:Type ComboBox}" x:Key="ShortComboxStyle">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="Margin" Value="2,5,2,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Border BorderBrush="{StaticResource Primary}" BorderThickness="2" CornerRadius="3" Background="White">
                        <Grid>
                            <!-- 下拉箭头 -->
                            <ToggleButton Style="{StaticResource stlToggleButton}" 
                                          IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"/>
                            <!-- 项内容 -->
                            <ContentPresenter Margin="0,0,22,1" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <!-- 下拉显示面板HorizontalOffset:设置下拉面板的相对位置 -->
                            <Popup HorizontalOffset="-1" 
                                   VerticalOffset="5"
                                   Width="{TemplateBinding ActualWidth}" 
                                   IsOpen="{TemplateBinding IsDropDownOpen}" 
                                   AllowsTransparency="True"
                                   Focusable="False" 
                                   PopupAnimation="Slide" >
                                <Grid SnapsToDevicePixels="True" HorizontalAlignment="Stretch">
                                    <!-- 圆角背景 -->
                                    <Border x:Name="Bd"
                                            BorderThickness="1" 
                                            CornerRadius="5"
                                            BorderBrush="{StaticResource Kerley}" 
                                            Background="White" 
                                            HorizontalAlignment="Stretch">
                                        <!-- 面板内容 -->
                                        <StackPanel Margin="0,10" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" HorizontalAlignment="Stretch"/>
                                    </Border>
                                </Grid>
                            </Popup>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Grid>
                                    <Border x:Name="back" BorderThickness="0" BorderBrush="Transparent" Background="Transparent"/>
                                    <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" SnapsToDevicePixels="True"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Background" TargetName="back" Value="{StaticResource Primary}"/>
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" TargetName="back" Value="{StaticResource Primary}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>