Wpf 下拉框自定义样式

最新推荐文章于 2025-10-24 16:52:42 发布

原创最新推荐文章于 2025-10-24 16:52:42 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

wpf 专栏收录该内容

22 篇文章

订阅专栏

这篇博客详细介绍了如何为WPF中的ComboBox控件定制样式，包括TextBox组件、ToggleButton的样式，以及ComboBox整体风格和下拉列表项的外观。通过设置模板和触发器，实现了视觉效果的个性化定制。

<!--ComboBox中TextBox组件-->
        <Style TargetType="TextBox" x:Key="stlTextBox">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Height" Value="25"></Setter>
        </Style>
        <!--下拉列表中ToggleButton-->
        <Style TargetType="ToggleButton" x:Key="stlToggleButton">
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate  TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <Border Width="20" Height="25" HorizontalAlignment="Right" BorderBrush="White" BorderThickness="0.7,0.5,0,0">
                                <Border.Background>
                                    <SolidColorBrush Color="#353535" />
                                </Border.Background>
                                <Path Data="M0,0L3.5,4 7,0z" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--ComboBoxStyle-->
        <Style TargetType="{x:Type ComboBox}">
            <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>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="Height" Value="25"></Setter>
            <Setter Property="Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Border  BorderBrush="White" BorderThickness="0.7" Background="#434245">
                            <Grid>
                                <!--下拉箭头-->
                                <ToggleButton   Style="{StaticResource stlToggleButton}" Focusable="False"
             IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
             ClickMode="Press">
                                </ToggleButton>
                                <!--项内容-->
                                <ContentPresenter  IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" VerticalAlignment="Center" Margin="3" HorizontalAlignment="Stretch" />
                                <TextBox x:Name="PART_EditableTextBox" HorizontalAlignment="Stretch" Focusable="True" Visibility="Collapsed" IsReadOnly="False"/>
                                <!--下拉显示面板HorizontalOffset:设置下拉面板的相对位置-->
                                <Popup HorizontalOffset="-1" Width="{TemplateBinding ActualWidth}"  IsOpen="{TemplateBinding IsDropDownOpen}" Focusable="False"    PopupAnimation="Slide">
                                    <Grid  SnapsToDevicePixels="True" HorizontalAlignment="Stretch"   >
                                        <Border  BorderThickness="1,1,1,1" BorderBrush="White" HorizontalAlignment="Stretch" >
                                            <Border.Background>
                                                <SolidColorBrush Color="#FF545356" />
                                            </Border.Background>
                                        </Border>
                                        <ScrollViewer  SnapsToDevicePixels="True" HorizontalAlignment="Stretch" >
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" HorizontalAlignment="Stretch" />
                                        </ScrollViewer>
                                    </Grid>
                                </Popup>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--下拉列表项样式-->
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="ItemBorder" Padding="2" Margin="1" HorizontalAlignment="Stretch">
                            <ContentPresenter HorizontalAlignment="Stretch"></ContentPresenter>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="ItemBorder" Value="#FF3A3A3A"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>