Supported Input Views in Xamarin Text Input Layout (SfTextInputLayout)

7 Aug 20239 minutes to read

Input views can be added to the text input layout control by setting the InputView property. To reduce the XAML syntax, InputView property is applied with ContentPropertyAttribute.

Entry

To enter a single line text input, add Entry.

<inputLayout:SfTextInputLayout
   Hint="Name"
   HelperText="Enter your name">
   <Entry />
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name"; 
inputLayout.HelperText = "Enter your name"
inputLayout.InputView = new Entry();

Entry

Editor

To enter multi-line text input, add Editor, and then set the AutoSize property to TextChanges.

<inputLayout:SfTextInputLayout
   Hint="Notes">
   <Editor AutoSize="TextChanges" />
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Notes"; 
inputLayout.InputView = new Editor();

Editor

Masked edit

To initialize the masked edit control and launch it in each platform, refer to the getting started with masked edit documentation.

<inputLayout:SfTextInputLayout
   Hint="Card number"
   HelperText="Required *">
   <maskededit:SfMaskedEdit
        Keyboard="Numeric"
        Mask="0000 0000 0000 0000" />
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Card number"; 
inputLayout.HelperText = "Required *"
inputLayout.InputView = new SfMaskedEdit() { Keyboard = Keyboard.Numeric, Mask = "0000 0000 0000 0000" };

Masked edit

Numeric text box

To initialize the numeric text box control and launch it in each platform, refer to the getting started with numeric text box documentation.

<inputLayout:SfTextInputLayout
   Hint="Amount"
   HelperText="Required *">
   <numericBox:SfNumericTextBox 
      Value="123.45"
      FormatString="c" />
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Amount"; 
inputLayout.HelperText = "Required *"
inputLayout.InputView = new SfNumericTextBox() { Value = 123.45, FormatString="c" };

Numerictextbox

Numeric up down

To initialize the numeric up down control and launch it in each platform, refer to the getting started with numeric up down documentation.

<inputLayout:SfTextInputLayout
   Hint="Amount"
   HelperText="Maximum limit is $10,000.">
   <numeric:SfNumericUpDown 
   x:Name="numericUpDown" 
   Value="5"/>
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Amount"; 
inputLayout.HelperText = "Maximum limit is $10,000."
inputLayout.InputView = new SfNumericUpDown() { Value = 5};

Autocomplete

To initialize the Autocomplete control and launch it in each platform, refer to the getting started with auto complete documentation.

<inputLayout:SfTextInputLayout Hint="Country" ContainerType="Outlined">
   <autocomplete:SfAutoComplete  AutoCompleteMode="SuggestAppend">
      <autocomplete:SfAutoComplete.AutoCompleteSource>
         <ListCollection:List x:TypeArguments="x:String">
         	<x:String> United Kingdom </x:String>
            <x:String> United States </x:String>
            <x:String> United Republic of Tanzania </x:String>
         </ListCollection:List>
      </autocomplete:SfAutoComplete.AutoCompleteSource>
   </autocomplete:SfAutoComplete>
</inputLayout:SfTextInputLayout>
var autoComplete = new SfAutoComplete();
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Country"; 
inputLayout.ContainerType = ContainerType.Outlined;
List<String> countryNames = new List<String>();
countryNames.Add("United Kingdom");
countryNames.Add("United States");
countryNames.Add("United Republic of Tanzania");
autoComplete.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
autoComplete.DataSource = countryNames;
inputLayout.InputView = autoComplete;

Autocomplete

Combo box

To initialize the ComboBox control and launch it in each platform, refer to the getting started with combo box documentation.

<inputLayout:SfTextInputLayout Hint="Country" ContainerType="Outlined">
   <combobox:SfComboBox>
      <combobox:SfComboBox.ComboBoxSource>
         <ListCollection:List x:TypeArguments="x:String">
         	<x:String> Afghanistan </x:String>
            <x:String> Akrotiri </x:String>
            <x:String> Albania </x:String>
         </ListCollection:List>
      </combobox:SfComboBox.ComboBoxSource>
   </combobox:SfComboBox>
</inputLayout:SfTextInputLayout>
var combobox = new SfComboBox();
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Country"; 
inputLayout.ContainerType = ContainerType.Outlined;
List<String> countryNames = new List<String>();
countryNames.Add("Afghanistan");
countryNames.Add("Akrotiri");
countryNames.Add("Albania");
combobox.DataSource = countryNames;
inputLayout.InputView = combobox;

Combobox

NOTE

Entry and Editor are the only input views supported by SfTextInputLayout in WPF platform.

Picker

To pick an item from the list, add Picker.

<inputLayout:SfTextInputLayout Hint="Picker"
                               HelperText="Select a color">
<Picker>
  <Picker.ItemsSource>
     <x:Array Type="{x:Type x:String}">
     <x:String>Red</x:String>
     <x:String>Blue</x:String>
     <x:String>Green</x:String>
     <x:String>Purple</x:String>
     <x:String>Yellow</x:String>
     </x:Array>
   </Picker.ItemsSource>
</Picker>
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Picker"; 
inputLayout.HelperText = "Select a color";
var picker = new Picker();
List<string> colors = new List<string>();
colors.Add("Red");
colors.Add("Blue");
colors.Add("Green");
colors.Add("Purple");
colors.Add("Yellow");
picker.ItemsSource = colors;
inputLayout.InputView = picker;

NOTE

UWP and WPF will not support Xamarin.Forms Picker as input view of the text input layout.

Date picker

To select a date, add DatePicker.

<inputLayout:SfTextInputLayout ContainerType="None"
                               Hint="Date" 
                               HelperText="Select a date">
<DatePicker MinimumDate="01/01/2019"
            MaximumDate="12/31/2019" 
            Date="11/12/2019"/>
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
var datePicker = new DatePicker();
inputLayout.Hint = "Date";
inputLayout.HelperText = "Select a date from a calender";
datePicker.MinimumDate = new DateTime(2019, 1, 1);
datePicker.MaximumDate = new DateTime(2019, 12, 31);
datePicker.Date = new DateTime(2019, 11, 12);
inputLayout.InputView = datePicker;

NOTE

UWP and WPF will not support Xamarin.Forms DatePicker as input view of the text input layout.

Time picker

To select a time, add TimePicker.

<inputLayout:SfTextInputLayout Hint="Time"
                               HelperText="Select a time">
<TimePicker Time="12:00:00"/>
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout();
var timePicker = new TimePicker();
inputLayout.Hint = "Time";
inputLayout.HelperText = "Select a time";
timePicker.Time = new TimeSpan(12, 00, 00) 
inputLayout.InputView = timePicker;

NOTE

UWP and WPF will not support Xamarin.Forms TimePicker as input view of the text input layout.