漂亮的下拉列表样式

效果如下图所示：

 

 

以下是Xaml资源文件的定义部分 页面引用：Style="{DynamicResource ComboBoxMore}"

 

     <!--ComboBox样式-->
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

    <!--<SnippetWindowBackgroundBrush>-->
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

    <!--<SnippetSolidBorderBrush>-->
    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

    <!--<SnippetDisabledBackgroundBrush>-->
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

    <!--<SnippetDisabledBorderBrush>-->
    <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

    <SolidColorBrush x:Key="NormalBorderBrush" Color="#FF182047" />
   
    <SolidColorBrush x:Key="GlyphBrush" Color="#FF20607A" />

    <LinearGradientBrush x:Key="ComboxBackgroudBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFFFFBFB" Offset="0.3"/>
                <GradientStop Color="#FFB7B5B5" Offset="1"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ComboxMouseOverBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFE1FAFB" Offset="0.3"/>
                <GradientStop Color="#FFA6FBFD" Offset="1"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <Border
        x:Name="Border"
        Grid.ColumnSpan="2"
        CornerRadius="4,4,4,4"
        BorderBrush="{StaticResource NormalBorderBrush}"
        BorderThickness="1" Background="{StaticResource ComboxBackgroudBrush}" />
            <Border
        Grid.Column="0"
        CornerRadius="2,0,0,2"
        Margin="1"
        BorderBrush="{StaticResource NormalBorderBrush}"
        BorderThickness="0,0,1,0"  Background="{StaticResource ComboxBackgroudBrush}" x:Name="Border1" />
            <Path
        x:Name="Arrow"
        Grid.Column="1"    
        Fill="{StaticResource GlyphBrush}"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Data="M 0 0 L 4 4 L 8 0 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource ComboxMouseOverBrush}" />
                <Setter TargetName="Border1" Property="Background" Value="{StaticResource ComboxMouseOverBrush}" />
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="true">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource ComboxMouseOverBrush}" />
                <Setter TargetName="Border1" Property="Background" Value="{StaticResource ComboxMouseOverBrush}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
    </ControlTemplate>
   
    <Style x:Key="ComboBoxMore" TargetType="ComboBox">
        <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="MinWidth" Value="120"/>
        <Setter Property="MinHeight" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <ToggleButton
              Name="ToggleButton"
              Template="{StaticResource ComboBoxToggleButton}"
              Grid.Column="2"
              Focusable="false"
              IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
              ClickMode="Press">
                        </ToggleButton>
                        <!--<SnippetComboBoxSelectionBox>-->
                        <ContentPresenter
              Name="ContentSite"
              IsHitTestVisible="False"
              Content="{TemplateBinding SelectionBoxItem}"
              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
              Margin="3,3,23,3"
              VerticalAlignment="Center"
              HorizontalAlignment="Left" />
                        <!--</SnippetComboBoxSelectionBox>-->
                        <TextBox x:Name="PART_EditableTextBox"
              Style="{x:Null}" mce_Style="{x:Null}"
              Template="{StaticResource ComboBoxTextBox}"
              HorizontalAlignment="Left"
              VerticalAlignment="Center"
              Margin="3,3,23,3"
              Focusable="True"
              Background="Transparent"
              Visibility="Hidden"
              IsReadOnly="{TemplateBinding IsReadOnly}"/>
                        <Popup
              Name="Popup"
              Placement="Bottom"
              IsOpen="{TemplateBinding IsDropDownOpen}"
              AllowsTransparency="True"
              Focusable="False"
              PopupAnimation="Slide">
                            <Grid
                Name="DropDown"
                SnapsToDevicePixels="True"               
                MinWidth="{TemplateBinding ActualWidth}"
                MaxHeight="{TemplateBinding MaxDropDownHeight}" Height="120">
                                <Border
                  x:Name="DropDownBorder"
                  Background="{StaticResource WindowBackgroundBrush}"
                  BorderThickness="1"
                  BorderBrush="{StaticResource SolidBorderBrush}"/>
                                <ScrollViewer Margin="1,1,1,1" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                        </Trigger>
                        <Trigger Property="IsEditable"
                 Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
        </Style.Triggers>
    </Style>