在文本开头带有图标的ComboBox的情况下，如何使isTextSearchEnabled属性起作用? [英] How to make isTextSearchEnabled property work in case of ComboBox with icons in the beginning of text?

问题描述

在ComboBox中，我们可以通过键入项目的前几个字母来跳转到该项目.这是设置 IsTextSearchEnabled 属性的情况，默认情况下为true.

In a ComboBox, we can jump to an item by typing its first few letters. This is when IsTextSearchEnabled property is set, which by default is true.

我有一个自定义的ComboBox，开头是图片，后面是一小段文字.

I have a custom ComboBox with images in the beginning, followed by a short text.

icon1 + Violet
icon2 + Red
icon3 + Blue

如果我键入"r"，则希望导航至下拉菜单中的 Red 项目.但是，由于开头有一个图标，因此 IsTextSearchEnabled 属性的行为不符合预期.

If I type "r", I expect to navigate to the Red item in the dropdown. However, because of an icon in the beginning, the IsTextSearchEnabled property does not behave as expected.

我该如何进行这项工作?

How can I make this work?

例如，在 MyDropdown.cpp 中，我有

MyDropDownItem^ comboItem = ref new MyDropDownItem(icon, title);
sourceItems->Append(comboItem);

sourceItems 是此控件的ItemsSource使用的项目列表.每个组合框项都有一个不同的图像(图标)，因此，无法在xaml模板中静态定义图像src.

sourceItems is the list of items that the ItemsSource of this control uses. Each combobox item has a different image(icon) and hence, image src cannot be statically defined in xaml template.

推荐答案

在文本开头带有图标的ComboBox的情况下，如何使isTextEnabled属性起作用?

How to make isTextEnabled property work in case of ComboBox with icons in the beginning of text?

您可以将ComboBox ItemsSource 与字符串集合绑定，然后自定义项内容，如下所示，当您键入文本时，它将与 ItemsSource 匹配.

You could bind ComboBox ItemsSource with string collection then custom the item content like the following, when you typing text, it will match with ItemsSource.

<ComboBox
    x:Name="MyComboBox"
    Width="200"
    Header="Colors"
    IsEditable="True"
    Loaded="ComboBox_Loaded"     
    >
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image
                    Width="22"
                    Height="22"
                    Source="Assets/StoreLogo.png"
                    />
                <TextBlock
                    Margin="10"
                    Text="{Binding}"
                    TextAlignment="Center"
                    />
            </StackPanel>
        </DataTemplate>

    </ComboBox.ItemTemplate>
</ComboBox>

private void ComboBox_Loaded(object sender, RoutedEventArgs e)
{
    MyComboBox.ItemsSource = new List<string>() { "Red", "Green", "Blue" };
}

更新

public class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        string resaut = string.Empty;
        switch (value.ToString())
        {
            case "Blue":
                resaut = "ms-appx:///Assets/BlueImage.png";
                break;
            case "Green":
                resaut = "ms-appx:///Assets/GreenImage.png";
                break;
            case "Red":
                resaut = "ms-appx:///Assets/RedImage.png";
                break;
            default:
                break;
        }
        return resaut;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

用法

<ComboBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Image
                Width="22"
                Height="22"
                Source="{Binding Converter={StaticResource ImageConverter}}"
                />
            <TextBlock
                Margin="10"
                Text="{Binding}"
                TextAlignment="Center"
                />
        </StackPanel>
    </DataTemplate>
</ComboBox.ItemTemplate>

这篇关于在文本开头带有图标的ComboBox的情况下，如何使isTextSearchEnabled属性起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！