下拉框ComboBox

31-UWP开发-下拉框ComboBox

下拉框 ComboBox 是一个下拉选择的列表控件，它适用于选项较少的情况。如果选项较多，建议使用 ListPickerFlyout 控件来实现。

语法

<ComboBox.../>Code language: HTML, XML (xml)

ComboBox 控件的本质上也是一个列表控件，所以列表控件的相关属性用在 ComboBox 控件上也是完全适用。如果要进行数据绑定，可以通过 ItemTemplate 设置选项的模板和绑定的数据源，然后再绑定数据源。也可以直接用 <x:String> 来创建下拉的选项。

ComboBox 还有两个重要属性：

• DropDownOpened：下拉框打开时触发。
• DropDownClosed：下拉关闭时候触发的事件，这个常用。

练一练

直接通过 x:String 来添加内容：

<ComboBox
    x:Name="comboBox"
    HorizontalAlignment="Left"
    Margin="290,230,0,0"
    VerticalAlignment="Top"
    Width="550"
    Height="70"
    PlaceholderText="选择你喜欢的球类运动"
    FontSize="30">
    <x:String>篮球</x:String>
    <x:String>足球</x:String>
    <x:String>网球</x:String>
    <x:String>羽毛球</x:String>
</ComboBox>Code language: HTML, XML (xml)

在 cs 代码里面绑定数据源：

<ComboBox
    x:Name="combo2"
    DropDownClosed="combo2_DropDownClosed"
    RenderTransformOrigin="2.031,4.688"
    Margin="35,138,0,0"
    Width="260">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBox Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>
<TextBlock
    x:Name="textBlock"
    HorizontalAlignment="Left"
    Margin="35,80,0,0"
    TextWrapping="Wrap"
    Text="TextBlock"
    VerticalAlignment="Top"/>Code language: HTML, XML (xml)

public BlankPageComboBox()
{
    this.InitializeComponent();
    List<Student> studentList = new List<Student>();
    studentList.Add(new Student() { Name = "张珊" });
    studentList.Add(new Student() { Name = "李思" });
    studentList.Add(new Student() { Name = "王武" });
    combo2.ItemsSource = studentList;
}

private void combo2_DropDownClosed(object sender, object e)
{
    if (combo2.SelectedItem != null)
    {
        Student student = combo2.SelectedItem as Student;
        this.textBlock.Text = student.Name;
    }
}

internal class Student
{
    public string Name { get; internal set; }
}Code language: JavaScript (javascript)