建一个ResourceDictionary样式xaml:
<!--ComboBox样式自定义-->
<!--ComBoBox项选中背景色-->
<SolidColorBrush x:Key="ComboBoxSelectdBackground"
Color="#E3E6ED" />
<!--ComBoBox项鼠标经过背景色-->
<SolidColorBrush x:Key="ComboBoxMouseOverBackground"
Color="#E3E6ED" />
<!--ComBoBox项选中前景色-->
<SolidColorBrush x:Key="ComboBoxSelectedForeground"
Color="#333333" />
<!--ComBoBox项鼠标经过前景色-->
<SolidColorBrush x:Key="ComboBoxMouseOverForegrond"
Color="#333333" />
<!--ComboBox右侧的三角按钮-->
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
<Grid Height="25"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Border Background="White"
Grid.ColumnSpan="2"
Opacity="0" />
<Path x:Name="Arrow"
Grid.Column="1"
Data="M 0 0 6 6 12 0 Z"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="None"
Fill="#999" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="true">
<Setter TargetName="Arrow"
Property="RenderTransform">
<Setter.Value>
<RotateTransform CenterX="6"
CenterY="3"
Angle="180"></RotateTransform>
</Setter.Value>
</Setter>
<Setter TargetName="Arrow"
Property="Margin"
Value="0 0 0 2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--ComboBox-->
<Style TargetType="{x:Type ComboBox}"
x:Key="ComboBoxStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*" />
<ColumnDefinition Width="0.3*"
MaxWidth="30" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Grid.ColumnSpan="2"
BorderThickness="1"
BorderBrush="#dddddd"
CornerRadius="3,3,3,3">
</Border>
<ContentPresenter HorizontalAlignment="Left"
Margin="3,3,0,3"
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"
Template="{StaticResource ComboBoxToggleButton}"
x:Name="ToggleButton"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" />
<!--必须将 TextBox 命名为 PART_EditableTextBox,否则 ComboBox 将无法识别它-->
<TextBox Visibility="Hidden"
BorderThickness="0"
Margin="2 0 0 0"
x:Name="PART_EditableTextBox"
VerticalAlignment="Center"
Focusable="True"
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="350"
MinWidth="{TemplateBinding ActualWidth}"
x:Name="DropDown"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder"
BorderBrush="#e8e8e8"
BorderThickness="1 0 1 1"
CornerRadius="3,3,3,3" />
<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="IsEnabled"
Value="False">
<Setter TargetName="grid"
Property="Background"
Value="#F2F3F5">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
新建一个类
public class TzxComboBox: System.Windows.Controls.ComboBox
{
public TzxComboBox()
{
Style style = this.TryFindResource("ComboBoxStyle") as Style;
if (style != null)
{
this.Style = style;
}
}
}
在xaml页面引用comboBox控件:
xmlns:ComboBox="clr-namespace:TzxControlComponentLib.Controls.ComboBoxs;assembly=TzxControlComponentLib"
使用并绑定一个集合list:
<ComboBox:TzxComboBox x:Name="ComboBoxDepartment"
ItemsSource="{Binding List}"
SelectedValuePath="pk"
DisplayMemberPath="v_name"
HorizontalAlignment="Left"
Margin="120,0,16,0"
VerticalAlignment="Center"
Width="128"
Height="35"
FontSize="16"/>