Skip to content

Latest commit

 

History

History
327 lines (275 loc) · 6.63 KB

MaterialEditorControl.md

File metadata and controls

327 lines (275 loc) · 6.63 KB

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).