AutoCompleteBox OnKeyDown event

AutoCompleteBox OnKeyDown event

11-17-2008 8:52 PM |

I am using the AutoCompleteBox in Nov release, and I need to trigger my action after user enter "Enter" key in the textbox area. Is there any way to do that ? I hook up OnKeyDown event, but ACB does not send me Enter key. Thanks in advance.

Re: AutoCompleteBox OnKeyDown event

11-17-2008 9:02 PM |

Are you interested in a quick-and-dirty solution? Would you be OK re-templating? I can think of a few solutions and post whichever one works the quickest for me...

-Jeff

Re: AutoCompleteBox OnKeyDown event

11-17-2008 9:21 PM |

So, I was just able to successfully retemplate (using the regular template) and insert in XAML my own event for the TextBox's KeyDown.

Here's the XAML: (see: line 16)

1    <UserControl x:Class="SilverlightApplication1.Page"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3                 xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
4        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5        Width="400" Height="300">
6        <Grid x:Name="LayoutRoot" Background="White">
7            <controls:AutoCompleteBox Height="32" x:Name="EnterKeyControl">
8                <controls:AutoCompleteBox.Style>
9                    <Style TargetType="controls:AutoCompleteBox">
10                       <Setter Property="IsTabStop" Value="False" />
11                       <Setter Property="Template">
12                           <Setter.Value>
13                               <ControlTemplate TargetType="controls:AutoCompleteBox">
14                                   <Grid Margin="{TemplateBinding Padding}"
15                             Background="{TemplateBinding Background}">
16                                       <TextBox IsTabStop="True" x:Name="Text" Style="{TemplateBinding TextBoxStyle}" Margin="0"
17                                                 KeyDown="Text_KeyDown"
18                                                />
19                                       <Popup x:Name="Popup">
20                                           <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="0.0" BorderThickness="0" CornerRadius="3">
21                                               <Border.RenderTransform>
22                                                   <TranslateTransform X="1" Y="1" />
23                                               </Border.RenderTransform>
24                                               <Border.Background>
25                                                   <SolidColorBrush Color="#11000000" />
26                                               </Border.Background>
27                                               <Border
28                                       HorizontalAlignment="Stretch"
29                                       Opacity="1.0"
30                                       Padding="0"
31                                       BorderThickness="{TemplateBinding BorderThickness}"
32                                       BorderBrush="{TemplateBinding BorderBrush}"
33                                       CornerRadius="3">
34                                                   <Border.RenderTransform>
35                                                       <TransformGroup>
36                                                           <TranslateTransform X="-1" Y="-1" />
37                                                       </TransformGroup>
38                                                   </Border.RenderTransform>
39                                                   <Border.Background>
40                                                       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
41                                                           <GradientStop Color="#FFDDDDDD" Offset="0"/>
42                                                           <GradientStop Color="#AADDDDDD" Offset="1"/>
43                                                       </LinearGradientBrush>
44                                                   </Border.Background>
45                                                   <ListBox
46                                               x:Name="SelectionAdapter"
47                                               ScrollViewer.HorizontalScrollBarVisibility="Auto"
48                                               ScrollViewer.VerticalScrollBarVisibility="Auto"
49                                               ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
50                                               ItemTemplate="{TemplateBinding ItemTemplate}" />
51                                               </Border>
52                                           </Border>
53                                       </Popup>
54                                       <VisualStateManager.VisualStateGroups>
55                                           <VisualStateGroup x:Name="PopupStates">
56                                               <VisualStateGroup.Transitions>
57                                                   <VisualTransition GeneratedDuration="0:0:0.1" To="PopupOpened" />
58                                                   <VisualTransition GeneratedDuration="0:0:0.2" To="PopupClosed" />
59                                               </VisualStateGroup.Transitions>
60                                               <VisualState x:Name="PopupOpened">
61                                                   <Storyboard>
62                                                       <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="1.0" />
63                                                   </Storyboard>
64                                               </VisualState>
65                                               <VisualState x:Name="PopupClosed">
66                                                   <Storyboard>
67                                                       <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="0.0" />
68                                                   </Storyboard>
69                                               </VisualState>
70                                           </VisualStateGroup>
71                                       </VisualStateManager.VisualStateGroups>
72                                   </Grid>
73                               </ControlTemplate>
74                           </Setter.Value>
75                       </Setter>
76                   </Style>
77               </controls:AutoCompleteBox.Style>
78           </controls:AutoCompleteBox>
79       </Grid>
80   </UserControl>
81  

And now, here's what is added to the .cs file:

        private void Text_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Enter)
            {
                // set a breakpoint here
            }
        }

Just make sure to not set Handled to true... or else the AutoCompleteBox won't be able to complete the commit itself.

With this solution, I believe that Silverlight will call -your- event handler before my AutoCompleteBox handler - so you may need to use a dispatcher invoke or other method to effectively schedule your code, but allow AutoComplete to update the selected value and other parameters first.

Let me know if this helps!

Re: AutoCompleteBox OnKeyDown event

11-18-2008 12:14 AM |

This works !!

Thanks very much.

However, IMHO, should ACB provide a way for user to customize this behavior without retemplating ?

Re: AutoCompleteBox OnKeyDown event

11-18-2008 12:37 PM |

Yeah, I agree that would be nice functionality.

One thing that we need to develop is a better validation and forms editing story for Silverlight - ideally AutoCompleteBox would plug in to any such infrastructure. Today, me providing Commit/Cancel events would get the job done, but be specific to the control and not generalizable to other controls. So, this story needs to developer.

I invite you to vote on this, it's an issue that someone posted as a work item in the Silverlight Toolkit site: http://www.codeplex.com/Silverlight/WorkItem/View.aspx?WorkItemId=922 .

-Jeff

Re: AutoCompleteBox OnKeyDown event

11-20-2008 4:40 AM |

What if I want the Enter key to behave as the Tab key?

I´m building a registration form where the user wants to use the Enter key to move to the next field instead of Tab.
If I´m catching the event as you specified above, how do I change it to the Tab key, the e.Key is read only so I can not do e.Key = Key.Tab.

- Håkan

Re: AutoCompleteBox OnKeyDown event

11-20-2008 7:43 AM |

Oh man!

In my whole invoice registration form including the head and the invoice rows in a DataGrid must the Enter key act as Tab.
We are talking about over 30 fields here.

Is there any way to get the next field in the tab order instead of hard coding the KeyDown event for all controls?
I already have overloaded classes which implement a special interface of all controls I use to get a yellow background when they are on focus.
Maybe I could get this code in here somehow if there is a way to get next control in tab order.

- Håkan

Re: AutoCompleteBox OnKeyDown event

01-17-2009 8:37 AM |

derektu123:

I am using the AutoCompleteBox in Nov release, and I need to trigger my action after user enter "Enter" key in the textbox area. Is there any way to do that ? I hook up OnKeyDown event, but ACB does not send me Enter key. Thanks in advance.

Try using KeyUp event instead of KeyDown.. It works for Enter key.

Harshwardhan Joshi,
S/W Developer,
Indigo Architects

Re: AutoCompleteBox OnKeyDown event

01-19-2009 3:42 AM |

Thanks, KeyUp solved it for me.

- Håkan

Re: AutoCompleteBox OnKeyDown event

02-09-2010 8:40 AM |

KeyUp is solved my issue.