一.前言
申明: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="Center" />