Geeks With Blogs
I [heart] code! .NET musings from the chick side
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! Posted on Friday, September 11, 2009 7:28 AM | Back to top


Comments on this post: Silverlight AutoComplete ComboBox

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Thanks ..
Can you plz post complete example.



Left by Satya on Sep 29, 2009 10:56 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
plz send the full detail source code for the above example.
Left by arumugakumar on Dec 29, 2009 12:36 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Please send the full working source code
Left by krishna on Feb 03, 2010 12:52 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Could you please send me the source code for this sample.
Left by krishna on Feb 03, 2010 12:54 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
where is cbAffiliate_SelectionChanged event?
what should i write in this?
Left by hari on May 03, 2010 6:45 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
New to SL, but this shows its power. Elegant solution, thanks.
Left by Peter on Aug 21, 2010 5:15 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Can u please send the full source code for the auto complete Combobox it would be great help for me.........
Left by Arockia Raj on Nov 04, 2010 2:23 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
So do you somehow need to bind the autocomplete box to the combo box? Otherwise how does a value selected from the combo box show, since the combo box is covered by the autocomplete box? I've got it working except for this detail...thank you!!!
Left by jwood on Nov 04, 2010 3:29 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Got it...just had to use each controls SelectionChanged event to move the value from one control to the other. Thank you!!!
Left by jwood on Nov 05, 2010 12:49 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting.
Left by natural hair loss treatment on Nov 29, 2010 3:24 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Thanks so much for posting it, I have been trying all foolish complex solutions but is just simple.

For others, complete xaml is there, there is really not need for selection changed event. Just bind the item source and selected item of auto complete box to that of Combo box.
Left by Shail on Feb 21, 2011 1:04 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Thanks for providing such useful information.This code snippets are very beneficial. I seriously value your professional approach. I would really like to thank you for the efforts you made in writing this particular post. I'm hoping the same from you in the future as well.
Left by custom photo playing cards on Feb 22, 2011 12:04 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Your work is very good and I appreciate you and hopping for some more informative posts. Thank you for sharing great information to us.
Good post, thanks for taking time to discuss this subject.Fortunately this topic is presented in your blog, assuring a decent coverage.
Keep up the good work !
Left by homeopathic acne cure on Mar 12, 2011 1:23 AM

# Mr
Requesting Gravatar...
Quite excellent helpful comments are present here on this site.This is really a good site with plenty of helpful comments.
Left by wart removal home remedies on Mar 18, 2011 6:46 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
I actually love the way you have organized your blog. Outstanding design and style..and well maintained..
Left by crystal thong on Apr 05, 2011 8:27 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
wow...its really nice..thanks for sharing
Left by vedic maths on Apr 08, 2011 2:20 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
What version of the Silverlight toolkit are you using?
Left by Mikel on May 16, 2011 11:10 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
What does the code for cbAffiliate_SelectionChange look like?
Left by SED on Sep 14, 2011 9:31 AM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
PLISS HELP ME...GIVE ME TUTORIAL ABOUTAUTOCOMPLETE COMBOBOX FROM THE BASIC
Left by NURUL HUSNA on Oct 06, 2011 9:09 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Great...
Thanks i really need this...
Its so simple
Left by Risky Pathak on Jan 11, 2012 7:05 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
It worked very well for me. Thanks for sharing this.
Left by Ravi on Jun 18, 2012 1:09 PM

# re: Silverlight AutoComplete ComboBox
Requesting Gravatar...
Could u please provide me the complete sample of Auto complete combo box. Thanks in Advance
Left by Prabhu on Sep 28, 2012 4:20 AM

Your comment:
 (will show your gravatar)


Copyright © Kirstin Juhl | Powered by: GeeksWithBlogs.net