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>
borderbox</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"/>
<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"/>
<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论