ShrlAlgoToolkit/Melskin/Controls/FlattenComboBox.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Melskin;component/Themes/Animations.xaml" />
        <ResourceDictionary Source="/Melskin;component/Controls/IconElement.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <!--  只显示当前选项  -->
    <Style TargetType="{x:Type ComboBox}" x:Key="ComboBoxPreviewStyle">
        <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="4,2" />

        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="ScrollViewer.PanningMode" Value="Both" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid
                        Background="{TemplateBinding Background}"
                        IsHitTestVisible="False"
                        SnapsToDevicePixels="true"
                        x:Name="templateRoot">
                        <ContentPresenter
                            Content="{TemplateBinding SelectionBoxItem}"
                            ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            x:Name="contentPresenter" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

    <Style TargetType="{x:Type ToggleButton}" x:Key="FlattenComboBoxToggleButtonStyle">
        <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
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="0"
                        SnapsToDevicePixels="true"
                        x:Name="border">
                        <!--  下拉箭头  -->
                        <Border
                            BorderBrush="Transparent"
                            BorderThickness="1"
                            HorizontalAlignment="Right"
                            Margin="0"
                            SnapsToDevicePixels="true"
                            Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
                            x:Name="splitBorder">
                            <controls:IconElement
                                Foreground="{DynamicResource TextPrimaryBrush}"
                                RenderTransformOrigin="0.5,0.5"
                                SnapsToDevicePixels="false"
                                Symbol="KeyboardArrowDown"
                                x:Name="arrow">
                                <controls:IconElement.RenderTransform>
                                    <RotateTransform Angle="0" />
                                </controls:IconElement.RenderTransform>
                            </controls:IconElement>
                        </Border>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true" />
                        <!--  缩减阴影，下压效果  -->
                        <Trigger Property="IsPressed" Value="true" />
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource BorderGradientBrush}" />
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ExpandRotateStoryboard}" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource CollapseRotateStoryboard}" />
                            </Trigger.ExitActions>
                        </Trigger>
                        <!--  按钮禁用效果  -->
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" TargetName="arrow" Value="{DynamicResource TextDisabledBrush}" />
                            <Setter Property="Background" TargetName="border" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--  默认样式  -->
    <ControlTemplate TargetType="{x:Type ComboBox}" x:Key="FlattenComboBoxTemplate">
        <Grid SnapsToDevicePixels="true" x:Name="templateRoot">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />
            </Grid.ColumnDefinitions>
            <Popup
                AllowsTransparency="true"
                Grid.ColumnSpan="2"
                IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                Margin="-8"
                Placement="Bottom"
                PopupAnimation="Slide"
                VerticalOffset="4"
                x:Name="PART_Popup">
                <Border
                    Background="{DynamicResource BackgroundLayoutBrush}"
                    BorderBrush="{DynamicResource BorderNormalBrush}"
                    BorderThickness="1"
                    CornerRadius="4"
                    Margin="8"
                    MaxHeight="{TemplateBinding MaxDropDownHeight}"
                    MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                    x:Name="dropDownBorder">
                    <ScrollViewer Margin="4,3" x:Name="DropDownScrollViewer">
                        <Grid RenderOptions.ClearTypeHint="Enabled" x:Name="grid">
                            <Canvas
                                Height="0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"
                                Width="0"
                                x:Name="canvas">
                                <Rectangle
                                    Fill="{Binding Background, ElementName=dropDownBorder}"
                                    Height="{Binding ActualHeight, ElementName=dropDownBorder}"
                                    Width="{Binding ActualWidth, ElementName=dropDownBorder}"
                                    x:Name="opaqueRect" />
                            </Canvas>
                            <ItemsPresenter
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                x:Name="ItemsPresenter" />
                        </Grid>
                    </ScrollViewer>
                </Border>

            </Popup>
            <ToggleButton
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                Style="{StaticResource FlattenComboBoxToggleButtonStyle}"
                x:Name="toggleButton" />
            <ContentPresenter
                Content="{TemplateBinding SelectionBoxItem}"
                ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                Grid.Column="0"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                IsHitTestVisible="false"
                Margin="{TemplateBinding Padding}"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                x:Name="contentPresenter" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
                <Setter Property="Effect" TargetName="dropDownBorder" Value="{DynamicResource PopupShadow}" />
            </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 TargetType="{x:Type ComboBox}" x:Key="FlattenComboBoxStyle">
        <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
        <Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="4,2" />

        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="ScrollViewer.PanningMode" Value="Both" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="Template" Value="{StaticResource FlattenComboBoxTemplate}" />

    </Style>
</ResourceDictionary>