How to hide stacklayout if user clicked somwhere else on screen - xaml

Question

I createt ResourceDictionary in App.xaml file for application header.
In header I created two dropdowns menu (with stacklayouts and grids).
First is for some user informations and second one is for search.
By default these dropdown menus are hiden.
Max one may be visible if user click on user-icon or on search-icon.
So in HeaderViewModel I cratet these two methods:
private async void AccountInformationAsync()
{
var userService = await UserService.GetUserData();
Username = userService.Username;
DisplayName = userService.DisplayName;
Status = userService.Status;
Influence = userService.Influence;
MTP = userService.MTP;
VisibilityInformation = !VisibilityInformation;
if (VisibilityInformation == true)
{
VisibilitySearch = false;
}
}
private void Search()
{
VisibilitySearch = !VisibilitySearch;
if (VisibilitySearch == true)
{
VisibilityInformation = false;
}
}
This works fine... If user click on user-icon user info will show up and if user then click on serach-icon info will hide an search menu will show up.
So, my question is how to hide any of these menus if user click somewhere else on the screen?

Answer 1

You need to add an TapGestureRecognizer on the Main Layout View of the Page. And on the Tap of it you can use Command and Hide both the dropdown Menu.
private void HideDropDowns()
{
VisibilitySearch = false;
VisibilityInformation = false;
}
HideDropDowns should be the Method assigned to the Command in the TapGestureRecognizer.