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>
2 Answers, 1 is accepted
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
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
How to do it:
Edit the .csproj and add
<MauiVersion>7.0.86</MauiVersion>
Let me know the results.
Rank 1
Iron
Iron
Veteran
Rank 1
Veteran
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).
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.
Rank 1
Veteran
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):
---------------------
SDK Version: 3.1.426
So, what's the magic on Didi's machine? :)
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.
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!
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.
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.