Supported Input Views in WPF TextInputLayout (SfTextInputLayout)

18 Nov 201822 minutes to read

Input views can be added to the text input layout control by setting the InputView property. To reduce the XAML syntax, the InputView property is marked with the ContentPropertyAttribute, so the input control can be declared directly as the child element. The SfTextInputLayout has the following controls as the supported input views.

TextBox

You can enter the text as an input by adding the TextBox in the SfTextInputLayout.

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

Image for TextBox

PasswordBox

You can enter the password characters as an input by adding the PasswordBox in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Password" HelperText="Enter your password">
            <PasswordBox/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout inputLayout = new SfTextInputLayout();
         inputLayout.Hint = "Password";
         inputLayout.HelperText = "Enter your password";
         inputLayout.InputView = new PasswordBox();
         this.Content = inputLayout;

Image for PasswordBox

ComboBox

You can use the ComboBox control as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Name" VerticalAlignment="Center" HorizontalAlignment="Center">
            <ComboBox x:Name="comboBox" Width="150" Height="10"  ItemsSource="{Binding Countries}"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Name" };
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            ComboBox comboBox = new ComboBox();
            comboBox.Width = 150;
            comboBox.Height = 10;
            comboBox.ItemsSource = viewModel.Countries;
            sfTextInputLayout.InputView = comboBox;
            this.Content = sfTextInputLayout;

Image for ComboBox

ComboBoxAdv

You can use the ComboBoxAdv control as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Name" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:ComboBoxAdv x:Name="comboBox" ItemsSource="{Binding Countries}" Width="150" Height="10"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Name" };
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            ComboBoxAdv comboBox = new ComboBoxAdv();
            comboBox.Width = 150;
            comboBox.Height = 10;
            comboBox.ItemsSource = viewModel.Countries;
            sfTextInputLayout.InputView = comboBox;
            this.Content = sfTextInputLayout;

Image for ComboBoxAdv

Autocomplete (SfTextBoxExt)

You can use the SfTextBoxExt control to enter the text as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Name" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:SfTextBoxExt AutoCompleteMode="Suggest" Width="250" 
                                      AutoCompleteSource="{Binding Countries}">

            </inputLayout:SfTextBoxExt>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Name" };
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;

            SfTextBoxExt sfTextBoxExt = new SfTextBoxExt();
            sfTextBoxExt.AutoCompleteMode = AutoCompleteMode.Suggest;
            sfTextBoxExt.Width = 250;
            sfTextBoxExt.AutoCompleteSource = viewModel.Countries;
            sfTextInputLayout.InputView = sfTextBoxExt;
            this.Content = sfTextInputLayout;

Image for Autocomplete

DatePicker

You can use the standard WPF DatePicker control to enter or select date values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Date" HelperText="Select your date of birth" VerticalAlignment="Center" HorizontalAlignment="Center">
            <DatePicker x:Name="datePicker" Width="150"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Date" };
            sfTextInputLayout.HelperText = "Select your date of birth";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            DatePicker datePicker = new DatePicker();
            datePicker.Width = 150;
            sfTextInputLayout.InputView = datePicker;
            this.Content = sfTextInputLayout;

Image for DatePicker

SfDatePicker

You can use the SfDatePicker control to enter or select date values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Date" HelperText="Select your date of birth" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:SfDatePicker Width="150"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Date" };
            sfTextInputLayout.HelperText = "Select your date of birth";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            SfDatePicker sfDatePicker = new SfDatePicker();
            sfDatePicker.Width = 150;
            sfTextInputLayout.InputView = sfDatePicker;
            this.Content = sfTextInputLayout;

Image for SfDatePicker

SfTimePicker

You can use the SfTimePicker control to enter or select time values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Time" HelperText="Select appointment time" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:SfTimePicker Width="150"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Time" };
            sfTextInputLayout.HelperText = "Select appointment time";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            SfTimePicker sfTimePicker = new SfTimePicker();
            sfTimePicker.Width = 150;
            sfTextInputLayout.InputView = sfTimePicker;
            this.Content = sfTextInputLayout;

Image for SfTimePicker

UpDown

You can use the UpDown control to enter numeric values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Quantity" HelperText="Enter quantity" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:UpDown Width="150" Height="25" MinValue="0" MaxValue="100" Value="1"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Quantity" };
            sfTextInputLayout.HelperText = "Enter quantity";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            UpDown upDown = new UpDown();
            upDown.Width = 150;
            upDown.Height = 25;
            upDown.MinValue = 0;
            upDown.MaxValue = 100;
            upDown.Value = 1;
            sfTextInputLayout.InputView = upDown;
            this.Content = sfTextInputLayout;

Image for UpDown

SfMaskedEdit

You can use the MaskedTextBox (SfMaskedEdit) control to enter masked text as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Phone Number" HelperText="Enter your phone number" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:SfMaskedEdit x:Name="sfMaskedEdit" Width="150" Height="25" MaskType="Simple" Mask="(###) ###-####"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Phone Number" };
            sfTextInputLayout.HelperText = "Enter your phone number";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            SfMaskedEdit sfMaskedEdit = new SfMaskedEdit();
            sfMaskedEdit.Width = 150;
            sfMaskedEdit.Height = 25;
            sfMaskedEdit.MaskType = MaskType.Simple;
            sfMaskedEdit.Mask = "(###) ###-####";
            sfTextInputLayout.InputView = sfMaskedEdit;
            this.Content = sfTextInputLayout;

Image for SfMaskedEdit

IntegerTextBox

You can use the IntegerTextBox control to enter integer values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Age" HelperText="Enter your age" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:IntegerTextBox x:Name="integerTextBox" Width="150" Height="25" MinValue="0" MaxValue="120" Value="25"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Age" };
            sfTextInputLayout.HelperText = "Enter your age";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            IntegerTextBox integerTextBox = new IntegerTextBox();
            integerTextBox.Width = 150;
            integerTextBox.Height = 25;
            integerTextBox.MinValue = 0;
            integerTextBox.MaxValue = 120;
            integerTextBox.Value = 25;
            sfTextInputLayout.InputView = integerTextBox;
            this.Content = sfTextInputLayout;

Image for IntegerTextBox

DoubleTextBox

You can use the DoubleTextBox control to enter double values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Price" HelperText="Enter the price" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:DoubleTextBox x:Name="doubleTextBox" Width="150" Height="25" MinValue="0" MaxValue="10000" Value="99.99"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Price" };
            sfTextInputLayout.HelperText = "Enter the price";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            DoubleTextBox doubleTextBox = new DoubleTextBox();
            doubleTextBox.Width = 150;
            doubleTextBox.Height = 25;
            doubleTextBox.MinValue = 0;
            doubleTextBox.MaxValue = 10000;
            doubleTextBox.Value = 99.99;
            sfTextInputLayout.InputView = doubleTextBox;
            this.Content = sfTextInputLayout;

Image for DoubleTextBox

PercentTextBox

You can use the PercentTextBox control to enter percentage values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Discount" HelperText="Enter the discount percentage" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:PercentTextBox x:Name="percentTextBox" Width="150" Height="25" MinValue="0" MaxValue="100" PercentValue="10"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Discount" };
            sfTextInputLayout.HelperText = "Enter the discount percentage";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            PercentTextBox percentTextBox = new PercentTextBox();
            percentTextBox.Width = 150;
            percentTextBox.Height = 25;
            percentTextBox.MinValue = 0;
            percentTextBox.MaxValue = 100;
            percentTextBox.PercentValue = 10;
            sfTextInputLayout.InputView = percentTextBox;
            this.Content = sfTextInputLayout;

Image for PercentTextBox

CurrencyTextBox

You can use the CurrencyTextBox control to enter currency values as an input in the SfTextInputLayout.

<inputLayout:SfTextInputLayout Hint="Amount" HelperText="Enter the amount" VerticalAlignment="Center" HorizontalAlignment="Center">
            <inputLayout:CurrencyTextBox x:Name="currencyTextBox" Width="150" Height="25" MinValue="0" MaxValue="100000" Value="1000"/>
        </inputLayout:SfTextInputLayout>
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() { Hint = "Amount" };
            sfTextInputLayout.HelperText = "Enter the amount";
            sfTextInputLayout.HorizontalAlignment = HorizontalAlignment.Center;
            sfTextInputLayout.VerticalAlignment = VerticalAlignment.Center;
            CurrencyTextBox currencyTextBox = new CurrencyTextBox();
            currencyTextBox.Width = 150;
            currencyTextBox.Height = 25;
            currencyTextBox.MinValue = 0;
            currencyTextBox.MaxValue = 100000;
            currencyTextBox.Value = 1000;
            sfTextInputLayout.InputView = currencyTextBox;
            this.Content = sfTextInputLayout;

Image for CurrencyTextBox

Limitations

The following are the limitations when using DatePicker, SfDatePicker and SfTimePicker as the InputView of SfTextInputLayout.

  1. The hint is always displayed in the AlwaysFloat state and does not move to the inline position based on the control’s focus state or the presence of a selected date or time value.

  2. When CharCountVisibility is enabled, the character count is always displayed as 0, regardless of the selected date or time value.