Fixing Tim Heuer's EditableComboBox for SL3 & latest SL Toolkit

Question

I'm using Tim Heuer's style to get an editable combo box from here: http://timheuer.com/blog/archive/2008/11/05/silverlight-editable-combobox-using-styles.aspx

This is working well in my project circa the previous release of the Silverlight Toolkit. Unfortunately, attempting to use this style with SL3 RTM and the latest SL Toolkit doesn't work. I suspect that the problem has to do with this: "Breaking Change: The "DropDownToggle" template part of type ToggleButton has been removed." I'm not sure how to fix it to get the drop down part to work again, any ideas?

Answer 1

Khyalis on Tim Heuer's blog seems to have fixed this by binding IsChecked on the DropDownToggle:

IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"

So far it works for me.

Answer 2

If you take a look inside of the Silverlight Toolkit C# samples (for the latest July 2009 release), you'll see that the editable combo box sample has changed some. You are correct that the breaking change is the reason for this.

The ToggleButton still exists in the custom template for the control, but you need to hook up to the Click event in your code-behind file, and actually toggle the IsDropDownOpen value in your code.

This change was made to be consistent: having the control support template parts that are not in the default control template was decided to be against good design guidelines for controls, so I removed it for the final release of Silverlight 3.

I'm sorry it's caused some trouble, and hope that updating your application is easy enough!

Also, be aware that in any custom control templates, with the July 2009 release of the Silverlight Toolkit for Silverlight 2 (or the Silverlight 3 SDK), the AutoCompleteBox's ListBox template part has been renamed to "Selector" from "SelectionAdapter", so you may need to rename your ListBox template part in your own styles.

Answer 3

For me it works now. I added this line to ToggleButton declaration in EditableComboStyle template:

IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"

Also it is important to change the ListBox name to x:Name="Selector" in the same EditableComboStyle template like Jeff said. Then the control is used as:

<toolkit:AutoCompleteBox MinimumPrefixLength="0" 
                                 MinimumPopulateDelay="200" 
                                 x:Name="editableCombo"
                                 Style="{StaticResource EditableComboStyle}"
                                 Text="{Binding MyProperty, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" />

But unfortunately when the desired editable combobox behavior works, other issues appears:

1. I have problem with immediate binding when user click on toogle button which causes immediate validation before any item is selected or text written.

2. User have to press tab twice for move to other control.

Answer 4

IsTabStop=false on the AutoCompleteBox will fix the tab issue. The TextBox (inside the AutoCompleteBox template) will still get focus on tab.

Answer 5

I had a bit of trouble putting the fixes together for SL3 (I couldn't find it in one place) so for anyone else I will leave my working version here:

http://walkersretreat.co.nz/files/SLComboEdit3.zip

This includes the fix for the tabstop.

There is nothing new in here - just put together what others have said in one place.

Answer 6

How can we use Customized Oject List without overriding toString. in such case TextBox and List show Object type only. can you please give a sample of style template. I tried following with FormaterObject but it only resolved the textbox and List is not working: http://msdn.microsoft.com/en-us/library/system.windows.controls.autocompletebox.valuememberbinding%28VS.95%29.aspx

Thanks