WPF学习笔记（12）下拉框控件ComboBox与数据模板

下拉框控件ComboBox与数据模板

一、ComboBox
- [1. ComboBox概述](#1. ComboBox概述)
- [2. ItemsControl类](#2. ItemsControl类)
- [3. Selector类](#3. Selector类)
- [4. ComboBox类](#4. ComboBox类)
二、ComboBox数据模板
总结

一、ComboBox

1. ComboBox概述

ComboBox类代表一个有下拉列表的选择控件，供用户选择。

官方文档：https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.combobox?view=netframework-4.8

2. ItemsControl类

ItemsControl类是列表、下拉框、菜单、表格等一系列选项的基类，部分属性如下：

属性	说明
ltemsSource	获取或设置用于生成 ltemsControl 的内容的集合。设置
ltemsSource	属性后，集合ltems是只读且固定大小的，因此不可修改。
ltems	获取用于生成 ltemsControl 的内容的集合,
DisplayMemberPath	获取或设置源对象上的值的路径，以用作对象的可视表示形式，不能同时设置 DisplayMemberPath 和ltemTemplate.
ItemTemplate	获取或设置用来显示每个项的数据模板DataTemplate。
ltemContainerStyle	获取或设置应用于为每个项生成的容器元素的 Style。

3. Selector类

Selector类允许用户从其元素中选择项的控件。部分属性和事件如下：

属性	说明
SelectedIndex	获取或设置当前选择中第一项的索引，如果选择为空返回-1。
Selectedltem	获取或设置当前选择中的第一项，如果选择为空返回 null。
SelectedValue	获取或设置当前选择中的第一项的某个成员值。
SelectedValuePath	通常与 SelectedValue 属性一起使用，用于指定控件中选定项目的属性。
事件	说明
Selected	当选择项时发生。
SelectionChanged	当选择更改时发生。
UnSelected	当取消选择项时发生。

4. ComboBox类

ComboBox类的部分属性与事件如下：

属性	说明
SelecedtIndex	获取默认显示项，索引从0起始
IsEditable	获取或设置一个值，该值指示启用或禁用 ComboBox 的文本框中的文本编辑。
IsReadOnly	获取或设置启用仅限选择模式的值，在此模式中，可选择但不可编辑组合框中的内容。
IsDropDownOpen	获取或设置一个值，该值指示组合框的下拉部分当前是否打开。
MaxDropDownHeight	获取或设置组合框下拉部分的最大高度。
Text	获取或设置当前选定项的文本。
事件	说明
DropDownOpened	当关闭组合框的下拉列表时发生
DropDownClosed	当打开组合框的下拉列表时发生

MainWindow.xaml界面的属性面板部分属性设置如图：

ComboBox控件内填写下拉框内容有三种实现方式，第一种通过ComboBox.ItemsSource，第二种通过ComboBoxItem，第三种通过MainWindow.xaml.cs界面的C#代码，第三种方式与第一种设置效果等同。

xml 复制代码

    <Grid>
        <!--ComboBox.ItemsSource实现-->
        <ComboBox x:Name="comboBox1"  HorizontalAlignment="Left" Margin="285,89,0,0" VerticalAlignment="Top" Width="216" Height="27" FontSize="20">
            <ComboBox.ItemsSource>
                <Collections:ArrayList>
                    <system:String>高等数学</system:String>
                    <system:String>线性代数</system:String>
                    <system:String>数率统计</system:String>
                    <Rectangle Fill="red" Width="30" Height="20"/>
                </Collections:ArrayList>
            </ComboBox.ItemsSource>
        </ComboBox>

        <!--ComboBoxItem实现-->
        <ComboBox x:Name="comboBox2"  HorizontalAlignment="Left" Margin="285,160,0,0" VerticalAlignment="Top" Width="216" Height="27" FontSize="20">
            <ComboBoxItem>美术</ComboBoxItem>
            <ComboBoxItem>音乐</ComboBoxItem>
            <ComboBoxItem>体育</ComboBoxItem>
        </ComboBox>

        <!--C#代码实现-->
        <ComboBox x:Name="comboBox3"  HorizontalAlignment="Left" Margin="285,229,0,0" VerticalAlignment="Top" Width="216" Height="27" FontSize="20"/>
    </Grid>

csharp 复制代码

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<string> list = new List<string>();
        list.Add("C++");
        list.Add("Java");
        list.Add("Python");
        //数据源赋值
        comboBox3.ItemsSource = list;
    }
}

ComboBox控件最常用事件为SelectionChanged

csharp 复制代码

//创建学生类，包含ID, Name， Score三个属性
public class Stu
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Score { get; set; }
    public Stu(int id, string name, int score)
    {
        Id = id;
        Name = name;
        Score = score;
    }
}
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        comboBox3.SelectionChanged += comboBox3_SelectionChanged;

        List<Stu> list = new List<Stu>
        {
        new Stu(1, "张三", 100),
        new Stu(2, "李四", 80),
        new Stu(3, "王五", 75)
        };

        comboBox3.ItemsSource = list;

        // 显示的字段,下拉框界面上显示的是姓名
        comboBox3.DisplayMemberPath = "Name";

        //选择的值的字段,SelectedValue获取的值是分数
        comboBox3.SelectedValuePath = "Score";

    }

    private void comboBox3_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
       // 不设置 SelectedValuePath属性的时候，Selectedltem与 SelectedValue 一样
       //设置了 SelectedValuePath属性，那么 SelectedValue 就会按Path指定的属性显示
        Console.WriteLine(comboBox3.SelectedItem + "->" + comboBox3.SelectedValue);
    }
}

二、ComboBox数据模板

通过在MainWindow.xaml界面的window.resources 定义数据模板，然后使用ComboBox类继承的ItemTemplate属性引用，示例代码如下：

csharp 复制代码

public class Stu
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Score { get; set; }
    public Stu(int id, string name, int score)
    {
        Id = id;
        Name = name;
        Score = score;
    }
}
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<Stu> list = new List<Stu>
        {
            new Stu(1, "张三", 100),
            new Stu(2, "李四", 80),
            new Stu(3, "王五", 75)
        };

        comboBox.ItemsSource = list;

        comboBox.SelectionChanged += comboBox_SelectionChanged;
    }

    private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        Console.WriteLine(comboBox.SelectedItem + "->" + comboBox.SelectedValue);
    }
}

xml 复制代码

    <Window.Resources>
        <DataTemplate x:Key="myDT">
            <StackPanel>
                <TextBlock Text="{Binding Path=Id}" Foreground="Red" />
                <TextBlock Text="{Binding Path=Name}" Foreground="Green" />
                <TextBlock Text="{Binding Path=Score}" Foreground="Blue" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <ComboBox x:Name="comboBox" 
                  ItemTemplate="{StaticResource myDT}"
                  HorizontalAlignment="Center" Height="55"
                  Margin="0,120,0,0"
                  VerticalAlignment="Top"
                  Width="260"/>
    </Grid>

总结

ComboBox控件内容的三种实现方式
数据模板定义方法