NumericInputEntry in a ControlTemplate no longer obeys VerticalTextAlignment.

2 Answers 51 Views
NumericInput
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
Larry asked on 29 Jul 2023, 05:00 AM

This is a change in behavior from previous versions. Changing the value from Center to End, then back to Center in the debugger will change the alignment, but I haven't found a way to make it work in my app. At present the alignment appears to be Start.

Example code:

        <ControlTemplate x:Key="RotationRadNumericInputControlTemplate">
            <Grid>
                <telerik:RadBorder x:Name="PART_BorderVisual" BorderColor="Transparent">
                    <Grid ColumnSpacing="{StaticResource Spacing}" HeightRequest="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="50" />
                        </Grid.ColumnDefinitions>
                        <telerik:NumericInputButton
                            Grid.Column="0"
                            HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center"
                            BackgroundColor="Transparent"
                            BorderColor="DarkOrange"
                            BorderThickness="2"
                            Command="{TemplateBinding DecreaseCommand}"
                            CornerRadius="0"
                            FontSize="{StaticResource MediumFontSize}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                            Text="-"
                            TextColor="DarkOrange" />
                        <telerik:NumericInputEntry
                            x:Name="PART_Entry"
                            Grid.Column="1"
                            BackgroundColor="Transparent"
                            BorderBrush="DarkOrange"
                            BorderThickness="1"
                            ClearButtonVisibility="Never"
                            CornerRadius="0"
                            FontSize="{StaticResource MediumFontSize}"
                            HeightRequest="50"
                            HorizontalTextAlignment="Center"
                            InputTransparent="{TemplateBinding IsReadOnly}"
                            IsReadOnly="True"
                            Text="{TemplateBinding Value}"
                            TextColor="DarkOrange"
                            VerticalTextAlignment="Center"
                            WidthRequest="100" />
                        <telerik:NumericInputButton
                            Grid.Column="2"
                            HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center"
                            BackgroundColor="Transparent"
                            BorderColor="DarkOrange"
                            BorderThickness="2"
                            Command="{TemplateBinding IncreaseCommand}"
                            CornerRadius="0"
                            FontSize="{StaticResource MediumFontSize}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                            Text="+"
                            TextColor="DarkOrange" />
                    </Grid>
                </telerik:RadBorder>
                <telerik:RadBorder x:Name="PART_FocusBorderVisual" BorderColor="Transparent" />
            </Grid>
        </ControlTemplate>
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 01 Aug 2023, 12:26 AM

Thanks. That would have been great, but... no luck. I tried changing them, then using both but got the same results in either case. Note this is code that hasn't changed in a long time. An update seems to have caused this.

Note that changing VerticalTextAlignment in the debugger can change this behavior. Changing VerticalOptions doesn't.

I started going back version by version (which became increasingly difficult). I verified the same behavior in 5.00 but was not able to get running with 4.00. See the attached screenshots to see the difference (note the 'Balls Left' and 'On break' controls near the top). The 'centered as expected' controls are from a screenshot when this was first put into the MS Store.

edit: I went further. I created a small test app (attached). I took it all the way back to telerik 1.00 (which I couldn't run). So maybe this is a Maui bug? I couldn't see a reasonable way to downgrade Maui to test that theory. Any help/workaround would be appreciated. I don't see how to affect the control once the app is running (like I can in the debugger). Thanks.

 

2 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 31 Jul 2023, 08:45 PM

Hello Larry,

VerticalTextAlignment is not a strong property, it can be easily overridden by higher precedent values from a parent style. Please try using VerticalOptions/HorizontalOptions instead.

Regards,
Lance | Manager Technical Support
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
0
Didi
Telerik team
answered on 01 Aug 2023, 09:12 AM

Hi Larry,

I have reviewed the files and noticed the following on image Screenshot there is an issue with the numeric text. On image rotationmatch I do not see the issue displayed in the first image. Review the attached file how the numeric text looks in my sample project. I am using .NET MAUI version 7.0.86. 

There are several issues reported to Microsoft for the GridLayout with the newer .NET MAUI  version. This is one of the issue: https://github.com/dotnet/maui/issues/16334 

Could you please check what is the .NET Maui version you use?
run the following command in the terminal: 

dotnet workload list
If you use a newer version, my suggestion is to downgrade the project to version 7.0.86

 

How to do it:
Edit the .csproj and add

<MauiVersion>7.0.86</MauiVersion>
here is an example: 

 

Let me know the results.

Larry
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 01 Aug 2023, 08:25 PM

I was already running 7.0.86, unfortunately. I attached a tiny project (MauiApp6). Can you see anything there?
Didi
Telerik team
commented on 02 Aug 2023, 08:23 AM

I have attached the app. Used your code for styles, template, etc. Also attached an image of the finial look on my side. I do not see issue with the NumericInput. 
Larry
Top achievements
Rank 1
Veteran
commented on 02 Aug 2023, 07:12 PM

The plot thickens...? I've verified this behavior on three machines (using my real app). Two of my machines are running Windows 11, one is running Windows 10. Are you by chance running windows in an emulator? Does my app (MauiApp6) also look ok on your machine? Can you try it on a different machine?

Attached is a screenshot from my computer (using your app - MauiApp10). 

Lance | Manager Technical Support
Telerik team
commented on 02 Aug 2023, 08:24 PM

Hi Larry,

I was able to replicate this in both MAUI SDK v7.0.92 

and in MAUI SDK v7.0.86

I also checked against older .NET 7 releases, 7.0.81 and 7.0.59 and was still able to observe the layout issue.

 

Since Didi can't replicate this, I suspect it might be related to WinAppSDK and Windows versions, but we'll need to investigate this further. My version is 22H2 - v 22621 as seen in this screenshot:

What is yours? You can check quickly by running the winver command from the Start menu.

Larry
Top achievements
Rank 1
Veteran
commented on 02 Aug 2023, 10:17 PM

I am running Windows 11 22H2, but up until a few days ago, I was running 21H2 (apparently, the 22H2 update had been failing and I had to update manually). Both versions showed the problem.

I've verified it on a second machine running Windows 11 22H2.

I've verified it on a third machine running Windows 10 22H2.

And I've verified it on a fourth machine running Windows 10 22H2 (where Maui isn't even installed):

Welcome to .NET Core 3.1!
---------------------
SDK Version: 3.1.426

So, what's the magic on Didi's machine? :)

Didi
Telerik team
commented on 03 Aug 2023, 05:08 AM

Hi Larry,

I am not using windows emulator, directly test on a physical machine. The machine has Windows 10 enterprise version 21H2.

Based on your description the issue happens on Windows 10 22H2. I will test on different machine and will let you know the final result. 


Lance | Manager Technical Support
Telerik team
commented on 04 Aug 2023, 08:30 PM | edited

Hi Larry, Just wanted to give you an update before the weekend begins. We've been able to narrow down the issue to a .NET MAUI version. In fact, you'll be able to see the same behavior in a MAUI Entry, here's a screenshot from an earlier part of our investigation:

The team needs a little more time to be 100% sure of the cause, but we're on the right path and really close. Didi will get back to you with the specifics as soon as she's ready to share them.

Thanks for hanging tight and working with us throughout!

Didi
Telerik team
commented on 07 Aug 2023, 11:00 AM

Hi Larry, 

I have logged the issue for the Telerik MAUI Entry here: https://feedback.telerik.com/maui/1618963-entry-winui-text-is-not-centered-vertically The issue is logged for the RadEntry control as this control is used internally in the NumericInput. The issue happens in .NET MAUI latest version. The Windows version does not matter. 

I have Visual Studio 17.6.2 and Maui 7.0.86 and no issues on my side. We have tested with latest Visual Studio and latest maui and the issue occurs. 

I do not have a workaround for this behavior.

 

 

Tags
NumericInput
Asked by
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Lance | Manager Technical Support
Telerik team
Didi
Telerik team
Share this question
or