Displaying the Onscreen Keyboard

  • Article

To enable users to enter text with a remote control, applications can use the onscreen keyboard that is included with Windows Media Center, which is an image of a keyboard that allows the user to select letters by using the remote control's arrow buttons and the OK/Enter button.

The onscreen keyboard is modal and is displayed as an overlay at the bottom of the window. The user opens the onscreen keyboard to enter text, and then dismisses it when finished.

The onscreen keyboard automatically displays the appropriate keyboard according to the user's input language, which is set on the Keyboards and Languages tab of the Region and Language Control Panel.

The application can limit the number of characters the user can enter for a given text string. The application can also mask the characters that are displayed for sensitive information, such as a password field.

The onscreen keyboard

The example below show a simple typing handler object that allows the user to enter text by clicking a button to open the onscreen keyboard.

    <UI Name="Default">
      <Locals>
        <addin:AddInHost Name="AddInHost"/>
        <EditableText Name="TextEditControl" Value="This is text" />
        <TypingHandler Name="myTypingHandler" PasswordMasked="false" MaxLength="10" />
      </Locals>

      <Rules>
        <Binding Source="[TextEditControl.Value]" Target="[DisplayText.Content]" />
        <Binding Source="[TextEditControl]" Target="[myTypingHandler.EditableText]" />
      </Rules>

      <Content>
        <Panel Layout="VerticalFlow">
          <Children>
            <Text Name="DisplayText" Color="White"/>
            <b:SimpleButton>
              <Command>
                <InvokeCommand Description="Open the Onscreen Keyboard"
                               Target="[AddInHost.MediaCenterEnvironment.ShowOnscreenKeyboard]"
                               editableText="[myTypingHandler.EditableText]"
                               passwordMasked="[myTypingHandler.PasswordMasked]"
                               maxLength="[myTypingHandler.MaxLength]"/>
              </Command>
            </b:SimpleButton>
          </Children>
        </Panel>
      </Content>
    </UI>

For an example of how to create edit boxes that accept triple-tap input, see the TripleTap Editbox example under Scenarios in the Sample Explorer.

Sample Explorer

  • MediaCenterEnvironment > ShowOnScreenKeyboard

See Also