Xamarin.forms: [Bug] Button wrong calculates size on Android in 4.5.0.495

[PetrVobornik]

Description

Button wrong calculates size (horizontal and vertical too) by his Text on Android when I change FontSize to Medium in version 4.5.0.495. In previous version 4.5.0.396 it works fine. No other changes in XAML and code behind are here, only XF update.

Tested on Android 10.0 (API 29) emulator.

[PureWeen]

@PetrVobornik can you attach a repro please?

[hemawst]

I have a very similar problem. I have a content page with a control template. In the template there are buttons with static resource styles. In version 4.5.0.396 everything works great, but in version 4.5.0.495 the size of the buttons is calculated incorrectly. All text content of the buttons are cut off. All horizontal options do not work, only when I set the property widthrequest does the size of the buttons change

Here is an example code:

MainPage.xaml
`

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.MainPage"
x:Name="PageOne"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False"
ControlTemplate="{StaticResource HeaderFooterTemplate}">

<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" BackgroundColor="#FFFFFF">
    <Button x:Name="btn1" Text="btn1Text" Clicked="btn2_Clicked" Style="{StaticResource buttonMenuNormalStyle}"/>
    <Button x:Name="btn2" Text="btn2TextTextText" Clicked="btn2_Clicked" Style="{StaticResource buttonMenuNormalStyle}"/>
    <Button x:Name="btn3" Text="btn3Text" Clicked="btn3_Clicked" Style="{StaticResource buttonMenuNormalStyle}"/>
</StackLayout>

`

and App.xaml

`
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.App">

        <Style x:Key="buttonMenuNormalStyle" TargetType="Button">
            <Setter Property="HorizontalOptions" Value="Fill"/>
            <Setter Property="BorderColor" Value="#FFE91277"/>
            <Setter Property="BorderWidth" Value="2"/>
            <Setter Property="RotationX" Value="0" />
            <Setter Property="RotationY" Value="0" />
            <Setter Property="Rotation" Value="0" />
            <Setter Property="FontFamily" Value="Calibri" />
            <Setter Property="FontSize" Value="24" />
            <Setter Property="CornerRadius" Value="25" />
            <Setter Property="BackgroundColor" Value="#2A2C2E" />
            <Setter Property="TextColor" Value="#FFFFFF"/>
        </Style>

        <ControlTemplate x:Key="HeaderFooterTemplate">

            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="70"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <!--  Header -->
                <Frame CornerRadius="0" FlowDirection="LeftToRight" Grid.Column="0" Grid.Row="0" Padding="0,0,0,1">
                    <Grid  BackgroundColor="White">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="70"/>
                            <ColumnDefinition Width="80*"/>
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <Image Grid.RowSpan="2" Grid.Column="0" Grid.Row="0" Source="pic1.jpg" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
                        <Label x:Name="lblTemplateHeading" Grid.Column="1" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0, 0, 0, 0"/>
                        <Label x:Name="lblTemplateUserName" Grid.Column="1" Grid.Row="1" HorizontalOptions="End" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="5,0"/>
                    </Grid>
                </Frame>


                <!--  Content -->
                <ScrollView Grid.Column="0" Grid.Row="1" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand"  VerticalScrollBarVisibility="Always" Margin="0,4">
                    <ContentPresenter VerticalOptions="Start" HorizontalOptions="Start" />
                </ScrollView>

                <!--  Footer -->
                <StackLayout Grid.Column="0" Grid.Row="2" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                    <Label x:Name="lblTemplateMessage" TextColor="#FF103418" Text="OK" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                </StackLayout>

            </Grid>


        </ControlTemplate>

    </ResourceDictionary>
</Application.Resources>

`

[PetrVobornik]

Code of the page from the screen is following. I change only version of XF several times back and forth with the same effect: 4.5.0.396 is OK, 4.5.0.495 buttons are bad. Not only here, but in whole application, where I change FontSize.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Pocty"
             x:Class="Pocty.MainPage"
             xmlns:tra="clr-namespace:Pocty;assembly=Pocty"
             Title="{tra:ResEx Text=MainPage_Title}">

    <Grid>
        <Image Source="back.jpg" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Opacity="0.5" />
        <ScrollView>
            <Grid>
                <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Spacing="15">
                    <Image Source="icon_main.png" WidthRequest="64" HeightRequest="64" Aspect="AspectFit" />
                    <Button x:Name="btnStart" Clicked="BtnStart_Clicked" Text="{tra:ResEx Text=MainPage_btnStart}" BackgroundColor="#4CAF50" FontSize="Medium" CornerRadius="5" TextColor="White" BorderWidth="1" BorderColor="#265728" Padding="10,5" />
                    <Button x:Name="btnSettings" Clicked="BtnSettings_Clicked" Text="{tra:ResEx Text=MainPage_btnSettings}" BackgroundColor="#428BCA" FontSize="Medium" CornerRadius="5" TextColor="White" BorderWidth="1" BorderColor="#214565" Padding="10,5" />
                    <Button x:Name="btnLoad" Clicked="BtnLoad_Clicked" Text="{tra:ResEx Text=MainPage_btnLoad}" BackgroundColor="#FF5722" FontSize="Medium" CornerRadius="5" TextColor="White" BorderWidth="1" BorderColor="#7F2B11" Padding="10,5" />
                    <Button x:Name="btnAbout" Clicked="BtnAbout_Clicked" Text="{tra:ResEx Text=MainPage_btnAbout}" BackgroundColor="#673AB7" FontSize="Medium" CornerRadius="5" TextColor="White" BorderWidth="1" BorderColor="#331D5B" Padding="10,5" />
                </StackLayout>
            </Grid>
        </ScrollView>
    </Grid>
</ContentPage>

[pmahend1]

@PetrVobornik Does it happen when you remove ScrollView as well?
I am also seeing weird issues when ScrollView is used. #10104

[PureWeen]

Here's a screen shot of the provided xaml on 396 vs 495

If someone can provide a repro that would be helpful

[PetrVobornik]

Its on Android 10.0?

[PureWeen]

@PetrVobornik yea I tested on an API 29 emulator and building with API 29

If you have a repro you could attach that would be helpful. The layouts with android buttons can be a bit quirky and super situational specific

[PetrVobornik]

I tried it on the new blank project and it works fine. Then I tried other project differences and the buttons change its sizes to wrong when I add NavigationPage to the App class.

MainPage = new NavigationPage(new MainPage());

I'm attaching this new project where are wrong buttons:
App1.zip

[PetrVobornik]

And here is configuration of my emulator if it's relevant:

[hemawst]

In my case it makes no difference whether I use a navigation page or not and removing the scroll pane has no effect. Simply setting Setter Property = "WidthRequest" Value = "xxx" changes the size of the buttons. (Android versions: Emulator 7.1, manifest target version 8.1, project target version 9.0)

[PetrVobornik]

Buttons looks identical when I remove the ScrollView. But when SW is here, then I see after launch a scroll bar on buttons with wrong wrapping for a few seconds. Yes, I can set WidthRequest, but I'm using localization and texts are variouselly long. And on UWP are another sizes too. This is not all bad buttons in my app. And the height is wrong calculated too.

[hemawst]

I saw this morning that there is a new version 4.5.0.530. I tried this version and now the problem with the display of the buttons seems to be solved at first glance.
Version 4.5.0.530 has a new problem for this. I get a new one
Error message: Navigation.PushAsync (new Page1 ()). The message is "System.InvalidOperationException: PushAsync is not supported globally on Android, please use a NavigationPage. at Xamarin.Forms.Platform.Android.AppCompat.Platform.Xamarin.Forms.INavigation.PushAsync"

I changed the code in the App.xaml.cs.
MainPage = new MainPage ();
to
MainPage = new NavigationPage (new MainPage ());
Then the error is gone, but the problem with the representation of the buttons occurs again now.

[PetrVobornik]

I tried the new version 4.5.0.530 but the problem with buttons persists.
Did you manage to simulate it with the uploaded project?

[hemawst]

No, I've only tried my own project so far. But as I said, with the new version 4.5.0.530 I still have the problem with the buttons after I have removed the new error message.

I am only surprised that we are apparently the only ones who have this button problem with existing projects.

[nwilliams]

No, I've only tried my own project so far. But as I said, with the new version 4.5.0.530 I still have the problem with the buttons after I have removed the new error message.

I am only surprised that we are apparently the only ones who have this button problem with existing projects.

You are not alone -- I'm seeing this behavior as well. I've rolled back to 4.5.0.396 for the time being since I'm also using localized text for all of my buttons and cannot use a fixed width.

One thing I did notice during my testing is that if you have an ImageSource set on the button, the width is correctly calculated. Not a good solution, but may be an acceptable workaround for some people.

[vincentcastagna]

Hello.

Same issue here after upgrading to latest.

No prob at all for buttons that lives in a simple layout (one stacklayout) but when the layout is more complex, like nested stacklayouts inside a parent grid, button size calculation is as shown on the screenshot of this issue.

One interessting thing is that when refreshing the page with HotReload, the calculation seems good.

EDIT : I noticed as confirmed that a button that lives inside nested stacklayouts will have this issue :

```
Grid.Row="1"
HorizontalOptions="FillAndExpand"
Spacing="5">

Text="{x:Static constants:IconFont.Chat}" />
Command="{Binding NavigateCommand}"
CommandParameter="PageA"
Text="Ma chaîne" />

```
If I replace the Parent stacklayout with a grid, error is gone.

One other workaround is to put VerticalOptions="FillAndExpand" to each of the nested StackLayout.
Might be clues.

[frarteaga]

Same issue with 4.5.0.530.

Also using localized strings.
Should look like this:

[frarteaga]

I just tried with the new version 4.5.0.617 and the issue remains.

[vincentcastagna]

Best workaround today for me was to use LegacyRenderers which solve the prob in my entire app :

Forms.SetFlags("UseLegacyRenderers");

[nwilliams]

Best workaround today for me was to use LegacyRenderers which solve the prob in my entire app :

Forms.SetFlags("UseLegacyRenderers");

Unfortunately, this doesn't work with the Material visual.

Hopefully we'll get a proper fix soon.