Textbox focus + RadContinuumAndSlideTransition break page

5 posts, 1 answers
  1. Ryan
    Ryan avatar
    21 posts
    Member since:
    Apr 2013

    Posted 17 Aug 2013 Link to this post

    Hi,

    My app uses the RadPhoneApplicationFrame. One issue I'm having is that some pages I use the Loaded event and within this I set the focus on a particular textbox (just to save the user having to click on it themselves) like so:

    Loaded += (s1, e1) =>
    {
        NameText.Focus();
    };

    I'm also using RadContinuumAndSlideTransition animations for page changes. These two things seem to conflict because what ends up happening, is that the keyboard slides in as the whole page is sliding in, and the page ends up sliding up too far so the top of the page is chopped off. This seems to be a timing thing and happens randomly, but the result is a broken looking page. Closing the keyboard fixes the page back to normal.

    My question is, is this expected behaviour? And if it is, how can I work around it?

    Thanks
    Ryan
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 22 Aug 2013 Link to this post

    Hello Ryan,

    I am not able to reproduce the described issue.

    I attached a sample application that I created while following your instructions. Please have a look at it and let me know if I'm missing something. Sliding the page so that the top is not visible happens only when the TextBox that you want to focus is in the lower part of the page (you can reproduce it by focusing tb7 in the sample app), but this behavior is expected as otherwise the TextBox would be covered by the keyboard.
     
    Regards,
    Todor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Ryan
    Ryan avatar
    21 posts
    Member since:
    Apr 2013

    Posted 22 Aug 2013 Link to this post

    Hi Todor,

    Your example absolutely reproduced the problem. Your example is focusing the 3rd item.

    As you can see from my attached screenshot (good transition), this is what is should look like. The 3rd item is clearly visible without having to scroll.

    The screenshot (bad transition), shows what I actually get. Note that this isn't 100% repeatable. It occurs maybe 75% in the emulator, maybe a bit less on actual hardware.


  5. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 27 Aug 2013 Link to this post

    Hello Ryan,

    I was able to reproduce the undesired behavior. It seems like when when you attempt to focus the element it still hasn't gone high enough to be visible with a keyboard, so the OS schedules its own transition that will eventually move it too much. We will do our best to provide a fix for this for our future releases. For now you can use the following approach as a workaround. Since the issue occurs because the animation hasn't ended by the time you focus the element, you can add a timer that will allow you to focus the text box later. Here are the modification that I made to Page1 of the sample project I sent you:

    DispatcherTimer timer;
     
    public Page1()
    {
        InitializeComponent();
        Loaded += Page1_Loaded;
    }
     
    void Page1_Loaded(object sender, RoutedEventArgs e)
    {
        timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromMilliseconds(200);
        timer.Tick += timer_Tick;
        timer.Start();
    }
     
    void timer_Tick(object sender, EventArgs e)
    {
        tb3.Focus();
        timer.Stop();
    }

    I hope this approach would be applicable to your application as well. I have updated your telerik points for bringing this issue to our attention. Thank you for your cooperation.
     
    Regards,
    Todor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Ryan
    Ryan avatar
    21 posts
    Member since:
    Apr 2013

    Posted 27 Aug 2013 Link to this post

    Thanks Todor,

    That's a great solution. I actually solved it in a slightly different way by hooking into the RadTransitionFrame Transition Complete event.

    Thanks
    Ryan

    public MyPage()
    {
        App.RootFrame.PageTransitionCompleted += PageTransitionCompleted;
    }
     
    private void PageTransitionCompleted(object sender, EventArgs e)
    {
        NameText.Focus();
    }
Back to Top
DevCraft banner