diff --git a/wpf/TextInputLayout/Images/DatePicker_Img.png b/wpf/TextInputLayout/Images/DatePicker_Img.png new file mode 100644 index 0000000000..dc74af3397 Binary files /dev/null and b/wpf/TextInputLayout/Images/DatePicker_Img.png differ diff --git a/wpf/TextInputLayout/Images/SfDatePicker_Img.png b/wpf/TextInputLayout/Images/SfDatePicker_Img.png new file mode 100644 index 0000000000..33aeda2ec7 Binary files /dev/null and b/wpf/TextInputLayout/Images/SfDatePicker_Img.png differ diff --git a/wpf/TextInputLayout/Images/SfMaskedEdit_Img.png b/wpf/TextInputLayout/Images/SfMaskedEdit_Img.png new file mode 100644 index 0000000000..9d66b7144e Binary files /dev/null and b/wpf/TextInputLayout/Images/SfMaskedEdit_Img.png differ diff --git a/wpf/TextInputLayout/Images/SfTimePicker_Img.png b/wpf/TextInputLayout/Images/SfTimePicker_Img.png new file mode 100644 index 0000000000..45479557af Binary files /dev/null and b/wpf/TextInputLayout/Images/SfTimePicker_Img.png differ diff --git a/wpf/TextInputLayout/Images/UpDown_Img.png b/wpf/TextInputLayout/Images/UpDown_Img.png new file mode 100644 index 0000000000..0a56a7f309 Binary files /dev/null and b/wpf/TextInputLayout/Images/UpDown_Img.png differ diff --git a/wpf/TextInputLayout/Supported-Input-Views.md b/wpf/TextInputLayout/Supported-Input-Views.md index f68c9870a4..36593dee63 100644 --- a/wpf/TextInputLayout/Supported-Input-Views.md +++ b/wpf/TextInputLayout/Supported-Input-Views.md @@ -11,15 +11,25 @@ documentation: ug Input views can be added to the text input layout control by setting the [InputView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.SfTextInputLayout.html#Syncfusion_UI_Xaml_TextInputLayout_SfTextInputLayout_InputView) property. To reduce the XAML syntax, the [InputView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.SfTextInputLayout.html#Syncfusion_UI_Xaml_TextInputLayout_SfTextInputLayout_InputView) property is applied with the ContentPropertyAttribute. The [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html) has the following controls as the supported input views. -* TextBox +* [TextBox](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/textbox) -* PasswordBox +* [PasswordBox](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/passwordbox) -* ComboBox +* [ComboBox](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox) -* [`ComboBoxAdv`](https://help.syncfusion.com/wpf/combobox/overview) +* [ComboBoxAdv](https://help.syncfusion.com/wpf/combobox/overview) -* [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/overview) +* [SfTextBoxExt](https://help.syncfusion.com/wpf/autocomplete/overview) + +* [DatePicker](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/datepicker) + +* [SfDatePicker](https://help.syncfusion.com/wpf/datepicker/overview) + +* [SfTimePicker](https://help.syncfusion.com/wpf/timepicker/overview) + +* [UpDown](https://help.syncfusion.com/wpf/numericupdown/overview) + +* [SfMaskedEdit](https://help.syncfusion.com/wpf/maskedtextbox/overview) ## TextBox @@ -79,7 +89,7 @@ You can enter the password characters as an input by adding the [PasswordBox](ht ## ComboBox -You can use the [`ComboBox`](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox?view=netframeworkdesktop-4.8) control as an input in the [`SfTextInputLayout`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). +You can use the [ComboBox](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox?view=netframeworkdesktop-4.8) control as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). {% tabs %} @@ -111,7 +121,7 @@ You can use the [`ComboBox`](https://docs.microsoft.com/en-us/dotnet/desktop/wpf ## ComboBoxAdv -You can use the [`ComboBoxAdv`](https://help.syncfusion.com/wpf/combobox/overview) control as an input in the [`SfTextInputLayout`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). +You can use the [ComboBoxAdv](https://help.syncfusion.com/wpf/combobox/overview) control as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). {% tabs %} @@ -143,7 +153,7 @@ You can use the [`ComboBoxAdv`](https://help.syncfusion.com/wpf/combobox/overvie ## Autocomplete (SfTextBoxExt) -You can use the [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/overview) control to enter the text as an input in the [`SfTextInputLayout`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). +You can use the [SfTextBoxExt](https://help.syncfusion.com/wpf/autocomplete/overview) control to enter the text as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). {% tabs %} @@ -176,3 +186,173 @@ You can use the [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/ov {% endtabs %} ![Image for Autocomplete](Images/SfTextboxExt.PNG) + +## DatePicker + +You can use the standard WPF [DatePicker](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/datepicker) control to enter or select date values as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). + +{% tabs %} + +{% highlight xaml %} + + + + + +{% endhighlight %} + +{% highlight C# %} + + 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; + +{% endhighlight %} + +{% endtabs %} + +![Image for DatePicker](Images/DatePicker_Img.PNG) + +## SfDatePicker + +You can use the [SfDatePicker](https://help.syncfusion.com/wpf/datepicker/overview) control to enter or select date values as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). + +{% tabs %} + +{% highlight xaml %} + + + + + +{% endhighlight %} + +{% highlight C# %} + + 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; + +{% endhighlight %} + +{% endtabs %} + +![Image for SfDatePicker](Images/SfDatePicker_Img.PNG) + +## SfTimePicker + +You can use the [SfTimePicker](https://help.syncfusion.com/wpf/timepicker/overview) control to enter or select time values as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). + +{% tabs %} + +{% highlight xaml %} + + + + + +{% endhighlight %} + +{% highlight C# %} + + 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; + +{% endhighlight %} + +{% endtabs %} + +![Image for SfTimePicker](Images/SfTimePicker_Img.PNG) + +## UpDown + +You can use the [UpDown](https://help.syncfusion.com/wpf/numericupdown/overview) control to enter numeric values as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). + +{% tabs %} + +{% highlight xaml %} + + + + + +{% endhighlight %} + +{% highlight C# %} + + 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; + +{% endhighlight %} + +{% endtabs %} + +![Image for UpDown](Images/UpDown_Img.PNG) + +## SfMaskedEdit + +You can use the [MaskedTextBox](https://help.syncfusion.com/wpf/maskedtextbox/overview) (SfMaskedEdit) control to enter masked text as an input in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). + +{% tabs %} + +{% highlight xaml %} + + + + + +{% endhighlight %} + +{% highlight C# %} + + 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; + +{% endhighlight %} + +{% endtabs %} + +![Image for SfMaskedEdit](Images/SfMaskedEdit_Img.PNG) + +## Input Views Limitations + +The following are the limitations when using [DatePicker](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/datepicker), [SfDatePicker](https://help.syncfusion.com/wpf/datepicker/overview) and [SfTimePicker](https://help.syncfusion.com/wpf/timepicker/overview) 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/time value. + +2. When `CharCountVisibility` is enabled, the character count is always displayed as `0`, regardless of the selected date or time value.