WPF 自定义ComboBox样式，自定义多选控件

最新推荐文章于 2022-11-07 19:14:24 发布

weixin_33816611

最新推荐文章于 2022-11-07 19:14:24 发布

阅读量972

点赞数

文章标签： git

原文链接：http://www.cnblogs.com/xiaomingg/p/8748286.html

版权

本文介绍了如何在WPF中自定义ComboBox的样式，特别是实现一个多选功能的ComboBox——MultiComboBox。文章详细讲解了从添加自定义控件，定义其样式，到后台初始化数据的全过程，并提供了示例代码。完整代码已上传至GitHub。

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

一、ComboBox基本样式

ComboBox有两种状态，可编辑和不可编辑状态。通过设置IsEditable属性可以切换控件状态。

先看基本样式效果：

基本样式代码如下：

<!--ComboBox-->
        <!--ComBoBox项选中背景色-->
        <SolidColorBrush x:Key="ComboBoxSelectdBackground" Color="#ff8c69"/>
        <!--ComBoBox项鼠标经过背景色-->
        <SolidColorBrush x:Key="ComboBoxMouseOverBackground" Color="#ff3030"/>
        <!--ComBoBox项选中前景色-->
        <SolidColorBrush x:Key="ComboBoxSelectedForeground" Color="White"/>
        <!--ComBoBox项鼠标经过前景色-->
        <SolidColorBrush x:Key="ComboBoxMouseOverForegrond" Color="White"/>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="Height" Value="20"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate  TargetType="{x:Type ComboBoxItem}">
                                    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                        <Border x:Name="_borderbg" Background="Transparent"/>
                                        <TextBlock Margin="3 0 3 0" VerticalAlignment="Center" x:Name="_txt" Foreground="#333" Text="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
                                        <Border x:Name="_border" Background="White" Opacity="0"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="true">
                                            <Setter TargetName="_borderbg" Property="Background" Value="{StaticResource ComboBoxSelectdBackground}" />
                                            <Setter TargetName="_txt" Property="Foreground" Value="{StaticResource ComboBoxSelectedForeground}"/>
                                        </Trigger>
                                        <MultiTrigger>
                                            <MultiTrigger.Conditions>
                                                <Condition Property="IsSelected" Value="false"/>
                                                <Condition Property="IsMouseOver" Value="true"/>
                                            </MultiTrigger.Conditions>
                                            <Setter TargetName="_borderbg" Property="Background" Value="{StaticResource ComboBoxMouseOverBackground}" />
                                            <Setter TargetName="_txt" Property="Foreground" Value="{StaticResource ComboBoxMouseOverForegrond}"/>
                                        </MultiTrigger>

                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.7*"/>
                                <ColumnDefinition Width="0.3*" MaxWidth="30"/>
                            </Grid.ColumnDefinitions>
                            <Border  Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="1,0,0,1"/>
                            <ContentPresenter HorizontalAlignment="Left" Margin="3,3,0,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding It