如何放置表情符号键盘图标？

Question

I am making a custom control of an entry. I would like that when you open the keyboard, that icon appears on the keyboard.

I saw that it could be done by setting the InputType to Android.Text.InputTypes.TextVariationShortMessage | Android.Text.InputTypes.ClassText. The problem is that I don't know how to implement it using a custom control.

Custom Control xaml:

 <Entry x:Name="EntryControl" Margin="45,0,0,0" Keyboard="Chat" Placeholder="{Binding Placeholder}" Text="{Binding EntryText}" WidthRequest="320" />

Custom control xaml.cs:

 public partial class CKEditor : ContentView
{
    public CKEditor()
    {
        InitializeComponent();
    }
    //NO ESTA LISTO TODAVIA


    //===============Placeholder=====================
    public static readonly BindableProperty TextProperty =
            BindableProperty.Create("Text", typeof(string), typeof(CKEditor));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }


    //===============Item Source==========================
    public static readonly BindableProperty EmojiItemSourceProperty =
            BindableProperty.Create("EmojiItemSource", typeof(IList), typeof(CKEditor));

    public IList EmojiItemSource
    {
        get { return (IList)GetValue(EmojiItemSourceProperty); }
        set { SetValue(EmojiItemSourceProperty, value); }
    }


    //===============Border Color=====================
    public static readonly BindableProperty BorderColorProperty =
            BindableProperty.Create("BorderColor", typeof(Color), typeof(CKEditor));

    public Color BorderColor
    {
        get { return (Color)GetValue(BorderColorProperty); }
        set { SetValue(BorderColorProperty, value); }
    }

    //===============Border Color=====================
    public static readonly BindableProperty SendButtonColorProperty =
            BindableProperty.Create("SendButtonColor", typeof(Color), typeof(CKEditor));

    public Color SendButtonColor
    {
        get { return (Color)GetValue(SendButtonColorProperty); }
        set { SetValue(SendButtonColorProperty, value); }
    }


    //===============Corner radius=====================
    public static readonly BindableProperty CornerRadiusProperty =
            BindableProperty.Create("CornerRadius", typeof(int), typeof(CKEditor));

    public int CornerRadius
    {
        get { return (int)GetValue(CornerRadiusProperty); }
        set { SetValue(CornerRadiusProperty, value); }
    }


   

    //===============Left side Icon=====================
    public static readonly BindableProperty LeftSideIconProperty =
            BindableProperty.Create("LeftSideIcon", typeof(ImageSource), typeof(CKEditor));

    public ImageSource LeftSideIcon
    {
        get { return (ImageSource)GetValue(LeftSideIconProperty); }
        set { SetValue(LeftSideIconProperty, value); }
    }


    //===============Placeholder=====================
    public static readonly BindableProperty PlaceholderProperty =
            BindableProperty.Create("Placeholder", typeof(string), typeof(CKEditor));

    public string Placeholder
    {
        get { return (string)GetValue(PlaceholderProperty); }
        set { SetValue(PlaceholderProperty, value); }
    }

    //===============Send message command=====================
    public static readonly BindableProperty SendMsgCommandProperty =
            BindableProperty.Create("SendMsgCommand", typeof(ICommand), typeof(CKEditor));

    public ICommand SendMsgCommand
    {
        get { return (ICommand)GetValue(SendMsgCommandProperty); }
        set { SetValue(SendMsgCommandProperty, value); }
    }


    //===============Right side icon=====================
    public static readonly BindableProperty RightSideIconProperty =
            BindableProperty.Create("RightSideIcon", typeof(ImageSource), typeof(CKEditor));

    public ImageSource RightSideIcon
    {
        get { return (ImageSource)GetValue(RightSideIconProperty); }
        set { SetValue(RightSideIconProperty, value); }
    }
    //===============Visibility Emojibox===============


    public static readonly BindableProperty BoxVisibleProperty =
        BindableProperty.Create("BoxVisible", typeof(bool), typeof(CKEditor));

    public bool BoxVisible
    {
        get { return (bool)GetValue(BoxVisibleProperty); }
        set { SetValue(BoxVisibleProperty, value); }
    }

}

MainPage.xaml:

 <StackLayout AbsoluteLayout.LayoutBounds="0,1,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional"> <fav:CKEditor x:Name="entrycontrol" BorderColor="{Binding BorderColor}" BoxVisible="{Binding IsVisible}" CornerRadius="{Binding CornerRadius}" EmojiItemSource="{Binding EmojiList}" LeftSideIcon="{Binding LeftSideIcon}" Placeholder="{Binding Placeholder}" RightSideIcon="{Binding RightSideIcon}" Text="{Binding EntryText}" /> </StackLayout>

Viewmodel.cs:

 public class ViewModel : INotifyPropertyChanged
{
    //==============================================================
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    //==============================================================



    string imageprimarybutton;
    public string FirstImage
    {
        get => imageprimarybutton; set
        {
            imageprimarybutton = value;
            OnPropertyChanged();
        }
    }

    //=============

    string firstButtonColor;
    public string FirstButtonColor
    {
        get => firstButtonColor; set
        {
            firstButtonColor = value;
            OnPropertyChanged();
        }
    }

    //=============

    private bool isVisible;

    public bool IsVisible
    {
        get => isVisible;
        set
        {
            isVisible = value;
            OnPropertyChanged();
        }
    }

    //=============


    public ICommand OpenFloating { get; private set; }

    public ICommand MethodCommand { get; set; }

    public ObservableCollection<Items> ItemList { get; set; }

    //=============

    public ViewModel()
    {
        IsVisible = false;
        FirstImage = "dots.png";
        FirstButtonColor = "#B52D50";

        OpenFloating = new Command(openFloatingButton);

     
        ItemList = new ObservableCollection<Items>();

        ItemList.Add(new Items { Image = "facebook.png", ColorButton = "#B52D50", MethodCommandName = "facebook" });
        ItemList.Add(new Items { Image = "twitter.png", ColorButton = "#B52D50", MethodCommandName = "twitter" });
        ItemList.Add(new Items { Image = "insta.png", ColorButton = "#B52D50", MethodCommandName = "insta" });
        ItemList.Add(new Items { Image = "web.png", ColorButton = "#B52D50", MethodCommandName = "web" });

        MethodCommand = new Command(ButtonCommand);


    }



    //Sirve tanto para ir a aplicaciones como para ir a paginas web o lugares de la propia aplicacion
    private void ButtonCommand(object obj)
    {
        string itemName = obj as string;


        if (itemName == "facebook")
        {

            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    Launcher.TryOpenAsync("http://facebook.com/");
                    break;
                case Device.Android:
                    DependencyService.Get<IOpenApps>().openFacebook();
                    break;
            }


        }
        else if (itemName == "twitter")
        {
            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    Launcher.TryOpenAsync("http://twitter.com/");
                    break;
                case Device.Android:
                    DependencyService.Get<IOpenApps>().openTwitter();
                    break;
            }
        }
        else if (itemName == "insta")
        {
            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    Launcher.TryOpenAsync("http://instagram.com/");
                    break;
                case Device.Android:
                    DependencyService.Get<IOpenApps>().openInstagram();
                    break;
            }
        }
        else if (itemName == "web")
        {

            Launcher.TryOpenAsync("https://web.icam.es/");


        }
    }


    bool firstStart = true;
    bool nextClick = true;

    public void openFloatingButton()
    {

        if (firstStart)
        {
           

            FirstImage = "cross.png";
            FirstButtonColor = "#6F1B31";


            IsVisible = true;
            firstStart = false;

        }
        else
        {
            if (nextClick)
            {
              
                FirstImage = "dots.png";
                FirstButtonColor = "#B52D50";

                IsVisible = false;
                nextClick = false;
            }
            else
            {
                
                FirstImage = "cross.png";
                FirstButtonColor = "#6F1B31";

                IsVisible = true;
                nextClick = true;

            }



        }
    }

}

Answer 1

The screenshot you provided needs to do with your custom keyboard. It is impossible without creating your own keyboard, due to Android and iOS platform limitations.

We could create our own keyboard view including a few emojis as buttons and some control else. And add a TapGestureRecognizer to your image. When this Tapped event fires, it would show your custom keyboard view.

For the custom keyboard view, you could check the link below. Xamarin Android: Issues with Custom Keyboard Of Custom Renderer - Appears Underneath Controls, Keys Not Pressable, etc