How to capture key press notification in .NET MAUI Popup (SfPopup) ?

To capture key presses in a .NET MAUI Popup, you can create a custom grid with a keyboard listener attached. Below are the steps to implement this functionality:

Step 1: Define a custom grid that implements IKeyboardListener, and set focus to the custom grid in its loaded event. In the OnKeyDown event, control the Popup’s IsOpen property based on the key pressed.

    using Syncfusion.Maui.Core.Internals;

    public class CustomGrid : Grid, IKeyboardListener
    {
        public SfPopup Popup { get; set; }
        public CustomGrid()
        {
            this.AddKeyboardListener(this);
            this.Loaded += CustomGrid_Loaded;
        }

        private void CustomGrid_Loaded(object? sender, EventArgs e)
        {
            SetUpKeyListenerRequirements();
            this.Focus();
        }

        public void OnKeyDown(KeyEventArgs args)
        {
            if (this.Popup != null && !this.Popup.IsOpen && args.Key == KeyboardKey.O)
            {
                this.Popup.IsOpen = true;
            }
            if (this.Popup != null && this.Popup.IsOpen && args.Key == KeyboardKey.Enter)
            {
                this.Popup.IsOpen = false;
            }
        }
        
        private void SetUpKeyListenerRequirements()
        {
#if WINDOWS
            if (this.Handler != null)
            {
                (this.Handler.PlatformView as Microsoft.UI.Xaml.FrameworkElement)!.IsTabStop = true;
            }
#elif ANDROID
            if (this.Handler != null)
            {
                (this.Handler!.PlatformView as Android.Views.View) !.FocusableInTouchMode = true;
            }
#endif
        }
    }

Step 2:
Include the CustomGrid in the Popup’s content template and reference the Popup inside the custom grid for key press handling.

 <sfPopup:SfPopup x:Name="popup" Opened="popup_Opened" Closed="popup_Closed">
     <sfPopup:SfPopup.ContentTemplate>
         <DataTemplate>
             <local:CustomGrid Popup="{x:Reference popup}">
                 <Label Text="Press Enter key to close popup"
                         BackgroundColor="SkyBlue"
                    VerticalTextAlignment="Center"
                    HorizontalTextAlignment="Center" />
             </local:CustomGrid>
         </DataTemplate>
     </sfPopup:SfPopup.ContentTemplate>
 </sfPopup:SfPopup>

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to capture the key press in the Popup view.

You can refer to our .NET MAUI Popup feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!