Xamarin.forms 材料条目占位符大小

Question

In my xamarin.forms App I am using material entry provided by xamarin.The control works fine. But how can I change the fontsize of placeholder?In ios the font size of placeholder is perfect, but in android it is much larger. And also the underline of the entry is little more in the left side.How to reduce the gap and align placeholder and underline equally(Refer Image)

What I Have done

What I am trying to achieve

My entry

<Entry x:Name="CustomerEntry" Visual="Material"  FontSize="Small" Placeholder="Customer Name"  HorizontalOptions="FillAndExpand" BackgroundColor="Transparent"  TextColor="White" PlaceholderColor="White" Margin="0,0,0,0"  ></Entry>

Any help is appreciated

Answer 1

对于字体大小，我相信您需要自定义渲染。有关如何执行此操作的详细信息，请参阅此答案。确保继承自Material Render。

为了解决左对齐问题，我找不到一个同时适用于 Android 和 iOS 的好解决方案，所以我所做的就是吸掉条目的左边距，然后使用框视图覆盖下划线，这样一切看起来都可以左对齐。我在多个地方这样做了，所以我创建了一个自定义控件。这样做的缺点是传递所有绑定。

我的自定义控件 Xaml：

<?xml version="1.0" encoding="UTF-8" ?>
<Grid x:Class="x.x.x.Controls.MaterialControls.MaterialEntry"
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      x:Name="MaterialEntryComponent"
      Margin="-16,0,0,0"
      Focused="OnComponentFocused">
    <Entry x:Name="MaterialEntryEntry"
           Grid.Row="0"
           BackgroundColor="{Binding EntryBackgroundColor}"
           BindingContext="{x:Reference MaterialEntryComponent}"
           Completed="OnEntryCompleted"
           FontFamily="{Binding FontFamily}"
           FontSize="{Binding FontSize}"
           IsPassword="{Binding IsPassword}"
           IsSpellCheckEnabled="{Binding IsSpellCheckEnabled}"
           IsTextPredictionEnabled="{Binding IsTextPredictionEnabled}"
           Keyboard="{Binding Keyboard}"
           MaxLength="{Binding MaxLength}"
           Placeholder="{Binding Placeholder}"
           PlaceholderColor="{Binding PlaceholderColor}"
           ReturnType="{Binding ReturnType}"
           Text="{Binding Text}"
           TextChanged="OnEntryTextChanged"
           TextColor="{Binding TextColor}"
           Visual="Material" />
    <BoxView Grid.Row="0"
             Margin="{OnPlatform iOS='0,0,0,-1'}"
             BackgroundColor="{Binding EntryBackgroundColor}"
             BindingContext="{x:Reference MaterialEntryComponent}"
             HorizontalOptions="Start"
             VerticalOptions="FillAndExpand"
             WidthRequest="16" />

</Grid>

大部分工作是通过父网格上的负左边距和 BoxView 上的 16 宽度来完成的。我确实发现我需要在 iOS 上将 BoxView 的边距向下移动 1 以覆盖下划线。

以及背后的代码：

using System;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace x.x.x.Controls.MaterialControls
{
    /// <summary>
    /// Code behind for the Material Entry control.
    /// </summary>
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MaterialEntry : Grid
    {
        #region Event Handlers
        /// <summary>
        /// Completed event. Fires when the return key on the keyboard is pressed.
        /// </summary>
        public event EventHandler Completed;

        /// <summary>
        /// Text changed event. Fires when the text on the entry control is changed.
        /// </summary>
        public event EventHandler<TextChangedEventArgs> TextChanged;
        #endregion

        #region Bindable Properties
        /// <summary>
        /// Bindable property for the entry background color on the view.
        /// </summary>
        public static readonly BindableProperty EntryBackgroundColorProperty =
            BindableProperty.Create(nameof(EntryBackgroundColor), typeof(Color), typeof(MaterialEntry), Color.White);

        /// <summary>
        /// Bindable property for the font family of the entry on the view..
        /// </summary>
        public static readonly BindableProperty FontFamilyProperty =
            BindableProperty.Create(nameof(FontFamily), typeof(string), typeof(MaterialEntry), default(string));

        /// <summary>
        /// Bindable property for the font size of the entry on the view..
        /// </summary>
        public static readonly BindableProperty FontSizeProperty =
            BindableProperty.Create(nameof(FontSize), typeof(double), typeof(MaterialEntry), 12.0);

        /// <summary>
        /// Bindable property for the IsPassword of the entry on the view.
        /// </summary>
        public static readonly BindableProperty IsPasswordProperty =
            BindableProperty.Create(nameof(IsPassword), typeof(bool), typeof(MaterialEntry), false);

        /// <summary>
        /// Bindable property for the IsSpellCheckEnabled of the entry on the view.
        /// </summary>
        public static readonly BindableProperty IsSpellCheckEnabledProperty =
            BindableProperty.Create(nameof(IsSpellCheckEnabled), typeof(bool), typeof(MaterialEntry), true);

        /// <summary>
        /// Bindable property for the IsTextPredictionEnabled of the entry on the view.
        /// </summary>
        public static readonly BindableProperty IsTextPredictionEnabledProperty =
            BindableProperty.Create(nameof(IsTextPredictionEnabled), typeof(bool), typeof(MaterialEntry), true);

        /// <summary>
        /// Bindable property for the keyboard type of the entry on the view.
        /// </summary>
        public static readonly BindableProperty KeyboardProperty =
            BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(MaterialEntry), Keyboard.Default);

        /// <summary>
        /// Bindable property for the MaxLength of the entry on the view..
        /// </summary>
        public static readonly BindableProperty MaxLengthProperty =
            BindableProperty.Create(nameof(MaxLength), typeof(int), typeof(MaterialEntry), int.MaxValue);

        /// <summary>
        /// Bindable property for the placeholder text of the entry on the view.
        /// </summary>
        public static readonly BindableProperty PlaceholderProperty =
            BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(MaterialEntry), default(string));

        /// <summary>
        /// Bindable property for the placeholder text color of the entry on the view.
        /// </summary>
        public static readonly BindableProperty PlaceholderColorProperty =
            BindableProperty.Create(nameof(PlaceholderColor), typeof(Color), typeof(MaterialEntry), Color.Black);

        /// <summary>
        /// Bindable property for the return command of the entry on the view.
        /// </summary>
        public static readonly BindableProperty ReturnCommandProperty =
            BindableProperty.Create(nameof(ReturnCommand), typeof(ICommand), typeof(Entry), default(ICommand));

        /// <summary>
        /// Bindable property for the return command parameter of the entry on the view.
        /// </summary>
        public static readonly BindableProperty ReturnCommandParameterProperty =
            BindableProperty.Create(nameof(ReturnCommandParameter), typeof(object), typeof(Entry), default(object));

        /// <summary>
        /// Bindable property for the return type of the entry on the view.
        /// </summary>
        public static readonly BindableProperty ReturnTypeProperty =
            BindableProperty.Create(nameof(ReturnType), typeof(ReturnType), typeof(Entry), ReturnType.Default);

        /// <summary>
        /// Bindable property for the text of the entry on the view.
        /// </summary>
        public static readonly BindableProperty TextProperty =
            BindableProperty.Create(nameof(Text), typeof(string), typeof(MaterialEntry), default(string), BindingMode.TwoWay);

        /// <summary>
        /// Bindable property for the text color of the entry on the view.
        /// </summary>
        public static readonly BindableProperty TextColorProperty =
            BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(MaterialEntry), Color.Black);
        #endregion

        #region Properties
        /// <summary>
        /// The background color of the entry control. Default is <see cref="Color.White"/>.
        /// </summary>
        public Color EntryBackgroundColor
        {
            get => (Color)GetValue(EntryBackgroundColorProperty);
            set => SetValue(EntryBackgroundColorProperty, value);
        }

        /// <summary>
        /// The font family for the entry control to use.
        /// </summary>
        public string FontFamily
        {
            get => (string)GetValue(FontFamilyProperty);
            set => SetValue(FontFamilyProperty, value);
        }

        /// <summary>
        /// The font size of the entry control. Default is 12.0.
        /// </summary>
        [TypeConverter(typeof(FontSizeConverter))]
        public double FontSize
        {
            get => (double)GetValue(FontSizeProperty);
            set => SetValue(FontSizeProperty, value);
        }

        /// <summary>
        /// Set if the entry field is a password field. Default is false.
        /// </summary>
        public bool IsPassword
        {
            get => (bool)GetValue(IsPasswordProperty);
            set => SetValue(IsPasswordProperty, value);
        }

        /// <summary>
        /// Set if spell check is enabled on the entry. Default is True.
        /// </summary>
        public bool IsSpellCheckEnabled
        {
            get => (bool)GetValue(IsSpellCheckEnabledProperty);
            set => SetValue(IsSpellCheckEnabledProperty, value);
        }

        /// <summary>
        /// Set if text prediction is enabled on the entry. Default is True.
        /// </summary>
        public bool IsTextPredictionEnabled
        {
            get => (bool)GetValue(IsTextPredictionEnabledProperty);
            set => SetValue(IsTextPredictionEnabledProperty, value);
        }

        /// <summary>
        /// The type of keyboard to use for the entry control. Default is <see cref="Keyboard.Default"/>.
        /// </summary>
        public Keyboard Keyboard
        {
            get => (Keyboard)GetValue(KeyboardProperty);
            set => SetValue(KeyboardProperty, value);
        }

        /// <summary>
        /// The maximum allowed length of input for the entry. Default is <see cref="int.MaxValue"/>.
        /// </summary>
        public int MaxLength
        {
            get => (int)GetValue(MaxLengthProperty);
            set => SetValue(MaxLengthProperty, value);
        }

        /// <summary>
        /// The text to use for the placeholder.
        /// </summary>
        public string Placeholder
        {
            get => (string)GetValue(PlaceholderProperty);
            set => SetValue(PlaceholderProperty, value);
        }

        /// <summary>
        /// The color of the placeholder text. Default is <see cref="Color.Black"/>.
        /// </summary>
        public Color PlaceholderColor
        {
            get => (Color)GetValue(PlaceholderColorProperty);
            set => SetValue(PlaceholderColorProperty, value);
        }

        /// <summary>
        ///  The command that fires when the return button on the keyboard is tapped.
        /// </summary>
        public ICommand ReturnCommand
        {
            get => (ICommand)GetValue(ReturnCommandProperty);
            set => SetValue(ReturnCommandProperty, value);
        }

        /// <summary>
        /// The parameter to pass with the return command.
        /// </summary>
        public object ReturnCommandParameter
        {
            get => GetValue(ReturnCommandParameterProperty);
            set => SetValue(ReturnCommandParameterProperty, value);
        }

        /// <summary>
        /// The type of return button to display on the keyboard. Default is <see cref="ReturnType.Default"/>.
        /// </summary>
        public ReturnType ReturnType
        {
            get => (ReturnType)GetValue(ReturnTypeProperty);
            set => SetValue(ReturnTypeProperty, value);
        }

        /// <summary>
        /// The text of the entry.
        /// </summary>
        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        /// <summary>
        /// The color of the text. Default is <see cref="Color.Black"/>.
        /// </summary>
        public Color TextColor
        {
            get => (Color)GetValue(TextColorProperty);
            set => SetValue(TextColorProperty, value);
        }
        #endregion

        /// <summary>
        /// Constructor.
        /// </summary>
        public MaterialEntry()
        {
            InitializeComponent();
        }

        #region Methods
        /// <summary>
        /// Focuses the entry control.
        /// </summary>
        public void FocusEntry()
        {
            MaterialEntryEntry.Focus();
        }

        private void OnEntryCompleted(object sender, EventArgs e)
        {
            SendCompleted();
        }

        private void OnEntryTextChanged(object sender, TextChangedEventArgs e)
        {
            TextChanged?.Invoke(this, e);
        }

        private void SendCompleted()
        {
            if (IsEnabled)
            {
                Completed?.Invoke(this, EventArgs.Empty);

                if (ReturnCommand != null && ReturnCommand.CanExecute(ReturnCommandParameter))
                {
                    ReturnCommand.Execute(ReturnCommandParameter);
                }
            }
        }

        private void OnComponentFocused(object sender, FocusEventArgs e)
        {
            FocusEntry();
        }
        #endregion
    }
}

要使用该控件，请记住将其名称空间导入到您的视图中：

xmlns:material="clr-namespace:x.x.x.Controls.MaterialControls"。

然后使用它会是这样的：

<material:MaterialEntry Placeholder="Do something amazing"
                        Style="{StaticResource EntryStyle}"
                        Text="{Binding MyEntryText}" />