VerticalAlignment="Stretch" not working for SfTextInputLayout

Question

Dear Syncfusion support team,I am trying to create a SfTextInputLayout in WPF that is used to enter a larger comment. I want the control to maximize its height to the available height of the grid.row in which it is located dynamically.The control does stretch to the width of the grid cell, but not to the height. Is there a way that I can achieve this?Kind regards,Niels van StrienI created a grid:

Sridevi Sivakumar · Accepted Answer

Hi NM van Strien,

Sorry for the inconvenience caused.

We have checked the reported problem and resolved that problem in
our new sample. We have prepared a sample with the latest NuGet(18.4.0.44).
Please have a sample form below the link.

https://www.syncfusion.com/downloads/support/forum/162580/ze/SfTextInput_Sample-408826358

Let us know if you need any further assistance.

Regards,
Sridevi S.

Sridevi Sivakumar · Answer

Hi NM van Strien,Greetings from Syncfusion.We have analyzed your requirement and we would like to inform you that our SfTextInputLayout stretch with input views size. So, you can achieve your requirement by setting MaxHeight for SfTextBoxExt as per the below code snippet.  





<syncfusion:SfTextBoxExt x:Name="policy" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AcceptsReturn="True" AcceptsTab="True" VerticalScrollBarVisibility="Auto" MaxHeight="30"/> Please check this solution with your application and let us know if you have any other queries.Regards,Sridevi S.

NM van Strien · Answer

Hi NM van Strien,Greetings from Syncfusion.We have analyzed your requirement and we would like to inform you that our SfTextInputLayout stretch with input views size. So, you can achieve your requirement by setting MaxHeight for SfTextBoxExt as per the below code snippet. Please check this solution with your application and let us know if you have any other queries.Regards,Sridevi S. Dear Sridevi Sivakumar,Thank you for your reply. I am afraid that I am not yet seeing the intended behavior. Perhaps I did not make clear enough what I am trying to achieve. You can try it yourself in the demo code of Essential Studio 18.4.0.39:1) WPF-> Run Local Demos -> .Net Core2) Select Text Input Layout3) Open source in Visual Studio4) In project syncfusion.layoutdemos.wpf_lib_50 you will find the demo for TextInputLayout5) Open TextInputLayoutGettingStartedView.xaml in the editor6) Take a look at the notes SfTextInputLayout control (around line 257)7) How do I make this control use the entire height of the Grid Cell (Grid.Row 4) dynamically (so not by setting a fixed height, minheight or maxheight). Normally a control will take the height of the row in which it is located by setting VerticalAlignment="Stretch".8) For example, when you add a SfTextBoxExt to the grid in this demo, it does stretch to the height of the grid.rowe.g. What I am asking is if I can make the SfTextInputLayout behave in the same way as the SfTextBoxExt by setting VerticalAlignment="Stretch" in SfTextInputLayout? I want the initial height of the SfTextInputLayout (and its nested SfTextBoxExt control) to use the maximum available height of the grid row, which is only determined at runtime. Why does that not work? Is this supposed to happen (by design) or is it a bug? I hope this example helps better explain what I am trying to achieve. To make it even more clear, you could change the Grid.RowDefinitions as below (around line 116): Thanks in advance.Niels

Sridevi Sivakumar · Answer

Hi NM van Strien,Thanks for your detailed update. We have analyzed your requirement and we would like to inform you that our SfTextInputLayout’s template root element is StackPanel. So, the child (InputView) will be arranged in the desired size alone, even if we set VerticalAlignment as Stretch.So, we have achieved your requirement by extending SfTextInputLayout control and then set available space to the InputView (SfTextBoxExt) as per the below code snippet.Code snippet: public class SfTextInputLayoutExt : SfTextInputLayout { StackPanel stackPanel; Grid grid; TextBlock hint; public override void OnApplyTemplate() { base.OnApplyTemplate(); hint = GetTemplateChild("PART_HintTextBlock") as TextBlock; grid = GetTemplateChild("PART_BottomGrid") as Grid; stackPanel = VisualTreeHelper.GetChild(this, 0) as StackPanel; stackPanel.SizeChanged += StackPanel_SizeChanged; } private void StackPanel_SizeChanged(object sender, SizeChangedEventArgs e) { double top = InputViewPadding.Top < 0 ? ContainerType == ContainerType.Outlined ? 14 : HintVisibility == Visibility.Visible && HintFloatMode != HintFloatMode.None ? ContainerType == ContainerType.Filled ? 20 : 26 : 14 : InputViewPadding.Top; double bottom = InputViewPadding.Bottom < 0 ? this.ContainerType == ContainerType.Filled ? 8 : this.ContainerType == ContainerType.Outlined ? 14 : 2 : InputViewPadding.Bottom; Margin = new Thickness(0, hint.ActualHeight / 2, 0, 0); InputView.Height = stackPanel.ActualHeight - top - bottom - grid.ActualHeight - (FocusedStrokeThickness * 2) - hint.ActualHeight / 2; stackPanel.SizeChanged -= StackPanel_SizeChanged; } } Please find the output image below. We have prepared a simple sample for this solution and attached in below link, please find it.Sample: https://www.syncfusion.com/downloads/support/forum/162580/ze/SfTextInputSample422916185 Please let us know if you have any other queries.Regards,Sridevi S.

NM van Strien · Answer

Thank you so much for the code example. I am having trouble with compiling the demo. I keep getting this error related to Syncfusion.SfShared.Wpf (see error at bottom of message). I reinstalled all SF packages through nuget, but had to manually install Syncfusion.SfShared.Wpf, because I could not find it on nuget from within Visual Studio 2019.

I did create the SfTextInputLayoutExt class in my own project. I am able to use the new control. However, the SfTextInputLayoutExt occupies half of the height of the grid cell (see screen shot at design time).

I was thinking that taking away the /2 would do the trick:

stackPanel.ActualHeight - top - bottom - grid.ActualHeight - (FocusedStrokeThickness * 2) - hint.ActualHeight / 2;

unfortunately this was not the case.

Also, the skin that is set globally for the control does not fully load it seems. When placing the cursor in the SfTextBoxExt, the outline of the SfTextInputLayoutExt becomes blue, whereas in the original SfTextInputLayout it becomes light gray.

Finally, you disable the event handler stackPanel.SizeChanged -= StackPanel_SizeChanged;

But what happens when the application is resized? Can it still properly resize the SfTextBoxExt?

Any help is much appreciated.

Kind regards,

Niels

System.Windows.Markup.XamlParseException
HResult=0x80131501
Message=Could not load file or assembly 'Syncfusion.SfShared.Wpf, Version=18.4460.1.1, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)
Source=PresentationFramework
StackTrace:
   at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri)
   at System.Windows.Markup.WpfXamlLoader.LoadBaml(XamlReader xamlReader, Boolean skipJournaledProperties, Object rootObject, XamlAccessLevel accessLevel, Uri baseUri)
   at System.Windows.Markup.XamlReader.LoadBaml(Stream stream, ParserContext parserContext, Object parent, Boolean closeStream)
   at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
   at ExistingSample.MainWindow.InitializeComponent() in C:\Users\Niels\Downloads\SfTextInputSample422916185\ExistingSample\ExistingSample\MainWindow.xaml:line 1

Inner Exception 1:
FileLoadException: Could not load file or assembly 'Syncfusion.SfShared.Wpf, Version=18.4460.0.43, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

Attachment: Screenshot_20210216_204025_d60eeb27.7z

Sridevi Sivakumar · Answer

Hi NM van Strien,Query: I am having trouble with compiling the demo. I keep getting this error related to Syncfusion.SfShared.Wpf (see error at bottom of message). I reinstalled all SF packages through nuget, but had to manually install Syncfusion.SfShared.Wpf, because I could not find it on nuget from within Visual Studio 2019.We checked the reported query from our side and we suspect it due to dependent NuGet cache restore issue.Please try the below steps in your application and let us know whether the issue resolved or not.Steps: · Uninstall all the Syncfusion nuget from your application and clean your project solution. · Please follow below steps before install or update the NuGet. a. Please clear the NuGet cache, before using the latest one. https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cach b. Uninstall old NuGet in your application before install the latest version. · Close the visual studio and delete Bin, Obj and Packages folder in your application location. · Now open your application and install all the latest version of Syncfusion NuGet and rebuild. · Now, deploy your application.Please let us know still you have issue on this.Query : I did create the SfTextInputLayoutExt class in my own project. I am able to use the new control. However, the SfTextInputLayoutExt occupies half of the height of the grid cell (see screen shot at design time). When the application is resized? Can it still properly resize the SfTextBoxExt.Existing solution has some dynamic size related problem. So, we have achieved your requirement by overriding SfTextInputLayout default Template and set InputView VerticalAlignment as Stretch in SfTextInputLayout extension class necessary places. Please find the code snippet below.Code snippet public class SfTextInputLayoutExt : SfTextInputLayout { public override void OnApplyTemplate() { base.OnApplyTemplate(); InputView.VerticalAlignment = VerticalAlignment.Stretch; InputView.GotFocus += InputView_GotFocus; if (InputView is TextBox) (InputView as TextBox).TextChanged += SfTextInputLayoutExt_TextChanged; } private void SfTextInputLayoutExt_TextChanged(object sender, TextChangedEventArgs e) { InputView.VerticalAlignment = VerticalAlignment.Stretch; } private void InputView_GotFocus(object sender, RoutedEventArgs e) { InputView.VerticalAlignment = VerticalAlignment.Stretch; } } Please find the sample from the below link.Sample : https://www.syncfusion.com/downloads/support/forum/162580/ze/Sample_(4)-756092983Query : Also, the skin that is set globally for the control does not fully load it seems. When placing the cursor in the SfTextBoxExt, the outline of the SfTextInputLayoutExt becomes blue, whereas in the original SfTextInputLayout it becomes light gray.In Focus and UnFocus state, SfTextInputLayoutExt and SfTextInputLayout are behave as like same.Please find the image comparison below. SfTextInputLayout -> Focus state SfTextInputLayoutExt -> Focus state Please check this problem with our new solution. If you still face any problem, can you revert us by modifying the attached sample based on your application scenario, this will help us to provide you a better solution at the earliest. Regards,Sridevi S.

NM van Strien · Answer

Dear Sridevi Sivakumar,Thank you so much for this solution. I am super happy with this. It is almost doing exactly what I wanted. The SfTextInputLayoutExt resizes dynamically and fills the whole height of the row. Exactly what I wanted. I would suggest to make this behavior default for a future update to the regular SfTextInputLayout when setting VerticalAlignment="Stretch" on the SfTextInputLayoutExt control.There is one remaining issue with the position of the hint text:- The hint text of the SfTextInputLayoutExt is not in the correct 
position when the nested SfTextBoxExt has a height that is smaller than 
the parent SfTextInputLayoutEx. See the attached screenshot 
(HintText_not_in_right_position.jpg).In other conditions, the hint text is in the right position, i.e.- When the SfTextBoxExt has a height that is larger than the parent SfTextInputLayoutEx height, the hint does display in the right position (see HintText_in_right_position_when_SfTextBoxExtHeight_is_Larger_than_SfTextInputLayoutExt.jpg)- When the cursor is positioned in the nested SfTextBoxExt, and while typing in the SfTextBoxExt, the SfTextInputLayoutEx hint is also in the right position (see HintText_in_right_position_When_Cursor_inside_SfTextBoxExt.jpg)Any help to resolve the position issue of the hint text, as outlined above is much appreciated.Kind regards,Niels ps: I still had the issue with Syncfusion.SfShared.Wpf after going through all steps of deleting the packages, clearing the nuget cache and reinstalling the packages. I could however integrate the suggested code succesfully in my own code. Attachment: Hint_text_position_55219102.zip

Muneesh Kumar G · Answer

Hi NM van Strien, 
 
Thanks for your update.  
 
Query: I would suggest to make this behavior default for a future update to the regular SfTextInputLayout when setting VerticalAlignment="Stretch" on the SfTextInputLayoutExt control. 
 
We would like to inform you that our SfTextInputLayout shows the desired size only for InputView. So that stretch alignment not worked for InputViews. We can increase the height of SfTextInputLayout by increasing the size of InputViews only through the Height property. 
 
Query :  The hint text of the SfTextInputLayoutExt is not in the correct position when the nested SfTextBoxExt has a height that is smaller than the parent 
 
We have resolved this problem by setting VerticalAlignment for InputView in InputView’s LostFocus also. Please find code snippet below.  
 
Code snippet 




public class SfTextInputLayoutExt : SfTextInputLayout 
    { 
        public override void OnApplyTemplate() 
        { 
            base.OnApplyTemplate(); 
            InputView.VerticalAlignment = VerticalAlignment.Stretch; 
            InputView.GotFocus += InputView_GotFocus; 
            InputView.LostFocus += InputView_LostFocus; 
 
            if (InputView is TextBox) 
                (InputView as TextBox).TextChanged += SfTextInputLayoutExt_TextChanged; 
        } 
 
        private void InputView_LostFocus(object sender, RoutedEventArgs e) 
        { 
            UpdateInputViewAlignment(); 
        } 
 
        private void SfTextInputLayoutExt_TextChanged(object sender, TextChangedEventArgs e) 
        { 
            UpdateInputViewAlignment(); 
        } 
 
        private void InputView_GotFocus(object sender, RoutedEventArgs e) 
        { 
            UpdateInputViewAlignment(); 
        } 
 
        private void UpdateInputViewAlignment() 
        { 
            InputView.VerticalAlignment = VerticalAlignment.Stretch; 
        } 
    } 
 
We have modified our sample based on this, please find the sample from the below location.  
 
Sample: https://www.syncfusion.com/downloads/support/forum/162580/ze/Sample-1736114329 
 
Query : I still had the issue with Syncfusion.SfShared.Wpf after going through all steps of deleting the packages, clearing the nuget cache and reinstalling the packages. I could however integrate the suggested code successfully in my own code.  
 
We would like to inform you that our SfTextInputLayout control does not has any dependent references (Assemblies) like SfShared.WPF.dll or Shared.WPF.dll.  
 
So, please update us what are all the Syncfusion controls you are using in your application. 
 
And, please update us the Syncfusion product version used in your application.  
 
Also update us, if you are using any custom fix (nuget) for our syncfusion controls. This would helpful for us to give better solution in this.  
 
Thanks, 
Muneesh Kumar G

NM van Strien · Answer

Sorry for my late response. Regarding your questions, these are the answersWe
 would like to inform you that our SfTextInputLayout control does not 
has any dependent references (Assemblies) like SfShared.WPF.dll or 
Shared.WPF.dll.  
So, please update us what are all the Syncfusion controls you are using in your application. 
 - I only have trouble compiling the demo that I download from this thread in the forum. My own application uses many SF controls, but I do not have the issue of the missing SfShared.WPF.dll 
And, please update us the Syncfusion product version used in your application.  - I am currently at 18.4.0.39
 
Also
 update us, if you are using any custom fix (nuget) for our syncfusion 
controls. This would helpful for us to give better solution in this.  - I am only using the default Nuget settings for suncfusion controls. I attached a video of Visual Studio 2019 trying to compile the solution that you provided. I hope it helps.Attachment: syncfusion_demo_compile_error_9005e8c7.7z

NM van Strien · Answer

Hi Sridevi,This latest example compiled without problem. Thank you for fixing it. Also, the demo showed me how to achieve the desired behavior of the SfTextInputLayout. Thank you for your help. I appreciate it. Kind regards,Niels

Sridevi Sivakumar · Answer

Hi NM van Strien,Thanks for your update,We glad that the provided solution is working at our end.Let us know if you have any other queries.Regards,Sridevi S.

SfTextInputLayout -> Focus state	SfTextInputLayoutExt -> Focus state