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

本文介绍了如何在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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义 WPF ComboBox样式,步骤如下: 1. 创建一个新的 WPF 项目。 2. 在项目中打开 MainWindow.xaml 文件。 3. 在窗口中添加一个 ComboBox 控件。 4. 在 ComboBox 控件中添加一些项。 ```xml <ComboBox> <ComboBoxItem>Item 1</ComboBoxItem> <ComboBoxItem>Item 2</ComboBoxItem> <ComboBoxItem>Item 3</ComboBoxItem> </ComboBox> ``` 5. 现在我们将使用模板来自定义 ComboBox样式。右键单击 ComboBox 控件,选择“编辑模板”->“编辑复制的模板”->“创建”。 6. 在“对象和时间线”窗口中,找到名为“ComboBox”的控件模板。 7. 在模板中找到“Border”元素,并添加以下属性: ```xml <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> ``` 8. 在“ToggleButton”元素中添加以下属性: ```xml <ToggleButton x:Name="toggleButton" Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ComboBoxToggleButton}"/> ``` 这将在 ComboBox 上添加一个箭头按钮。 9. 在“Popup”元素中添加以下属性,以更改下拉列表的背景颜色: ```xml <Popup x:Name="popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"> <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"> <Border x:Name="DropDownBorder" Background="White" BorderThickness="1" BorderBrush="Black" CornerRadius="3"/> <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/> </ScrollViewer> </Grid> </Popup> ``` 10. 最后,添加以下样式到项目中: ```xml <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="20"/> </Grid.ColumnDefinitions> <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="3" BorderThickness="1,1,1,1" Background="White" BorderBrush="Black"/> <Border Grid.Column="0" CornerRadius="3" Margin="1" Background="{TemplateBinding Background}" BorderThickness="0,0,0,0"/> <Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" Fill="Black"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="ToggleButton.IsChecked" Value="True"> <Setter TargetName="Border" Property="Background" Value="#FFC1E0FF"/> <Setter TargetName="Border" Property="BorderBrush" Value="#FFA5CBE2"/> <Setter TargetName="Arrow" Property="Fill" Value="#FF000000"/> </Trigger> <Trigger Property="UIElement.IsEnabled" Value="False"> <Setter TargetName="Border" Property="Background" Value="#FFF4F4F4"/> <Setter TargetName="Border" Property="BorderBrush" Value="#FFADB2B5"/> <Setter TargetName="Arrow" Property="Fill" Value="#FF808080"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 11.运行程序,现在你将看到一个美丽的自定义 ComboBox 样式。 希望这能帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值