WPF自定义下拉框ComboBox样式

很多时候不知道控件样式的构成，可以上msdn查看控件的模板与样式。

ComboBox下拉框主要放内容的是Popup控件，有三种显示items的方式：

① 默认的ItemsPresenter 相当于占位符作用，竖向显示

② ItemsPanel 竖向/横向显示：使用StackPanel/WrapPanel

③ ItemContainerStyle items样式可自定义（包括鼠标滑过等的效果）

（代码可直接复制下来使用）

例子以上②③都用到了：

下拉框被选中时蓝色，鼠标滑动时粉色；

下拉框不带阴影，内容高度40px，垂直居中，内容过多会自动生成滚动条。

上代码————————————>>>>>>>

【资源文件】

注： IsHighlighted - 选中后高亮的颜色； IsSelected - 被选中的颜色；

<!-- ComboBoxItem样式 --><Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem"><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Height" Value="40"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ComboBoxItem"><Border Name="Back" Background="Transparent" BorderThickness="0,0,0,0" BorderBrush="#FF6A6A6A" ><ContentPresenter ContentSource="{Binding Source}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Left" VerticalAlignment="Center"></ContentPresenter></Border><ControlTemplate.Triggers><Trigger Property="IsHighlighted" Value="True"><Setter TargetName="Back" Property="Background" Value="Pink"></Setter></Trigger><Trigger Property="IsSelected" Value="True"><Setter TargetName="Back" Property="Background" Value="#FFCBE3FE"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!-- ToggleButton样式（折叠展开按钮） --><Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"><Setter Property="OverridesDefaultStyle" Value="true"/><Setter Property="IsTabStop" Value="false"/><Setter Property="Focusable" Value="false"/><Setter Property="ClickMode" Value="Press"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><Border x:Name="templateRoot" CornerRadius="4" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FF565656"><Border x:Name="splitBorder" CornerRadius="4" Width="40" SnapsToDevicePixels="true" Margin="0" HorizontalAlignment="Right" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FF565656"><Border.Background><LinearGradientBrush EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFF9F8F8" Offset="0"/><GradientStop Color="#FFC6C6CA" Offset="0.75"/></LinearGradientBrush></Border.Background><Path x:Name="arrow" VerticalAlignment="Center" Margin="9,0,0,0" Stretch="Fill" Height="12" Width="16" HorizontalAlignment="Left" Fill="#FF565656" Data="M 50,50 L 0,0 100,0 z"/></Border></Border><ControlTemplate.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="true"/><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="false"/><Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="false"/><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="true"/></MultiDataTrigger.Conditions><Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF565656"/></MultiDataTrigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Fill" TargetName="arrow" Value="#FFADADAD"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFADADAD"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

外观样式使用Template，

①Template样式，popup为下拉框效果，使用ItemsPanel （StackPanel），并设定IsItemsHost="True"，即绑定了原控件的items显示，不使用itemsPresenter，否则会继续出现原item默认效果（如鼠标划过去蓝色背景...）

②Template样式，HasDropShadow触发器，设置的下拉框边框阴影

<!-- ComboBox Template样式 --><ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}"><Grid x:Name="templateRoot" SnapsToDevicePixels="true"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition Width="0"/></Grid.ColumnDefinitions><Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"><Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}"><ScrollViewer x:Name="DropDownScrollViewer"><Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled"><Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"><Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/></Canvas><StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Continue" Background="#FFFFFFFF"/><!--<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>--></Grid></ScrollViewer></Border></Popup><Border Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"><Grid><ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/><ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid></Border></Grid><ControlTemplate.Triggers><!--<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">  <Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>  <Setter Property="Color" TargetName="shadow" Value="#71000000"/>  </Trigger>--><Trigger Property="HasItems" Value="false"><Setter Property="Height" TargetName="dropDownBorder" Value="95"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsGrouping" Value="true"/><Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/></MultiTrigger.Conditions><Setter Property="ScrollViewer.CanContentScroll" Value="false"/></MultiTrigger><Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false"><Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/><Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/></Trigger></ControlTemplate.Triggers></ControlTemplate>

最后把以上样式放入到style属性中，样式布局就搞定了

<!-- ComboBox属性设置 --><Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}"><Setter Property="Background"><Setter.Value><LinearGradientBrush EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFF9F8F8" Offset="0"/><GradientStop Color="#FFC6C6CA" Offset="0.75"/></LinearGradientBrush></Setter.Value></Setter><Setter Property="BorderBrush" Value="#FFE4E7EC"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/><Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/><Setter Property="Padding" Value="6,3,5,3"/><Setter Property="ScrollViewer.CanContentScroll" Value="true"/><Setter Property="ScrollViewer.PanningMode" Value="Both"/><Setter Property="Stylus.IsFlicksEnabled" Value="False"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="ItemContainerStyle" Value="{DynamicResource ComboBoxItemStyle}"/><Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/></Style>

【界面 xaml】

Padding设置下拉内容位置，默认是垂直居中、水平靠左

（以下items，SelectedIndex设置默认选中的项）

<ComboBox Name="samplenoSource" FontFamily="FZLTZHUNHK" FontSize="18" Foreground="#FF545454" Width="412" Height="54" BorderBrush="#FF565656" VerticalContentAlignment="Center" Padding="65,0,0,0" IsEditable="False" Style="{DynamicResource ComboBoxStyle}" SelectedIndex="2"><ComboBoxItem Content="自动递增（A）" Padding="65,0,0,0"/><ComboBoxItem Content="ID条码阅读器（B）" Padding="65,0,0,0"/><ComboBoxItem Content="手工设定（M）" Padding="65,0,0,0"/><ComboBoxItem Content="电脑设定（C）" Padding="65,0,0,0"/></ComboBox>

WPF自定义下拉框ComboBox样式相关推荐

css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
uniapp 自定义下拉框
uniapp 自定义下拉框根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master 自己加了一层封装可以进行切换选择下拉内容模板 ...
文本域自定义下拉框支持模糊检索关键字高亮上下选择
转载自:文本域自定义下拉框支持模糊检索关键字高亮上下选择一.需求需要创建一个常见问题库,填写存在问题时可以下拉选择,可以模糊搜索,也可以手写.如果选择了问题库中的内容,自动填充内容到存在问 ...
【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...
Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件一．加载方式自定义下拉框不能通过标签的方式进行创建. <in ...
autojs自定义下拉框
牙叔教程简单易懂使用场景自定义下拉框spinner 效果展示 git动图较大, 稍等片刻, 马上就好 autojs版本 8.8.12-0 萌新三连问我要改背景我要改字体颜色我改了下拉框数据 ...
77_Qt_承接【75】解决表格tableWidget添加行、列，删除行、列，以及下拉框comboBox动态跟随变化问题【难点：removeItem、addItem所需参数不同】
下拉框comboBox动态跟随行.列,添加.删除变化功能: void myMainWindow::add_row() {int row = ui->tableWidget->current ...

WPF自定义下拉框ComboBox样式

WPF自定义下拉框ComboBox样式相关推荐

最新文章

热门文章