Uwp navigation example and focusing on control

Question

I use uwp navigation example as an example for my application navigation. I need to set the focus on TextBox. I try it on uwp navigation example. For BasicPage I add this code:

   <StackPanel Orientation="Vertical">
        <TextBox x:Name="Test" />
        <TextBox x:Name="Test1" />
    </StackPanel>

    public BasicPage()
    {
        this.InitializeComponent();
        this.Loaded += BasicPage_Loaded;
    }

    private void BasicPage_Loaded(object sender, RoutedEventArgs e)
    {
        Test1.Focus(FocusState.Programmatic);
    }

Test1 does not receive the focus. I try this code in a "normal" windows universal app - it is work. What do you advise?

Answer 1

It is because Focus function gets called in other place after you call the Test1.Focus.

In AppShell.xaml.cs, you can find the following code:

private void OnNavigatedToPage(object sender, NavigationEventArgs e)
{
    // After a successful navigation set keyboard focus to the loaded page
    if (e.Content is Page && e.Content != null)
    {
        var control = (Page)e.Content;
        control.Loaded += Page_Loaded;
    }
}

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    ((Page)sender).Focus(FocusState.Programmatic);
    ((Page)sender).Loaded -= Page_Loaded;
    this.CheckTogglePaneButtonSizeChanged();
}

The above code means when you navigate to a page, it will subscribe the page loaded event and set the focus on page.

Your code subscribe the page loaded event in the page itself. And your code will be executed before the Page_Loaded function in AppShell. So you didn't get what you want.

So if you simply comment out ((Page)sender).Focus(FocusState.Programmatic); in the Page_Loaded function. You will get what you want. I am not sure what's the exact purpose of that line. But everything seems good.

If you do find something wrong after comment out that line, we can also work it around. Call the focus function once in LayoutUpdated event after loaded event.

public sealed partial class BasicPage : Page
{
    bool bAfterLoaded = false;
    public BasicPage()
    {
        this.InitializeComponent();
        this.Loaded += BasicPage_Loaded;
        this.LayoutUpdated += BasicPage_LayoutUpdated;
    }

    private void BasicPage_LayoutUpdated(object sender, object e)
    {
        if (bAfterLoaded)
        {
            Test1.Focus(FocusState.Programmatic);
            bAfterLoaded = !bAfterLoaded;
        }
    }

    private void BasicPage_Loaded(object sender, RoutedEventArgs e)
    {
        bAfterLoaded = !bAfterLoaded;
    }
}

Hope this can help you.