Xamarin Forms自定义键盘与底部弹出模板实现及Android键盘问题解决

Alright, let's tackle your two Xamarin.Forms challenges step by step—first building a bottom-up popup template that mimics the system keyboard, then squashing that annoying Android native keyboard flash when your custom keyboard opens.

We have two solid approaches here—using a ready-made toolkit for simplicity, or rolling your own with animations for full control.

Option 1: Use Xamarin Community Toolkit Popup (Recommended) #

This toolkit handles the slide-up animation out of the box, saving you time:

• First, install the NuGet package in your shared and platform projects:

  Install-Package Xamarin.CommunityToolkit
  

• Create your custom popup XAML (e.g., CustomKeyboardPopup.xaml):

  <xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="YourApp.CustomKeyboardPopup"
             VerticalOptions="End"
             Animation="SlideUp"
             HeightRequest="250"> <!-- Match typical keyboard height -->
      <!-- Your custom keyboard UI goes here: buttons, input fields, etc. -->
      <StackLayout BackgroundColor="White" Orientation="Horizontal">
          <Button Text="1" Clicked="OnKeyClicked" WidthRequest="60" />
          <Button Text="2" Clicked="OnKeyClicked" WidthRequest="60" />
          <Button Text="3" Clicked="OnKeyClicked" WidthRequest="60" />
          <!-- Add more keys as needed -->
      </StackLayout>
  </xct:Popup>
  

• In your code-behind or ViewModel, trigger the popup when an Entry gains focus:

  private async void Entry_Focused(object sender, FocusEventArgs e)
  {
      var keyboardPopup = new CustomKeyboardPopup();
      // Bind the popup's input to your Entry's Text property
      keyboardPopup.InputSubmitted += (s, input) => ((Entry)sender).Text += input;
      await Navigation.ShowPopupAsync(keyboardPopup);
  }
  

Option 2: Manual ContentView + Animation #

If you prefer not to use external libraries:

• Add a hidden ContentView to your page XAML:

  <ContentView x:Name="CustomKeyboardView"
               IsVisible="False"
               VerticalOptions="End"
               HeightRequest="250"
               BackgroundColor="White">
      <!-- Your custom keyboard UI -->
      <StackLayout Orientation="Horizontal">
          <Button Text="A" Clicked="OnKeyTapped" WidthRequest="60" />
          <Button Text="B" Clicked="OnKeyTapped" WidthRequest="60" />
      </StackLayout>
  </ContentView>
  

• Add animation logic to show/hide it:

  private async void ShowCustomKeyboard()
  {
      CustomKeyboardView.IsVisible = true;
      await CustomKeyboardView.TranslateTo(0, 0, 200); // Slide up from bottom
  }
  
  private async void HideCustomKeyboard()
  {
      await CustomKeyboardView.TranslateTo(0, CustomKeyboardView.Height, 200);
      CustomKeyboardView.IsVisible = false;
  }
  
  // Hook these to Entry's Focused/Unfocused events
  private void Entry_Focused(object sender, FocusEventArgs e) => ShowCustomKeyboard();
  private void Entry_Unfocused(object sender, FocusEventArgs e) => HideCustomKeyboard();
  

The problem is that Android automatically shows the soft keyboard when an Entry gains focus—we need to intercept that behavior at the native level.

Custom Entry Renderer for Android #

Create a custom renderer in your Android project to disable the native keyboard entirely when your Entry is focused:

1. First, define a custom Entry in your shared project (to target with the renderer):

   public class CustomKeyboardEntry : Entry { }
   

2. In your Android project, add the renderer:

   using Android.Content;
   using Android.Views.InputMethods;
   using YourApp;
   using YourApp.Droid;
   using Xamarin.Forms;
   using Xamarin.Forms.Platform.Android;
   
   [assembly: ExportRenderer(typeof(CustomKeyboardEntry), typeof(CustomKeyboardEntryRenderer))]
   namespace YourApp.Droid
   {
       public class CustomKeyboardEntryRenderer : EntryRenderer
       {
           public CustomKeyboardEntryRenderer(Context context) : base(context) { }
   
           protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
           {
               base.OnElementChanged(e);
   
               if (Control != null)
               {
                   // Disable native keyboard from showing on focus
                   Control.ShowSoftInputOnFocus = false;
   
                   // Listen for focus changes to trigger your custom keyboard
                   Control.FocusChange += (s, args) =>
                   {
                       if (args.HasFocus)
                       {
                           // Call your page's method to show custom keyboard
                           ((MainPage)Element.Parent).ShowCustomKeyboard();
                       }
                       else
                       {
                           ((MainPage)Element.Parent).HideCustomKeyboard();
                       }
                   };
               }
           }
       }
   }
   

3. Replace your regular Entry with CustomKeyboardEntry in your XAML:

   <local:CustomKeyboardEntry Placeholder="Tap to use custom keyboard" />
   

Key Notes: #

• ShowSoftInputOnFocus = false is the critical line here—it tells Android not to pop up the native keyboard when the Entry is focused. This works across all Android versions, including Android 11+.
• Make sure your custom keyboard's show/hide logic is tied to the Entry's focus state, as shown in the renderer's FocusChange handler.
• For iOS, since you already have it working, you can keep your existing setup (likely using InputView to replace the native keyboard).

内容的提问来源于stack exchange，提问作者anand