Handle hardware buttons in Dialogs.

[Tum4ik]

I have a problem with Android hardware back button when using dialogs.

Currently my dialog looks like:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dialogs="clr-namespace:Tum4ik.RemoteControl.Client.ViewModels.Dialogs"
             xmlns:prism="http://prismlibrary.com"
             xmlns:const="clr-namespace:Tum4ik.RemoteControl.Client.Core.Constants;assembly=Tum4ik.RemoteControl.Client.Core"
             xmlns:behaviors="clr-namespace:Tum4ik.RemoteControl.Client.Core.Behaviors;assembly=Tum4ik.RemoteControl.Client.Core"
             x:DataType="dialogs:AppExitConfirmationDialogViewModel"
             x:Class="Tum4ik.RemoteControl.Client.Views.Dialogs.AppExitConfirmationDialog"
             prism:DialogLayout.RelativeWidthRequest="0.75">

  <Frame Style="{StaticResource DialogFrameStyle}">
    <StackLayout Spacing="20">
      <StackLayout Orientation="Horizontal" Spacing="20">
        <StackLayout.Resources>
          <Style TargetType="Label"
                 BasedOn="{StaticResource DialogTitleLabelStyle}" />
        </StackLayout.Resources>
        <Label FontFamily="{x:Static const:FontFamilies.Material}"
               Text="{x:Static const:MaterialIcons.Logout}"
               TextColor="{x:Static const:Colors.MainThemeColor}"
               Rotation="180" />
        <Label Text="{Binding Translate[Exit]}" />
      </StackLayout>

      <Label Text="{Binding Translate[Do you want to close the application?]}" />
      <StackLayout Orientation="Horizontal"
                   HorizontalOptions="EndAndExpand">
        <StackLayout.Resources>
          <Style TargetType="Button">
            <Setter Property="behaviors:ButtonTapBackgroundAnimationBehavior.AttachBehavior"
                    Value="True" />
          </Style>
        </StackLayout.Resources>
        <Button Text="{Binding Translate[No]}"
                Command="{Binding NoCommand}">
          <Button.ImageSource>
            <FontImageSource Glyph="{x:Static const:MaterialIconsRound.Close}"
                             FontFamily="{x:Static const:FontFamilies.MaterialRound}"
                             Color="{x:Static const:Colors.MainThemeInactiveColor}" />
          </Button.ImageSource>
        </Button>
        <Button Text="{Binding Translate[Yes]}"
                Command="{Binding YesCommand}">
          <Button.ImageSource>
            <FontImageSource Glyph="{x:Static const:MaterialIconsRound.Done}"
                             FontFamily="{x:Static const:FontFamilies.MaterialRound}"
                             Color="{x:Static const:Colors.MainThemeConfirmationColor}" />
          </Button.ImageSource>
        </Button>
      </StackLayout>
    </StackLayout>
  </Frame>

</ContentView>

I call that dialog via button on my MainPage:

<Button Style="{StaticResource IconButtonWithForegroundColorChangeStyle}"
        Text="{x:Static const:MaterialIconsRound.Shutdown}"
        Command="{prism:ShowDialog Name={x:Static const:DialogNames.AppExitConfirmationDialog}}" />

Here is my shutdown button:

This is my dialog:

As you could see, when the dialog is displayed - the button is disabled. So, if I press "No" button in the dialog - everything goes as expected - the shutdown button is enabled again and I can call my dialog again.

But if I press the hardware back button - the shutdown button stays disabled and there is no chance to make it enabled again.

Since I use ContentView as my dialog - there is also no way to override "OnBackButtonPressed" method.

So, is there some way I could solve this problem?
Thanks in advance.

[AmrAlSayed0]

Unfortunately, this was reported as a bug #1862 long time ago and a way to fix it was available at least 6 months ago but it hasn't been fixed yet. I stopped using this feature completely because of that bug.

[Tum4ik]

Thank you for your answer!

[Tum4ik]

So, a solution here is just not to use XAML dialog showing

Command="{prism:ShowDialog Name={x:Static const:DialogNames.AppExitConfirmationDialog}}"

With regular binding to the view model command it work ok and does not disable the button.

<Button Style="{StaticResource IconButtonWithForegroundColorChangeStyle}"
        Text="{x:Static const:MaterialIconsRound.Shutdown}"
        Command="{Binding ShutdownClickedCommand}"/>

private ICommand? _shutdownClickedCommand;
public ICommand ShutdownClickedCommand =>_shutdownClickedCommand ??= new DelegateCommand(ShutdownClicked);

private void ShutdownClicked()
{
  _dialogService.ShowDialog(DialogNames.AppExitConfirmationDialog);
}

[Tum4ik]

But then, on double tap you will have two popups....

[Tum4ik]

Here is my workaround:

private readonly object _locker = new();
private readonly HashSet<string> _openDialogs = new();

public void OnNavigatedTo(INavigationParameters parameters)
{
  _openDialogs.Clear();
}

private ICommand? _shutdownButtonClickedCommand;
public ICommand ShutdownButtonClickedCommand =>
  _shutdownButtonClickedCommand ??= new DelegateCommand(ShutdownButtonClicked);

private void ShutdownButtonClicked()
{
  lock (_locker)
  {
    if (!_openDialogs.Contains(D.AppExitConfirmationDialog))
    {
      _openDialogs.Add(D.AppExitConfirmationDialog);
      _dialogService.ShowDialog(D.AppExitConfirmationDialog);
    }
  }
}

[dansiegel]

With PR #2391 handling the Android Back Button is now supported for both regular navigation and Dialogs.

[Tum4ik]

Yeah, thanks Dan, I saw.