WPF 控件专题 ComboBox 自定义样式

1、ComboBox 介绍

    ComboBox 表示带有下拉列表的选择控件，通过单击控件上的箭头可显示或隐藏下拉列表。也叫下拉列表控件。

**************************************************************************************************************

2、常用属性介绍

    FontFamily：字体系列；    FontSize：字体大小；    FontStretch：字体在屏幕上紧缩或加宽的程度；FontWeight：字体粗细；
    
    Background：背景；    BorderBrush：边框颜色；    BorderThickness：边框宽度；    Foreground：前景色；
    
    Width/Height：宽度/高度；    Name：元素标识名称；    IsEnabled：使能，是否可用；    Margin：外边距；
    
    Opacity：透明度；    Visibility：可见性；    IsVisible：是否可见；    FlowDirection：其子元素的流动方向；
    
    LayoutTransform：在执行布局时应该应用于此元素的图形转换方式。    RenderTransform：元素的呈现位置的转换信息；
    
    RenderTransformOrigin：由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。
    
    HorizontalAlignment/VerticalAlignment：在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。
    
    HorizontalContentAlignment/VerticalContentAlignment：控件内容的水平对齐方式/垂直对齐方式。

    Items：获取用于生成 ItemsControl 的内容的集合。ItemTemplate：获取或设置用来显示每个项的 DataTemplate。
    
    ItemsPanel：获取或设置模板，该模板定义对项的布局进行控制的面板。
    
    ItemsSource：获取或设置用于生成 ItemsControl 的内容的集合。

    SelectedIndex：获取或设置当前选择中第一项的索引，如果选择为空，则返回负一(-1)。

    SelectedItem：获取或设置当前选择中的第一项，或者，如果选择为空，则返回 null。

    SelectedItems：获取当前选定的项。    Text：获取或设置当前选定项的文本。

    SelectedValue：获取或设置通过使用 SelectedItem 而获取的 SelectedValuePath 的值。

    SelectedValuePath：获取或设置用于从 SelectedValue 获取 SelectedItem 的路径。

    SelectionBoxItem：获取在选择框中显示的项。SelectionBoxItemTemplate：获取选择框内容的项模板。

    SnapsToDevicePixels：获取或设置一个值，该值确定在呈现过程中，此元素的呈现是否应使用特定于设备的像素设置。
    
    IsDropDownOpen：获取或设置一个值，该值指示组合框的下拉部分当前是否打开。

    IsEditable：获取或设置一个值，该值指示启用或禁用 ComboBox 的文本框中的文本编辑。
    
    IsReadOnly：获取或设置启用仅限选择模式的值，在此模式中，可选择但不可编辑组合框中的内容。

**************************************************************************************************************

3、具体示例代码：第一个ComboBox把ItemSource和静态资源绑定；第二个直接写入Item项。

<Grid>
	<StackPanel>
		<StackPanel.Resources>
			<local:VacationSpots x:Key="myVacations"/>
		</StackPanel.Resources>
		<ComboBox Name="comboBox1" Width="150" Height="30" ItemsSource="{StaticResource myVacations}" Text="My Cities" IsEditable="true" IsReadOnly="true"
				  VerticalContentAlignment="Center" Margin="10"/>

		<TextBlock Margin="10" Text="{Binding ElementName=comboBox1, Path=SelectedItem}" Foreground="#dddddd" HorizontalAlignment="Center"/>

		<ComboBox Width="150" Height="30" VerticalAlignment="Center" Margin="10">
			<ComboBoxItem>广东</ComboBoxItem>
			<ComboBoxItem>广西</ComboBoxItem>
			<ComboBoxItem>湖南</ComboBoxItem>
			<ComboBoxItem>河北</ComboBoxItem>
			<ComboBoxItem>河南</ComboBoxItem>
			<ComboBoxItem>河北</ComboBoxItem>
			<ComboBoxItem>山东</ComboBoxItem>
			<ComboBoxItem>山西</ComboBoxItem>
		</ComboBox>
	</StackPanel>
</Grid>

静态资源绑定，集合定义代码

namespace WPFControlsTest
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
        }
    }

    public class VacationSpots : ObservableCollection<string>
    {
        public VacationSpots()
        {

            Add("Spain");
            Add("France");
            Add("Peru");
            Add("Mexico");
            Add("Italy");
        }
    }
}

**************************************************************************************************************

4、效果图

**************************************************************************************************************

5、使用列表或集合绑定ItemSource

    上面说了一种ComboBox的ItemSource绑定方式（绑定静态类），我们还可以把ItemSource绑定列表或者集合。

    添加前端代码：显示值为Name，后端选中的值为Value

<Grid>
	<StackPanel >
		<ComboBox Width="150" Height="30" VerticalAlignment="Center" Margin="10" VerticalContentAlignment="Center" SelectedIndex="0"
				  ItemsSource="{Binding NationalityInfo}" DisplayMemberPath="Name" SelectedValuePath="Value" SelectionChanged="ComboBox_SelectionChanged">
		</ComboBox>
		<TextBlock x:Name="txtShow" Margin="10" Foreground="#dddddd" HorizontalAlignment="Center"/>
	</StackPanel>
</Grid>

后端代码：定义一个类、集合或者列表、对列表赋值；

//定义一个类
public class Nationality
{
	public string Name { get; set; }//控件中显示的内容
	public string Value { get; set; }//选中的内容的值
}

public MainWindow()
{
	InitializeComponent();
	this.DataContext = this;
    //对列表赋值
	NationalityInfo.Add(new Nationality() {Name = "中国", Value = "Chian" });
	NationalityInfo.Add(new Nationality() {Name = "俄罗斯", Value= "Russia" });
	NationalityInfo.Add(new Nationality() {Name = "朝鲜", Value= "North Korea" });
	NationalityInfo.Add(new Nationality() {Name = "巴基斯坦", Value= "Pakistan" });
	NationalityInfo.Add(new Nationality() {Name = "阿富汗", Value= "Afghanistan" });
	NationalityInfo.Add(new Nationality() { Name = "土耳其", Value = "Turkey" });
}
//第一个列表  
private List<Nationality> nationalityInfo = new List<Nationality>();
public List<Nationality> NationalityInfo
{
	get { return nationalityInfo; }
	set { nationalityInfo = value; OnPropertyChanged("NationalityInfo"); }
}

//属性更改通知事件
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
	if (PropertyChanged != null)
	{
		PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
	}
}

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	ComboBox combo = (ComboBox)sender;
	if(combo != null)
	{
		txtShow.Text = "显示数据为：" + ((Nationality)combo.SelectedItem).Name + "  后端数据：" + combo.SelectedValue;
	}
}

效果图

**************************************************************************************************************