How to resize application in .NET MAUI ListView(SfListView)?

When working with the .NET MAUI ListView, you may encounter situations where the keyboard covers part of the ListView, making it difficult for users to interact with all items. This guide will help you adjust the layout so the ListView resizes appropriately when the keyboard opens and closes.

Android
For Android, you can set the WindowSoftInputModeAdjust property to Resize. This automatically resizes the layout, ensuring all ListView items are visible when the keyboard is displayed.

public class MainActivity : MauiAppCompatActivity
 {
     protected override void OnCreate(Bundle? savedInstanceState)
     {
         base.OnCreate(savedInstanceState);
 
         // Set WindowSoftInputModeAdjust to Resize
         App.Current!.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>()
             .UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
     }
 }

iOS

Currently, iOS does not offer a direct API to automatically resize the application when the keyboard appears. You can manage this by manually adjusting the layout’s margin using keyboard events:

• ObserveWillShow: Triggered when the keyboard is about to appear.
• ObserveWillHide: Triggered when the keyboard is about to disappear.

By handling these events, you can dynamically adjust the page’s bottom margin to prevent the keyboard from covering ListView items, allowing users to scroll and view all content seamlessly.

 public partial class MainPage : ContentPage
   {
 
# if IOS
       private NSObject? _keyboardShowObserver;
       private NSObject? _keyboardHideObserver;
#endif
       public MainPage()
       {
           InitializeComponent();
 
           var numbers = Enumerable.Range(1, 20).ToList();
           NumberListView.ItemsSource = numbers;
 
# if IOS
           
           // Subscribe to keyboard show and hide notifications
           _keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardWillShow);
           _keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardWillHide);
           
#endif
       }
 
#if IOS
         
         // This method is triggered when the iOS keyboard is about to appear. It calculates the height of the keyboard and adjusts the page layout by calling AdjustScrollViewPadding to adjusts the bottom margin of the page content based on the height of the keyboard when it appears.
         
       private void OnKeyboardWillShow(object? sender, UIKeyboardEventArgs args)
       {
           var keyboardFrame = args.FrameEnd;
           AdjustScrollViewPadding(keyboardFrame.Height);
       }
       
       // This method is triggered when the keyboard disappears.
       // It resets the margin to 0 so the layout returns to normal.
       
       private void OnKeyboardWillHide(object? sender, UIKeyboardEventArgs args)
       {
           AdjustScrollViewPadding(0);
       }
       
        // This method dynamically adjusts the bottom margin of the page content based on the height of the keyboard when it appears or disappears.
        
       private void AdjustScrollViewPadding(double keyboardHeight)
       {
           var pageContent = this.Content as View;
 
           if (pageContent != null)
           {
               // Adjust the margin to accommodate the keyboard height
               pageContent.Margin = new Thickness(0, 0, 0, keyboardHeight);
           }
       }
       
    // This method is triggered when the page is about to disappear, such as when navigating away from the current page. It ensures proper cleanup by unsubscribing from the keyboard notifications, preventing potential memory leaks.

       protected override void OnDisappearing()
       {
           base.OnDisappearing();
 
           // Unsubscribe from notifications to avoid memory leaks
           _keyboardShowObserver?.Dispose();
           _keyboardHideObserver?.Dispose();
       }
#endif

Conclusion:

I hope you enjoyed learning about how to resize .NET MAUI ListView(SfListView).

You can refer to our .NET MAUI ListView 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!