一．前言
申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。
本文主要内容：
- 下拉选择控件ComboBox的自定义样式及扩展；
- 自定义多选控件MultiComboBox；
二．下拉选择控件ComboBox的自定义样式及扩展
2.1基本样式
先看看基础效果图：
从功能上ComboBox有两种状态：
-
- 可编辑文本；
- 不可编辑文本。
从XAML的逻辑树结构上看，分为几个部分：
- 显示当前内容的区域；
- 下拉按钮，一般使用ToggleButton；
- 弹出的下拉选项列表，使用Popup作为容器；
样式定义代码：
<!--下拉条目样式-->
<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