一.前言
申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
本文主要内容:
- 下拉选择控件ComboBox的自定义样式及扩展;
- 自定义多选控件MultiComboBox;
二.下拉选择控件ComboBox的自定义样式及扩展
2.1基本样式
先看看基础效果图:
从功能上ComboBox有两种状态:
-
- 可编辑文本;
- 不可编辑文本。
从XAML的逻辑树结构上看,分为几个部分:
- 显示当前内容的区域;
- 下拉按钮,一般使用ToggleButton;
- 弹出的下拉选项列表,使用Popup作为容器;
样式定义代码:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!--下拉条目样式-->
<Style TargetType="ComboBoxItem" x:Key="ComboBoxItemStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Height" Value="28" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}" Margin="0,0.5">
<Border x:Name="ItemBackground" IsHitTestVisible="False" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}" />
<ContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ItemBackground" Property="Background" Value="{StaticResource ItemSelectedBackground}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ItemBackground" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--水印:local:ControlAttachProperty.Watermark-->
<!--Label区域:local:ControlAttachProperty.LabelTemplate ,local:ControlAttachProperty.Label-->
<!--附加内容区域:local:ControlAttachProperty.AttachContent-->
<!--圆角:local:ControlAttachProperty.CornerRadius-->
<!--local:ControlAttachProperty.MouseOverBorderBrush-->
<!--local:ControlAttachProperty.FocusBorderBrush-->
<!--local:ControlAttachProperty.FocusBackground-->
<Style TargetType="{x:Type ComboBox}" x:Key="DefaultComboBox">
<Setter Property="Height" Value="30" />
<Setter Property="Width" Value="200" />
<Setter Property="Foreground" Value="{StaticResource TextForeground}" />
<Setter Property="Background" Value="{StaticResource TextBackground}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center"