显示效果下图:
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窗体的引用如下:文章来源:https://www.toymoban.com/news/detail-596453.html
<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窗体的引用如下(动态数据绑定等):文章来源地址https://www.toymoban.com/news/detail-596453.html
<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>
到了这里,关于WPF下拉框ComboBox样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!