WPF下拉框ComboBox样式

显示效果下图：

1、静态显示如图1，悬浮如图2

2、下拉的Popup带阴影（无Border）；下拉三角图标用的是自己的png图片，可任意替换（其他或Path数据等自己处理）；宽高等可直接在样式代码里修改。

3、实际项目里，对下拉的滚动条做了美化处理，此处没附带上相关代码。有需求的可自己添加或用第三方控件库帮助类实现（如Panuon，其ScrollViewerHelper类可方便的修改宽度和圆角）

样式代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/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="Collapsed" />
        </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="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="{TemplateBinding 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" AllowsTransparency="True" MaxHeight="{TemplateBinding MaxDropDownHeight}" Focusable="False" PopupAnimation="Slide">
                                <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}" Margin="18,0,18,18">
                                    <!--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 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="{TemplateBinding Margin}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                                </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>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

Xaml窗体的引用如下：

<Window x:Class="WpfApp图片比对.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/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}" ItemContainerStyle="{StaticResource XxxComboBoxItemStyle}" SelectedItem="{Binding XxxModel}" >
    <ComboBox.ItemTemplate>
       <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" ToolTip="{Binding ToolTip}" />                          
       </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>