SFTextInputLayout with SfMaskedEdit inside has different margins/height than other controls

[NM van Strien]

Hi,

I noticed that the SfMaskedEdit control inside an SFTextInputLayout displays another height than for SfComboBoxAdv or a textbox.

See the attached screenshot where I marked the areas where this is visible.

Is there solution for this?

Kind regards,

Niels van Strien

Attachment: SfMaskedEdit_eae50ff0.zip

[Sridevi Sivakumar]

Hi NM van Strien,

Query: I noticed that the SfMaskedEdit control inside an SFTextInputLayout displays another height than for SfComboBoxAdv or a textbox.

We have tested with SfComboBoxAdv, TextBox, and SfMaskedEdit. And all are rendered with the same height. Please find the tested sample in below location.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/LayoutSample1954073222

Since we are not aware of your exact application scenario, we were not able to reproduce this at our end, can you please revert us by modifying the sample based on your application along with replication procedure.

Regards,
Sridevi S. 

[NM van Strien]

Hi,

I am still researching where things might go wrong for me. When I cut and paste my xaml code into a sample .Net 5 WPF app like your, it works fine (with all bindings removed). See the attached file with both your sample and my .Net 5 sample.

I noticed that the height difference in my other app only occurs at runtime. at design time all looks fine.

I will try to create another demo app that will feature a more complete scenario as I use it. If I manage to reproduce the problem in that demo, I will upload it here.

Thank you for your kind help so far.

Regards,

Niels

Attachment: LayoutSample1954073222_581e3282.7z

[NM van Strien]

Hello Sridevi,

Attached find a more complex solution that uses the dockingmanager.

If you look in DockingAdapterViewModel, on line 40 your will find the method below.

        private void PopulateDockingAdapterCollection()
        {
            DockingAdapter = new ObservableCollection();

            // Add models obtained from DI container.
            DockingAdapter.Add(_sFTextInputLayoutTestViewModel);
            
            // comment out the 2 lines below and the height difference in the SfTextInputLayout will dissappear.
            DockingAdapter.Add(_contactsListViewModel);
            DockingAdapter.Add(_contactsTreeViewModel);
        }

If you comment out line 48 and 49, the height of the SFTextInputLayout with SfMaskedEdit control will look fine. However, If you include these two usercontrols - or even just one of them - in the DockingManager, then  the SFTextInputLayout with SfMaskedEdit control in the SFTextInputLayoutTestView, will take a different height at runtime, compared to the other SFTextInputLayout controls that do not have a SfMaskedEdit  field on that demo page. Both usercontrols that you can comment out, have no SFTextInputLayout on them, nor a SfMaskedEdit. I therefore do not  understand how adding these usercontrols affect the content display of my _sFTextInputLayoutTestViewModel.

An example of an SFTextInputLayout control that differ in size with the 2 extra usercontrols loaded in the DockingAdapterViewModel is located in SFMVVM.Views.SFTextInputLayoutTestView.xaml lines 182-212. The SFTextInputLayout with the SfMaskedEdit inside will be different in Height from the SFTextInputLayout with the combobox inside, displayed next to it.

Should you any questions about my demo, let me know.

Thanks in advance.

Niels van Strien

The demo uses .Net5, Caliburn Micro, DockingManager. I use this project to test WPF controls of SyncFusion so there is more stuff in there than strictly needed for this demo alone.

Attachment: 2021_05_25_SyncfusionControlsDemo_da51f56.7z

[Sridevi Sivakumar]

Hi NM van Strien,

We have checked the reported query with the provided sample. The SfTextInputLayout is a layout control and used to show and decorate the input view.  We can get the reported height difference while adding the control without SfTextinputLayout also.

If you want to show all the controls in same height, set height for input view as per the below code snippet.   

            <sf:SfTextInputLayout  x:Name="EmailAddress" Grid.Row="4" Grid.Column="3"  Hint="Email adres"> 

                    <sf:SfMaskedEdit Height="15"  MaskType="RegEx"  Mask="[A-Za-z0-9._%-]+@[A-Za-z0-9]+.[A-Za-z]{2,3}"/> 

                </sf:SfTextInputLayout> 

Screenshot:


Let us know if you need any further assistance. 

Regards,
Sridevi S.

[NM van Strien]

Hi Sridevi,

Thanks for your suggestion. Rather than setting a fixed height on he SfMaskedEdit inside the SFTextInputLayout, I found out that setting the Height parameter on a SfMaskedEdit like this will give an exact height match with other elements:

Height="{Binding ActualHeight, ElementName=!TargetElem!}"

The target element is the x:Name parameter of another control inside a SFTextInputLayout, which does not suffer from being different in height than most other fields. A complete example:

                <!--PersonId -->
                <Grid Grid.Row="5" Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="5" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>

                    <sf:SfTextInputLayout
                    x:Name="PersonId"
                    Grid.Column="0"
                    Hint="Burgerservicenummer">

                        <sf:SfMaskedEdit
                        x:Name="PersonIdME"
                        Value="{Binding Path=PersonId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        MaskType="RegEx"
                        Mask="\d{9}"
                        d:Text="987654321"
                        MaxLength="9"
                            Height="{Binding ActualHeight, ElementName=MultibleBirthCBB}"/>
                    </sf:SfTextInputLayout>

                    <sf:SfTextInputLayout
                    x:Name="MultipleBirth"
                    Grid.Column="2"
                    Hint="Meerling indicator"
                    HorizontalAlignment="Stretch">

                        <sf:ComboBoxAdv
                            x:Name="MultibleBirthCBB"
                        ItemsSource="{Binding Source={StaticResource YesNoItemsMultipleBirth}}"
                        SelectedValue="{Binding SelectedMultipleBirth}"
                        HorizontalAlignment="Stretch"
                        />

                    </sf:SfTextInputLayout>
                </Grid>

It does remain a mystery why the SfMaskedEdit control displays normally in the DockingAdapter when only 1 view is loaded and starts growing taller when multiple

 views are added.

Nevertheless, for me the case is solved like this.

Thanks again for your help and kind regards,

Niels

[Ramya Soundar Rajan]

Hi NM van Strien, 

 

We are glad that you have resolved the problem. Please let us know if you would require any further assistance. 

 

Regards, 

Ramya S