#1,015 – Typing Text to Select an Item in a ComboBox, Part III

You set the TextSearch.TextPath property on a ComboBox to refer to the property on the bound object that contains the text that you can type in order to select an item.

You can change the ComboBox so that the text that you enter to select an item is visible as you enter the text.  To do this, you set the IsEditable property to true.

        <ComboBox ItemsSource="{Binding ActorList}" Margin="20"
                  IsEditable="True"
                  SelectedItem="{Binding SelectedActor}"
                  TextSearch.TextPath="LastName">
            <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" Height="100"/>
                                <StackPanel Margin="10,0">
                                    <TextBlock Text="{Binding FullName}" FontWeight="Bold" />
                                    <TextBlock Text="{Binding Dates}"/>
                                    <TextBlock Text="{Binding KnownFor}" FontStyle="Italic"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <Label Content="{Binding SelectedActor.NameAndDates}"/>

In this example, we can now type the actor’s last name in order to change the selected item.  We can demonstrate this by binding a Label to the selector item (actor).  Notice that the selected item changes as we enter text.
1015-001

Advertisement

#1,014 – Typing Text to Select an Item in a ComboBox, Part II

If a ComboBox has focus, you can normally just start typing text in order to select an item.  If the DisplayMemberPath property is set, you can enter text that matches the property on the bound object specified by DisplayMemberPath.  If you are using an item template to set content for each item, rather than DisplayMemberPath, you can specify the property used when typing text by setting the TextSearch.TextPath property.

In the example below, we set TextSearch.TextPath to LastName, which is a property of the Actor object that each item is bound to.  The user can then just type the actor’s last name in order to select that actor within the ComboBox.

        <ComboBox ItemsSource="{Binding ActorList}" Margin="20"
                  SelectedItem="{Binding SelectedActor}"
                  TextSearch.TextPath="LastName">
            <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" Height="100"/>
                                <StackPanel Margin="10,0">
                                    <TextBlock Text="{Binding FullName}" FontWeight="Bold" />
                                    <TextBlock Text="{Binding Dates}"/>
                                    <TextBlock Text="{Binding KnownFor}" FontStyle="Italic"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

1014-001