MaterialEditor

Text fields let users enter and edit text.
View Material Design documentation

Screenshot

Example

<material3:MaterialEditor 
    LabelText="Description" 
    Placeholder="Enter your description" 
    LeadingIcon="email.png" 
    HeightRequest="200" />

Documentation

Property Keyboard

Default keyboard and base class for specialized keyboards, such as those for telephone numbers, email, URLs and others.

Allowed Values:

• Plain
• Chat
• Email
• Numeric
• Telephone
• Text
• URL
  

Property KeyboardFlags

Enumerates keyboard option flags that controls capitalization, spellcheck, suggestion behavior and others.

Allowed Values:

• CapitalizeSentence
• Spellcheck
• Suggestions
• CapitalizeWord
• CapitalizeCharacter
• CapitalizeNone
• All
• None

Usage Example

• Using only one flag

<material3:MaterialEditor
    LabelText="Name *"
    Placeholder="Enter your name"
    MaxLength="50"
    KeyboardFlags="CapitalizeWord"
    Text="{Binding Name}"
    SupportingText="Name is required"
    AnimateError="True"
    TabIndex="1"
    SupportingTextColor="Red" />

• Using multiple flags

<material3:MaterialEditor
    LabelText="Name *"
    Placeholder="Enter your name"
    MaxLength="50"
    KeyboardFlags="CapitalizeWord|Suggestions"
    Text="{Binding Name}"
    SupportingText="Name is required"
    AnimateError="True"
    TabIndex="1"
    SupportingTextColor="Red" />

Property Text:

This property is to set the current text.

Property MaxLength:

This property is to set the max length of the text.

Property TextChanged:

This property is to set the event after the text changed.

Property CornerRadius:

This property is to set the corner radius for the control. This is used only when you set HasBorder as true.

CornerRadius supports a uniform radius to the four corners or you can set a different corner radius for each corner:

• CornerRadius="10"
• CornerRadius="0,10,10,10"
  

Property AnimateError:

This property is to set the if you want or not animate the control on error.

Property HorizontalTextAlignment:

This property only set the horizontal text aligment of Label and supporting text.

Allowed Values:

• Start
• Center
• End
  

Property TextColor:

This property is to set the text color.

Property FocusedTextColor:

This property is to set the focused text color.

Property DisabledTextColor:

This property is to set the disabled text color.

Property FontSize:

This property is to set the font size.

Property FontFamily:

This property is to set the font family.

Property Placeholder:

This property is to set the placeholder.

Property PlaceholderColor:

This property is to set the placeholder color.

Property AnimatePlaceholder:

If you set this property to true the placeholder will be translated to label place. you mustn't set Label Text

Property LabelText:

This property is to set the label.

Property LabelTextColor:

This property is to set the label color.

Property FocusedLabelTextColor:

This property is to set the focused label color.

Property DisabledLabelTextColor:

This property is to set the disabled label color.

Property LabelSize:

This property is to set the label size.

Property LabelFontFamily:

This property is to set the label font family.

Property LabelMargin:

This property is to set the label margin family. By default uses (16,0,16,0).

Property SupportingText:

This property is to set the supporting text.

Property SupportingTextColor:

This property is to set the supporting text color.

Property SupportingSize:

This property is to set the supporting text size.

Property SupportingFontFamily:

This property is to set the supporting text font family.

Property SupportingMargin:

This property is to set the supporting text margin. By default uses (16,4,16,0).

Property BorderColor:

This property is to set the border color. This is enabled when you set the property HasBorder equals true.

Property FocusedBorderColor:

This property is to set the focused border color. This is enabled when you set the property HasBorder equals true.

Property DisabledBorderColor:

This property is to set the border color. This is enabled when you set the property HasBorder equals true.

Property HasBorder:

This property is to set if this control has border or not.

Property BorderWidth:

This property is to set the border width.

Property IndicatorColor:

This property is to set the indicator color.

Property CursorColor:

This property is to set the cursor color. Only supported on iOS

Property BackgroundColor:

This property is to set the background color.

Property LeadingIcon:

This property is to set the leading icon. This can be png or jpg.

Property CustomLeadingIcon:

This property is to set the leading icon with support to svg.

Property LeadingIconCommand:

This property is to set the leading icon command.

Property LeadingIconCommandParameter:

This property is to set the leading icon command parameter.

Property TrailingIcon:

This property is to set the trailing icon. This can be png or jpg.

Property CustomTrailingIcon:

This property is to set the trailing icon with support to svg.

Property TrailingIconCommand:

This property is to set the trailing icon command.

Property TrailingIconCommandParameter:

This property is to set the trailing icon command parameter.

Property LabelLineBreakMode:

This property is to set the Label Line Break Mode

Allowed values

• NoWrap,
• WordWrap,
• CharacterWrap,
• HeadTruncation,
• TailTruncation,
• MiddleTruncation
  

Property SupportingLineBreakMode:

This property is to set the Supporting LineBreakMode.

Allowed values

• NoWrap,
• WordWrap,
• CharacterWrap,
• HeadTruncation,
• TailTruncation,
• MiddleTruncation
  

Property AutoSize:

This property is to set autosize editor.

Allowed values

• Disabled,
• TextChanges,
  

Property Padding:

This property is to set the padding of the control. By default uses (16, 8).