András Tóth‘s professional blog
banditoth.net

Hey there 👋, I’m banditoth a .NET MAUI developer from Hungary.
I write about software development with .NET technologies.

You can find me on:
LinkedIn | Github | StackOverflow | X / Twitter | Threads

Tag: keyboard

  • Resizing the screen when an Entry gets focused in .NET MAUI

    When an entry field gets focused, the software keyboard appears, potentially covering the entry field. To provide a better user experience, you need to adjust the screen layout so that the entry field remains visible.

    First, create a parent class for your views, deriving from ContentPage, and add a HaveKeyboardOffsetProperty.

    public class ViewBase : ContentPage
    {
        public static readonly BindableProperty HasKeyboardOffsetProperty =
            BindableProperty.Create(nameof(HasKeyboardOffset), typeof(bool), typeof(ViewBase), false);
    
        public bool HasKeyboardOffset
        {
            get => (bool)GetValue(HasKeyboardOffsetProperty);
            set => SetValue(HasKeyboardOffsetProperty, value);
        }
    }
    
    

    iOS Solution:

    Next, create the PageElementMapper class to handle the keyboard appearance and adjust the screen layout.

    public class PageElementMapper
    {
        private static double _contentOriginalHeight;
        private static Thickness _contentOriginalMargin;
    
        public static void Map(IElementHandler handler, IElement view)
        {
            if (view is ViewBase viewData)
            {
                UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
                {
                    if (viewData.HasKeyboardOffset)
                    {
                        _contentOriginalHeight = viewData.Content.Height;
                        _contentOriginalMargin = viewData.Content.Margin;
                        viewData.Content.HeightRequest = _contentOriginalHeight - args.FrameEnd.Height;
                        viewData.Content.Margin = new Thickness(0, args.FrameEnd.Height, 0, 0);
                    }
                });
    
                UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
                {
                    if (viewData.HasKeyboardOffset)
                    {
                        viewData.Content.HeightRequest = _contentOriginalHeight;
                        viewData.Content.Margin = _contentOriginalMargin;
                    }
                });
            }
        }
    }
    
    

    Finally, register the mapper in the MauiProgram.cs file.

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureMauiHandlers(handlers =>
                {
                    Microsoft.Maui.Handlers.PageHandler.ElementMapper.AppendToMapping("KeyboardOffset", (handler, view) =>
                    {
                        if (view is ViewBase)
                        {
    #if IOS
                            PageElementMapper.Map(handler, view);
    #endif
                        }
                    });
                });
    
            return builder.Build();
        }
    }
    
    

    Android solution:

    On Android, you can use a PropertyChanged method of the HasKeyboardOffset:

        private static void OnHasKeyboardOffsetPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
    #if ANDROID
            if (bindable is ViewBase view)
            {
                if (newValue is bool hasOffset)
                    if (hasOffset == true)
                        Microsoft.Maui.Controls.Application.Current.Dispatcher.Dispatch(() =>
                        {
                            Platform.CurrentActivity?.Window?.SetSoftInputMode(Android.Views.SoftInput.AdjustResize);
                        });
                    else
                        Microsoft.Maui.Controls.Application.Current.Dispatcher.Dispatch(() =>
                        {
                            Platform.CurrentActivity?.Window?.SetSoftInputMode(Android.Views.SoftInput.StateUnspecified);
                        });
            }
    #endif
        }
    

    Remarks

    The provided solution offers a way to manage this in .NET MAUI on iOS. However, always be open to improvements and share your solutions with the community for better practices. This might not be the best solution to do it.

  • .NET MAUI Hide software keyboard when tapping out of an Entry on iOS

    To hide the software keyboard when the user taps outside the entry field, set the HideSoftInputOnTapped property to True in your ContentPage definition.

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyMauiApp.MainPage"
                 HideSoftInputOnTapped="True">
    
        <StackLayout Padding="10">
            <Entry Placeholder="Tap here to enter text" />
        </StackLayout>
    </ContentPage>
    
    

    Please note that the HideSoftInputOnTapped property might not work as expected when tapping on certain controls like ScrollView. In such cases, you might need to implement a custom behavior to handle keyboard dismissal.