AutocompleteBox dropdown template with grouping

[Shengwei]

Hi, 

I have binded a collection of my custom objects which can be grouped according to one of its properties to the itemssource, i want to display the suggestion dropdown list as group in DropDownItemTemplate (as attached image can show) 

1) Display a group title followed by the members belong to that group
2) Group title is not selectable 
3) highlight a text that typed in the search box 

Any help or direction is much appreciated!

thanks 
wsw

[fitz]

hi, have you find a solution ?

thanks.

[Shengwei]

Partial Solution i am using 

<DataTemplate x:Key="autoCompleteDropDownTemplate">
    <ContentControl>
        <ContentControl.Content>
            <MultiBinding Converter="{StaticResource highlightConverter}" Mode="OneTime">
                <Binding Path="Label"/>
                <Binding Path="Category"/>
                <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=UserControl}" Path="DataContext.CurrentSearchText"/>
            </MultiBinding>
        </ContentControl.Content>
    </ContentControl>
</DataTemplate>

and converter is 

public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    string label = values[0] as string;
    string category = values[1] as string;
    string query = values[2] as string;

    if (!string.IsNullOrEmpty(label) && !string.IsNullOrEmpty(category))
    {
        string replacementstring = string.Format("%%{0}%%", query);
        string escapedXml = SecurityElement.Escape(label.Replace(query, replacementstring, StringComparison.InvariantCultureIgnoreCase));
        string withTags = escapedXml.Replace(replacementstring, "<Run Style=\"{StaticResource highlightTextStyle}\">" + query + "</Run>", StringComparison.InvariantCultureIgnoreCase);
        string wrappedInput = label.Equals(category, StringComparison.InvariantCultureIgnoreCase)?
            "<TextBlock xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Style=\"{StaticResource autocompleteCategoryStyle}\">" + category + "</TextBlock>" :
            "<TextBlock xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Style=\"{StaticResource autocompleteSuggestionTextStyle}\">"+withTags+"</TextBlock>";

        using (StringReader stringReader = new StringReader(wrappedInput))
        {
            using (XmlReader xmlReader = XmlReader.Create(stringReader))
            {
                return XamlReader.Load(xmlReader);
            }
        }
    }
    return null;
}

the problem is that 
1) user can still select "Category" (tried the following)

<Style TargetType="telerik:RadListBoxItem">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Converter={StaticResource ac2fConverter}}" Value="False">
            <Setter Property="IsHitTestVisible" Value="False"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

but still can select using key up and down
2) the converter is not "Case-sensitive"

[fitz]

Hi, 

i have found a workaround with radcombobox wich have an autocomplete behaviour too.
With radcombobox you can grouping items using ListCollectionView and GroupStyle.

example : 

in viewmodel
you can create a class wich contains one item and group name.
create your items collection with group name and add it in a ListCollectionView

Items = new ListCollectionView(groupedItems.OrderBy(i => i.GroupName));
Items.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));

in xaml

<telerik:RadComboBox.GroupStyle>
	<GroupStyle>
		<GroupStyle.HeaderTemplate>
		<DataTemplate>
			<Border BorderThickness = "0,0,0,1" BorderBrush="#CFCFCF" Margin="5, 2, 0, 15" >
				<TextBlock Text="{Binding Name}" Foreground="#B1A1A4" />
			</Border>
		</DataTemplate>
		</GroupStyle.HeaderTemplate>
	</GroupStyle>
</telerik:RadComboBox.GroupStyle>