WPF 下拉框ComboBox 样式
显⽰效果下图：
1、静态显⽰如图1，悬浮如图2
2、下拉的Popup带阴影（⽆Border）；下拉三⾓图标⽤的是⾃⼰的png图⽚，可任意替换（其他或Path数据等⾃⼰处理）；宽⾼等可直接在样式代码⾥修改。
3、实际项⽬⾥，对下拉的滚动条做了美化处理，此处没附带上相关代码。有需求的可⾃⼰添加或⽤第三⽅控件库帮助类实现（如Panuon，其ScrollViewerHelper类可⽅便的修改宽度和圆⾓）
样式代码如下：
<ResourceDictionary xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/winfx/2006/xaml" >
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" BorderThickness="0" />
<Border Grid.Column="0" Background="Transparent" />
<Image Grid.Column="1" x:Name="downArrow" Source="/Image/cmbDown.png" Stretch="Uniform" Width="24" Height="24" Margin="6,0,6,0"/>            <Image Grid.Column="1" x:Name="upArrow" Source="/Image/cmbUp.png" Stretch="Uniform" Width="24" Height="24" Margin="6,0,6,0" Visibility="Collapse        </Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="downArrow" Property="Visibility" Value="Collapsed" />
<Setter TargetName="upArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="WpfComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Height" Value="36" />
<Setter Property="Padding" Value="12,0,33,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="MaxDropDownHeight" Value="150" />
<Setter Property="BorderBrush" Value="#E4E9F2" />
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="Foreground" Value="#3E434D" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<!--<ControlTemplate.Resources>
<ResourceDictionary Source="pack://application:,,,/Panuon.UI.Silver;component/Control.xaml" />
</ControlTemplate.Resources>-->
<Border x:Name="myBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="                        <Grid >
<ToggleButton x:Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" HorizontalOffset="-1" VerticalOffset="2" AllowsTr                                <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDro                                    <!--E4E9F2-->
<Border x:Name="DropDownBorder" BorderBrush="#E4E9F2" BorderThickness="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>
</Border>
<ScrollViewer Margin="1,5" Padding="0" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
<Grid.Effect>
<DropShadowEffect ShadowDepth="5" BlurRadius="18" Opacity="0.1" Color="#000000"></DropShadowEffect>
</Grid.Effect>
</Grid>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="myBorder" Property="BorderBrush" Value="#3377FF" />
</Trigger>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,4,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Setter Property="Foreground" Value="#3E434D" />
<Setter Property="Height" Value="36" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="Border" SnapsToDevicePixels="true" Background="Transparent" VerticalAlignment="Center" Padding="6,10,6,0">
<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBind                                </Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="#EAF1FF" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#D6E4FF" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
borderbox</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Xaml窗体的引⽤如下：
<Window x:Class="WpfApp图⽚⽐对.MainWindow"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/winfx/2006/xaml"
xmlns:d="schemas.microsoft/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp图⽚⽐对"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="500">
<Grid>
<WrapPanel HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0">
<ComboBox Style="{StaticResource WpfComboBoxStyle}">
<ComboBoxItem>下拉选项111111111</ComboBoxItem>
<ComboBoxItem>下拉选项2</ComboBoxItem>
<ComboBoxItem>下拉选项333</ComboBoxItem>
<ComboBoxItem>下拉选项4</ComboBoxItem>
</ComboBox>
</WrapPanel>
</Grid>
</Window>
Xaml窗体的引⽤如下（动态数据绑定等）：
<ComboBox Style="{StaticResource WpfComboBoxStyle}" Height="28" MinHeight="28" Width="100" MinWidth="100" ItemsSource="{Binding XxxModelList    <ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" ToolTip="{Binding ToolTip}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。