整体效果如下
xaml中类型代码:
<!--Combox右侧下拉按钮--> <Style TargetType="ToggleButton" x:Key="ComboxStyleBtn"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <!--下拉按钮内部背景色--> <Border x:Name="Back" Background="#001f55" BorderThickness="1" BorderBrush="Transparent"> <!--下拉按钮内边框--> <Path Name="PathFill" Fill="#03ffea" Width="10" Height="6" StrokeThickness="0" Data="M5,0 L10,10 L0,10 z" RenderTransformOrigin="0.5,0.5" Stretch="Fill"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="180"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="PathFill" Property="Fill" Value="White"></Setter> <Setter TargetName="Back" Property="Background" Value="#00CA4F"></Setter> <Setter TargetName="Back" Property="BorderBrush" Value="#59CA4F"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--Combox--> <Style TargetType="ComboBox" x:Key="ComboBoxStyle"> <Setter Property="ItemContainerStyle"> <Setter.Value> <!--ComBoxItem--> <Style TargetType="ComboBoxItem"> <Setter Property="MinHeight" Value="22"></Setter> <Setter Property="MinWidth" Value="60"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBoxItem"> <Border Name="Back" Background="Transparent" BorderThickness="0,0,0,0" BorderBrush="#81D779" > <ContentPresenter ContentSource="{Binding Source}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" ></ContentPresenter> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter> </Trigger> <!--下拉框背景色--> <Trigger Property="IsHighlighted" Value="True"> <Setter TargetName="Back" Property="Background" Value="#ff0000"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBox"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.7*"/> <ColumnDefinition Width="0.3*" MaxWidth="30"/> </Grid.ColumnDefinitions> <!--文字区域背景和边线样式--> <TextBox Background="#001f55" VerticalAlignment="Center" Grid.Column="0" Foreground="#03ffea" BorderBrush="#03ffea" BorderThickness="0" IsReadOnly="{TemplateBinding IsReadOnly}" Text="{TemplateBinding Text}"></TextBox> <Border Grid.Column="0" BorderThickness="1" BorderBrush="#03ffea" CornerRadius="1,0,0,1"> </Border> <!--右侧下拉button设置--> <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#03ffea" CornerRadius="0,1,1,0"> <ToggleButton BorderThickness="3" BorderBrush="#03ffea" Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton> </Border> <!--弹出popup整体设置--> <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide" > <!--弹出popup边框--> <Border CornerRadius="1" BorderBrush="#03ffea" BorderThickness="1,0,1,1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> <Border.Effect> <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="1"/> </Border.Effect> <!--下拉幕布边界背景设置 MaxHeight="{TemplateBinding MaxDropDownHeight}"--> <ScrollViewer Margin="0,0,0,0" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderBrush="#17acae" BorderThickness="2" > <!-- StackPanel 用于显示子级,方法是将 IsItemsHost 设置为 True --> <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="#001f55" /> </ScrollViewer> </Border> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>