CODEWITHSUNDEEP
c#xamluwp
ravi kumar
ravi kumar

Reputation: 1620

UWP Focus on AutoSuggestBox

I have a AutoSuggestBox with visibility set to Collapsed. In the same view page, I have a button. On clicking the button, I want to show the AutoSuggestBox. And when the query has been submitted or the AutoSuggestBox has lost focus, I want to hide it again.

Here's AutoSuggestBox and the button:

<AutoSuggestBox Name="MainAutoSuggestBox"   
                Grid.Row="2"
                GotFocus="MainAutoSuggestBox_GotFocus"
                Visibility="Collapsed"
                QueryIcon="Find"                               
                QuerySubmitted="MainAutoSuggestBox_QuerySubmitted"
                LostFocus="MainAutoSuggestBox_LostFocus"/>

<Button Name="TopBarSearchButton"
        Content="Button"
        Click="TopBarSearchButton_Click"/>

My code-behind:

class SomePage : page
{
    ...
    ...

    private void MainAutoSuggestBox_GotFocus(object sender, RoutedEventArgs e)
    {
        //only for testing purposes
    }

    private void MainAutoSuggestBox_LostFocus(object sender, RoutedEventArgs e)
    {
        MainAutoSuggestBox.Visibility = Visibility.Collapsed;

        //put focus on the page
        this.Focus(FocusState.Programmatic);
    }

    private void MainAutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
    {
        //Do something
        //Works fine
    }

    private void TopBarSearchButton_Click(object sender, RoutedEventArgs e)
    {
        HandleSearchButtonClick();
    }

    private void HandleSearchButtonClick()
    {
        if (MainAutoSuggestBox.Visibility == Visibility.Collapsed)
        {
            MainAutoSuggestBox.Visibility = Visibility.Visible;
            MainAutoSuggestBox.Focus(FocusState.Programmatic);
        }
        else
        {       
            MainAutoSuggestBox.Visibility = Visibility.Collapsed;
        }    
    }
}

Now the problem is that when I click the button TopBarSearchButton for the first time, the visibility of MainAutoSuggestBox toggles but the focus is not set on the MainAutoSuggestBox. But from second time onwards it works as expected i.e, upon clicking the button, the visibility of MainAutoSuggestBox toggles as well as focus is set on the MainAutoSuggestBox.

During debugging, I found that when the button is clicked for the first time, control flow reached the line MainAutoSuggestBox.Focus(FocusState.Programmatic); inside HandleSearchButtonClick() but it never hits the 

private void MainAutoSuggestBox_GotFocus(object sender, RoutedEventArgs e)

method, but from second time onwards, it does hit the 

private void MainAutoSuggestBox_GotFocus(object sender, RoutedEventArgs e)

method.

Upvotes: 3

Views: 1147

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Let's first work out why the focus wasn't set for the first time.

First, subscribe to the Loaded event of the MainAutoSuggestBox, inside the handler, you will find that the RenderSize of MainAutoSuggestBox is <0,0>. This makes sense, as you have set the Visibility of the control to Collapsed in XAML, resulting in the control to ignore all size changing events.

So, by the time the second line of below code hit for the first time, although the Visibility is set to Visible, the control has yet to be fully rendered, so the following Focus() will take no effect. After that, the control is done rendering, and that's why from the second time on the Focus() will now work properly.

    MainAutoSuggestBox.Visibility = Visibility.Visible;
    MainAutoSuggestBox.Focus(FocusState.Programmatic);

There's a few ways to fix this. First is to subscribe to the SizeChanged event and then in the handler, only when the old size is <0,0> and new size is something else, you know it's completed rendering, call the Focus() there.

Or more easily, don't set it to Collapsed in XAML but do it in the Loaded event handler as it will be fully rendered before collapsing -

MainAutoSuggestBox.Loaded += (s, e) => MainAutoSuggestBox.Visibility = Visibility.Collapsed;

Upvotes: 5

Related Questions