【WPF】自定义Combobox

阿月浑子2021

已于 2022-09-01 10:36:57 修改

阅读量2.1k

点赞数 3

分类专栏： WPF 文章标签： wpf

于 2022-01-21 23:21:44 首次发布

本文链接：https://blog.csdn.net/weixin_56814032/article/details/122630489

版权

本文介绍了如何在WPF中自定义ComboBox的样式，包括设置ComboBoxItem、按钮和Combobox本身的样式。详细讨论了IsHighlighted和IsSelected属性，以及Focusable、IsTabStop和ClickMode属性对控件行为的影响。此外，还讲解了如何通过IsItemsHost属性改变Items排列方式以及Canvas的IsHitTestVisible属性来优化交互体验。

摘要由CSDN通过智能技术生成

一个Combobox 由以下四个部分组成，可分别设置样式

在这里插入图片描述

设置ComboBoxItem样式

        <Style x:Key="ComboboxItemStyle" TargetType="ComboBoxItem">
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Foreground" Value="#787878"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <Border x:Name="itemBorder" Height="35" Width="35" Background="Transparent" Margin="8" CornerRadius="3">
                            <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted" Value="True">
                                <Setter Property="Background" Value="#DBDBDB" TargetName="itemBorder"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

ComboBoxItem的属性 IsHighlighted 在获得焦点时触发， IsSelected 在被选中时触发

设置按钮样式

        <Style x:Key="ComboBoxToggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="ClickMode" Value="Press" />
            <Setter Property="MinHeight" Value="22"></Setter>
            <Setter Property="MinWidth" Value="80"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Border CornerRadius="8" BorderThickness="1"  BorderBrush="#787878" Background="White">
                            </Border>
                            <!--倒三角的颜色#0099ff-->
                            <Path Height="5" x:Name="Path1" HorizontalAlignment="Right" 
                                VerticalAlignment="Center" Margin="5,0,15,0" Width="8"
                                Fill="#FFA8AAAC" Stretch="Fill" Stroke="#808080"
                                Data="M0.5,0.5 L9.5,0.5 L5.0625,9.5 L5.0625,9.5 z" >
                            <