aistudio-wpf-diagram/AIStudio.Wpf.Mind/Styles/ComboBox.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:dd="https://gitee.com/akwkevin/aistudio.-wpf.-diagram">

    <dd:BrushOpacityConverter x:Key="BrushOpacityConverter"/>

    <Geometry x:Key="DownArrowGeometry">M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z</Geometry>

    <Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <ContentPresenter Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />

                            <Grid x:Name="arrowGlyph" Grid.Column="1">
                                <Path x:Name="Arrow"
                                 Width="9"
                                 Height="6"
                                 Margin="0 0 3 0"
                                 Stretch="Fill"
                                 Data="{StaticResource DownArrowGeometry}" 
                                 Fill="#FF000000"/>
                            </Grid>
                        </Grid>

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Arrow" Property="Fill" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent},
                                Converter={StaticResource BrushOpacityConverter}, ConverterParameter=0.16}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FlatComboBoxStyle" TargetType="{x:Type ComboBox}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="15" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="border" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="3"/>
                        <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>

                        <!--ToggleButton 已数据绑定到 ComboBox 本身以切换 IsDropDownOpen-->
                        <ToggleButton Grid.Column="0"  Grid.ColumnSpan="2"  x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Style="{StaticResource ComboBoxToggleButton}"/>
                        <!--必须将 TextBox 命名为 PART_EditableTextBox，否则 ComboBox 将无法识别它-->
                        <TextBox   Visibility="Hidden" BorderThickness="0"   Margin="2 0 0 0" x:Name="PART_EditableTextBox"  VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>

                        <!--Popup 可显示 ComboBox 中的项列表。IsOpen 已数据绑定到通过 ComboBoxToggleButton 来切换的 IsDropDownOpen-->
                        <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                            <Grid MaxHeight="400" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                <Border x:Name="DropDownBorder"  BorderBrush="#e8e8e8" BorderThickness="1 0 1 1"/>
                                <ScrollViewer Margin="1"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                    <!--StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True-->
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <!--设置鼠标进入时的背景、前景样式-->
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{Binding Foreground,
                                RelativeSource={RelativeSource Mode=TemplatedParent},
                                Converter={StaticResource BrushOpacityConverter},
                                ConverterParameter=0.16}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FlatComboBox2ColumnStyle" TargetType="{x:Type ComboBox}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="15" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="border" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="3"/>
                        <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>

                        <!--ToggleButton 已数据绑定到 ComboBox 本身以切换 IsDropDownOpen-->
                        <ToggleButton Grid.Column="0"  Grid.ColumnSpan="2"  x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Style="{StaticResource ComboBoxToggleButton}"/>
                        <!--必须将 TextBox 命名为 PART_EditableTextBox，否则 ComboBox 将无法识别它-->
                        <TextBox Visibility="Hidden" BorderThickness="0"   Margin="2 0 0 0" x:Name="PART_EditableTextBox"  VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>

                        <!--Popup 可显示 ComboBox 中的项列表。IsOpen 已数据绑定到通过 ComboBoxToggleButton 来切换的 IsDropDownOpen-->
                        <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                            <Grid MaxHeight="400" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                <Border x:Name="DropDownBorder"  BorderBrush="#e8e8e8" BorderThickness="1 0 1 1"/>
                                <ScrollViewer Margin="1"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                    <!--StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True-->
                                    <UniformGrid Columns="2" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <!--设置鼠标进入时的背景、前景样式-->
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{Binding Foreground,
                                RelativeSource={RelativeSource Mode=TemplatedParent},
                                Converter={StaticResource BrushOpacityConverter},
                                ConverterParameter=0.16}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>