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

You can capture key press in a Popup view by creating a custom grid with keyboard listener attached to it.

Step 1: Create a custom grid with a keyboard listener and set focus to the custom grid in the loaded event. In the OnKeyDown event, set the Popup’s IsOpen property to true or false based on the key.

    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:
Add the custom grid to the Popup’s content template and reference the Popup inside the custom grid.

 <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>

View sample in GitHub

Conclusion:

I hope you enjoyed learning about how to capture the key press in 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 for configuration specifications.

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

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