⼀步⼀步实现WPF控件ComboBox⾃定义样式
本⽂主要介绍怎样⼀步⼀步实现WPF控件ComboBox的⾃定义样式，包括ComboBox的输⼊框、下拉框按钮及下拉展⽰条⽬的样式，均实现⾃定义样式。
1、新建WPF应⽤程序项⽬
2、 添加⼀个ComboBox控件
<Window x:Class="WpfApp2.MainWindow"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/winfx/2006/xaml"
xmlns:d="schemas.microsoft/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="600">
<Grid>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ComboBox Name="myCbb"
Height="25"
Width="250"/>
</StackPanel>
</Grid>
</Window>
3、添加ComboBox样式代码
<Window x:Class="WpfApp2.MainWindow"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/winfx/2006/xaml"
xmlns:d="schemas.microsoft/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"        xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="600">
<Window.Resources>
<Style x:Key="MyCbbStyle" TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*" MaxWidth="20"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
BorderBrush="Blue"
BorderThickness="1,1,0,1"
Background="AliceBlue">
<TextBox x:Name="myTxt"
Text="{TemplateBinding Text}"
Background="Transparent"
BorderThickness="0"
borderbox
VerticalContentAlignment="Center"
FontSize="14"
FontWeight="Bold"
Foreground="Red"/>
</Border>
<Border Grid.Column="1"
BorderBrush="Red"
BorderThickness="1">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ComboBox Name="myCbb"
Height="25"
Width="250"
Style="{StaticResource MyCbbStyle}"/>
</StackPanel>
</Grid>
</Window>
运⾏效果图如下：
说明：重写ComboBox控件样式，修改Template模板，将ComboBox界⾯分为左右两部分，左侧部分
为输⼊框及选中条⽬的显⽰框，输⼊框添加的是TextBox，可根据UI设计设置要显⽰的字体样式。注意边框的颜⾊和输⼊框的背景⾊都在Border上设置，避免边框重叠。
右侧部分预留给下拉框按钮。
4、右侧区域添加ToggleButton，切换ComboBox下拉框的伸展与收缩，并添加伸展区域。
<Window x:Class="WpfApp2.MainWindow"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/winfx/2006/xaml"
xmlns:d="schemas.microsoft/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="600">
<Window.Resources>
<Style x:Key="MyCbbStyle" TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*" MaxWidth="20"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
BorderBrush="Blue"
BorderThickness="1,1,0,1"
Background="AliceBlue">
<TextBox x:Name="myTxt"
Text="{TemplateBinding Text}"
Background="Transparent"
BorderThickness="0"
VerticalContentAlignment="Center"
FontSize="14"
FontWeight="Bold"
Foreground="Red"/>
</Border>
<Border Grid.Column="1"
BorderBrush="Red"
BorderThickness="1">
<ToggleButton IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"                                              ClickMode="Press"></ToggleButton>
</Border>
<Popup Name="MyPopup"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom">
<Border MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}"                                                  HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<StackPanel Background="AliceBlue"
IsItemsHost="True"
/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ComboBox Name="myCbb"
Height="25"
Width="250"
DisplayMemberPath="Name"
SelectedValuePath="ID"
SelectedIndex="0"
Style="{StaticResource MyCbbStyle}"/>
</StackPanel>
</Grid>
</Window>
添加下拉框绑定数据对象CbbData.cs
public class CbbData
{
public string ID { get; set; }
public string Name { get; set; }
}
添加初始化下拉框数据源⽅法，修改MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<CbbData> cbbDatas = new List<CbbData>();            CbbData cbbData1 = new CbbData();
cbbData1.ID = "";
cbbData1.Name = "请选择";
cbbDatas.Add(cbbData1);
for (int i = 0; i < 20; i++)
{
CbbData cbbData = new CbbData();
cbbData.ID = (i + 1).ToString();
cbbData.Name = "we2dwfr" + (i + 1).ToString();                cbbDatas.Add(cbbData);
}
myCbb.ItemsSource = cbbDatas;
}
}
运⾏效果图：
5、添加ToggleButton的⾃定义模板
<Window.Resources>
<ControlTemplate x:Key="MyToggleBtnStyle"
TargetType="ToggleButton">
<Border Name="MyBorder"
Background="AliceBlue"
BorderThickness="1"
BorderBrush="Transparent">
<Path Name="MyPath"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。