Share via

How To Programmatically Dismiss the SIP (keyboard) in Silverlight applications for Windows Phone

  • Article

I've been creating some Silverlight applications for Windows Phone lately and I've run into a few speed bumps I thought I'd pass along.  This one is in regards to closing the SIP.

The virtual keyboard on the phone or the SIP (Soft Input Panel) is the keyboard that pops up on the screen so the user can input data.  Getting the SIP to display is simple—just give the TextBox focus and the SIP will automatically display.  The user can then go about tapping away and entering text.  But how do you dismiss the SIP?  Well, if the TextBox loses focus (the user taps on the screen outside the TextBox for example) the SIP will close.  But how do you programmatically dismiss the SIP?  Removing focus from the TextBox seems like the way to go and it is.

If you want to dismiss the SIP when the user taps a specific key, such as the Enter key, you can listen to the KeyUp event and set focus to a different Control. Okay, that seems simple.  But suppose you have a basic app without another Control.   Well, you always have one Control—the root PhoneApplicationPage control. You can set focus on this.  But there is one gotcha that took me a little while to figure out—you have to set IsTabStop to true on the main Control.  If you don’t set this property to true, the TextBox will not lose focus. 

The following is some simple code to get this to work.

The XAML creates the TextBox with an event handler for the KeyUp event and it sets the InputScope to restrict the keyboard to only display digits.  For more information on InputScope and SIP layout, see this MSDN article on How to: Specify the SIP Layout in a TextBox.  An event handler for the Loaded event is also specified.

XAML

<Grid x:Name="ContentGrid" Grid.Row="1" Loaded="ContentGrid_Loaded">
    <TextBox Name="Input" KeyUp="Input_KeyUp" FontSize="40">
        <TextBox.InputScope>
            <InputScope>
                <InputScopeName NameValue="Digits" />
            </InputScope>
         </TextBox.InputScope>
    </TextBox>
</Grid>

 

 

 

Code Behind (C#)

The C# code behind creates event handlers for the Loaded event and the KeyUp event.  In the Loaded event handler, IsTabStop on the main control is set to true and the TextBox is given focus (this will force the SIP to display when the application loads).

In the KeyUp event handler, Focus is set on the main control if the Key pressed is the Enter key.  Depending on the logic you want to do when the Enter key is pressed, you may also want to listen for the LostFocus event and handle that as well. 

private void Input_KeyUp(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Enter)
    {
        this.Focus();
    }
}

private void ContentGrid_Loaded(object sender, RoutedEventArgs e)
{
    // Turn on Tab Stops. You can set this in XAML as well.
    this.IsTabStop = true;

    // Set focus on the TextBox.
    Input.Focus();
}

 

Hope this helps.

 

--Brian

Comments

  • Anonymous
    July 03, 2010
    Thanks for the tip! On a side note: I was disappointed to see that the SIP didn't have a "collapse" button on it. My Android phone's SIP has this and it provides an intuitive way to collapse the SIP and see the stuff behind it. Fingers crossed we'll see this in the RTM of WP7!? :)

  • Anonymous
    July 08, 2010
    Excellent.  Glad this helped, Tim.  I have been reading the Windows Phone UI and Interactive Guide  and there's a nice reminder in there that the Back hardware button will also close the SIP.  A collopse method would be nice, though.

  • Anonymous
    August 16, 2010
    Hey Tim - On Windows Phone 7 you close any SIP by hitting the hardware back button.  =)  

  • Anonymous
    September 15, 2010
    thanks for the tip. as for microsoft, thanks for not thinking about this. jezz. was Keyboard.Hide(); all that hard to get in the sdk guys?

  • Anonymous
    June 18, 2011
    If you want the sip to close when you hit enter, just set the textbox's input scope to search and it will. Also, the user can easily dismiss the sip at any time by simply touching the phone's hardware back button, at any time if the sip is visible, the back button will dismiss it.

  • Anonymous
    April 09, 2012
    Thanks, it works like a charm. Just needed to set this.Focus(); when the Enter.key pressed event is fired.

  • Anonymous
    March 10, 2013
    Great!!! Trick is simple till it is known!!!