none
How to handle the appearance of the on-screen keyboard

    Question

  • I am developing an app which has some text inputs, and I want to show on-screen keyboard such that it does not hide the app and replace the keyboard. MSDN has provided sample, but I am not getting that. I want simple explanation how to use InputPaneHelper class (given in sample) or any other method to show keyboard and not hinding the bottom part of app while on-screen keyboard in appeared. Thanks.
    Thursday, October 11, 2012 6:01 AM

Answers

  • Hi Xyroid,

    The standard InputPane behavior is to move app page just far enough that the focused element is in view. If you have other controls that need to be visible as well or a large text element then you will need to handle reconfiguring the page to avoid the InputPane yourself. To do this, handle the InputPane.Showing event and reconfigure your output to avoid the OccludedRect. If your edit control expands after this point then you will need to watch for that happening and move the page up accordingly.

    I'm not sure what you meant about the AppBar hiding. The InputPane will stay open so long as the focus is on an text control or on a limited set of controls likely to be used with the text control (see The touch keyboard for details). You can prevent the AppBar from hiding the InputPane by making sure the focus stays on control which implements the TextPattern or TextChildPattern. You may need to customize a control to do this (again, see The touch keyboard for details).

    I wasn't able to open your sample project. Windows can natively open zip files, but not rar files.

    --Rob


    Tuesday, October 23, 2012 10:51 PM

All replies

  • First, you can invoke the keyboard and cannot manipulate here is appears.

    Only can:

    - add input scopes to show different layouts.

    - prevent the keyboard hide the control where you are write ( it should be automatically, only in share mode isn´t happen)

    In on application i added this:

        _offSet = 0;
                
                Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += (s, args) =>
                {
                    _offSet = (int)args.OccludedRect.Height;
                    args.EnsuredFocusedElementInView = true;
                    var trans = new TranslateTransform();
                    trans.Y = -_offSet;
                    this.RenderTransform = trans;
                };
    
                Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += (s, args) =>
                {
                    var trans = new TranslateTransform();
                    trans.Y = 0;
                    this.RenderTransform = trans;
                    args.EnsuredFocusedElementInView = false;
                };

    in the constructor of the page. Maybe is something like this you need. It's only to pull the page up.


    Sara Silva

    Thursday, October 11, 2012 8:32 PM
  • In my app I am having bottom and top app bar. When user focus on textbox the virtual keyboard is appeared and when user tries to open the appbar, the virtual keyboard hides, how to resolve this issue ?
    Friday, October 12, 2012 5:13 AM
  • I am facing one more issue, when I use textbox with virtual keybaord and tries to open appbar at that time the appbar hides. How can I do such that the appbar become visible. I just want that. I changed the above code with 

     MyAppBar.RenderTransform = trans;

    But it is not working.

    • Edited by Xyroid Friday, October 12, 2012 5:23 AM
    Friday, October 12, 2012 5:18 AM
  • I don´t see this:

    "When user focus on textbox the virtual keyboard is appeared and when user tries to open the appbar, the virtual keyboard hides"

    like a issue, i think is a normal behavior (or is missing something for me and is a really issue).

    About this

    "when I use textbox with virtual keybaord and tries to open appbar at that time the appbar hides. How can I do such that the appbar become visible"

    Is normally, If you want to see the appbar, the keyboard must hide and the page return to the normal view. And then you can open the appbar.


    Sara Silva


    Friday, October 12, 2012 8:34 AM
  • It must be possible, see this 

    http://i.msdn.microsoft.com/dynimg/IC576608.png
    http://i.msdn.microsoft.com/dynimg/IC576608.png

    from http://msdn.microsoft.com/en-us/library/windows/apps/hh868273.aspx
    Friday, October 12, 2012 8:41 AM
  • Now i understand what are you talking about.

    See the code i had in other post and see this:

    Tips and Tricks for C# Metro developers: Handling the virtual keyboard

    Popup stays under virtual keyboard in stead of scrolling up with the bottom appbar


    Sara Silva

    Friday, October 12, 2012 8:52 AM
  • If I make my appbar sticky, it comes upward along with the keyboard and scrollview is seen in main page. Now when the current focus is on textbox and I am writing at the bottom edge and when I press buttons on appbar the page scolls upside, how can I prevent that ?  TranslateTransform moves the app upside but there is no scroll so the elements at top side got cut.
    • Edited by Xyroid Friday, October 12, 2012 11:02 AM
    Friday, October 12, 2012 8:56 AM
  • When the textbox got the focus try to open the appbar without lost focus in textbox and pull up the appbar is necessary.

    if it not works, move the menu to a flyout popup and open it when the textbox got focus.


    Sara Silva


    Friday, October 12, 2012 10:45 PM
  • I have no flyout, just appbar. Appbad contains the text formatting buttons like bold, italic, underline. When I press appbar button, the focus doesn't loose but the whole app tranlates upward and have to scroll down.

    See this image, the half text box is hidden, so when I press outside the textbox and drag the page then half of the text box will be visible, now I am writing on the bottom edge of textbox and when I press the appbar button the position of app becomes as previous like this . I want to prevent that.

    I am attaching sample project, just do this steps.

    1. Run project in simulator with TOUCH MODE.

    2. When you click on richeditbox, the app will move upward. You can drag the app up/down to see the hidden part behind virtual keyboard.

    3. Now write text to reach bottom edge of richeditbox.

    4. Select text and apply formatting from appbar.

    5. After clicking you will realize that app goes downward, so the bottom edge of richeditbox will be hidden. so every time when appbar is clicked you have to manually drag the app.

    • Edited by Xyroid Saturday, October 13, 2012 5:11 AM
    Saturday, October 13, 2012 4:51 AM
  • Hi Xyroid,

    The standard InputPane behavior is to move app page just far enough that the focused element is in view. If you have other controls that need to be visible as well or a large text element then you will need to handle reconfiguring the page to avoid the InputPane yourself. To do this, handle the InputPane.Showing event and reconfigure your output to avoid the OccludedRect. If your edit control expands after this point then you will need to watch for that happening and move the page up accordingly.

    I'm not sure what you meant about the AppBar hiding. The InputPane will stay open so long as the focus is on an text control or on a limited set of controls likely to be used with the text control (see The touch keyboard for details). You can prevent the AppBar from hiding the InputPane by making sure the focus stays on control which implements the TextPattern or TextChildPattern. You may need to customize a control to do this (again, see The touch keyboard for details).

    I wasn't able to open your sample project. Windows can natively open zip files, but not rar files.

    --Rob


    Tuesday, October 23, 2012 10:51 PM