Silverlight AutoComplete ComboBox

September 11, 2009 · 1 min read

The users wanted an AutoComplete Combo box in a SilverLight application- a combo box that would allow them to scroll the entire list, as well as filter the list as the user typed in the box.

The problem is: SilverLight has no such control. I did a bit of research and came across various options using templates, styles, etc.

Try as I might, I could not get these samples to work as I needed it to. Finally, in desperation, hours before the deadline, I tried the following solution. In about 15 minutes I had a control that functioned exactly as the users wanted.

It's not elegant- it's so simple that I laughed out loud. the solution is below.

The page already had a ComboBox on it. The task was to add the ability to type and filter the list.

First, Download the SilverLight Tool kit, and Reference
System.Windows.Controls.Input
in your application.

Add the reference to the xaml (I used "toolkit")

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"

Below is the original ComboBox:

                    <ComboBox
                        x:Name="cbAffiliate"
                        Grid.Column="1" Grid.Row="1"  Grid.RowSpan="1"
                           Margin="2,1,2,1" FontSize="9" HorizontalAlignment="Left" Height="20"
                        ItemsSource="{Binding Mode=OneWay, Path=MediaCodeList}"
                        SelectedItem="{Binding Mode=TwoWay, Path=SelectedMediaCode}"
                        SelectionChanged="cbAffiliate_SelectionChanged" MinWidth="200" >
                        <ComboBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel MinHeight="300"/>
                            </ItemsPanelTemplate>
                        </ComboBox.ItemsPanel>
                    </ComboBox>

Became:

                <Grid Grid.Column="1" Grid.Row="1"  Grid.RowSpan="1">
                    <ComboBox
                        x:Name="cbAffiliate"
                         Margin="2,1,2,1" FontSize="9" HorizontalAlignment="Left" Height="20"
                        ItemsSource="{Binding Mode=OneWay, Path=MediaCodeList}"
                        SelectedItem="{Binding Mode=TwoWay, Path=SelectedMediaCode}"
                        SelectionChanged="cbAffiliate_SelectionChanged" MinWidth="200" >
                        <ComboBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel MinHeight="300"/>
                            </ItemsPanelTemplate>
                        </ComboBox.ItemsPanel>
                    </ComboBox>
                   <toolkit:AutoCompleteBox                    
                        x:Name="txtAffiliate"                        
                        Margin="2,1,2,1" FontSize="9" HorizontalAlignment="Left" Height="20"
                        ItemsSource="{Binding Mode=OneWay, Path=MediaCodeList}"
                        SelectedItem="{Binding Mode=TwoWay, Path=SelectedMediaCode}"
                        SelectionChanged="cbAffiliate_SelectionChanged" MinWidth="180" >              
                   </toolkit:AutoCompleteBox>
                </Grid>

Basically I:

  1. Enclosed the ComboBox in a new Grid and moved the Grid.Column, Grid.Row, Grid.RowSpan attributes up to that level.
  2. Added an AutoCompleteBox right on top of the ComboBox, and set all the attributes the same as the original ComboBox
  3. Made the AutoCompleteBox 20 pixels shorter than the ComboBox. (The MinWidth attribute).

It works just as the users wanted!

This article is part of the GWB Archives. Original Author: Kirstin Juhl

New on Geeks with Blogs

  • We Won The One Award I Actually Care About

    Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

  • Your Customers Build the Features Now

    I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

  • Get the Size of a Directory in Linux the Easy Way

    du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

  • Vim Search and Replace: The Ultimate Guide

    One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.