[Bug] [Regression] UWP Button breaks the Layout

[YZahringer]

Description

There are several regressions with the Button on UWP after Xamarin.Forms 5.0.0.2012:

• Breaking: If the Button is not initially visible, it breaks the layout/resize when it becomes visible.
  This regression is introduced by:
  [UWP] Fix incorrect Button rendering inside CollectionView ItemTemplate #14598
• UI Change: No default Hover and Pressed animation color. Also different default margin/padding defined.
  This regression is introduced by:
  [UWP] Fix Button Disabled VisualState  #13148
  [UWP] Fix broken disabled Button visual state #14567

Steps to Reproduce

1. Add a Button to a view
2. Make it IsVisible=False by default
3. Change the Visibility at runtime

Expected Behavior

Button works correctly with Hover/Pressed animation and does not break the layout/view.

Actual Behavior

Layout view is break, no render/resize, until the Button go back to IsVisible=False.
No Hover/Pressed animation.

Basic Information

• Version with issue: 5.0.0.2196
• Last known good version: 5.0.0.2012
• Platform Target Frameworks:
  • UWP: 17763

Environment

Show/Hide Visual Studio info

Microsoft Visual Studio Professional 2019
Version 16.11.5
VisualStudio.16.Release/16.11.5+31729.503
Microsoft .NET Framework
Version 4.8.04161

Installed Version: Professional

Visual C++ 2019   00435-60000-00000-AA792
Microsoft Visual C++ 2019

.NET Core Debugging with WSL   1.0
.NET Core Debugging with WSL

ASP.NET and Web Tools 2019   16.11.75.64347
ASP.NET and Web Tools 2019

ASP.NET Web Frameworks and Tools 2019   16.11.75.64347
For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0   16.11.75.64347
Azure App Service Tools v3.0.0

Azure Functions and Web Jobs Tools   16.11.75.64347
Azure Functions and Web Jobs Tools

C# Tools   3.11.0-4.21403.6+ae1fff344d46976624e68ae17164e0607ab68b10
C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools   1.10
Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

EditorConfig Language Service   1.17.288
Language service for .editorconfig files.

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.

Extensibility Message Bus   1.2.6 (master@34d6af2)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

GitHub.VisualStudio   2.11.102.28613
A Visual Studio Extension that brings the GitHub Flow into Visual Studio.

IntelliCode Extension   1.0
IntelliCode Visual Studio Extension Detailed Info

JetBrains ReSharper 2021.3 EAP 4   Build 213.0.20211012.94036-eap04
JetBrains ReSharper package for Microsoft Visual Studio. For more information about ReSharper, visit http://www.jetbrains.com/resharper. Copyright © 2021 JetBrains, Inc.

Microsoft Azure Tools for Visual Studio   2.9
Support for Azure Cloud Services projects

Microsoft Continuous Delivery Tools for Visual Studio   0.4
Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE.

Microsoft JVM Debugger   1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft Library Manager   2.1.113+g422d40002e.RR
Install client-side libraries easily to any web project

Microsoft MI-Based Debugger   1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual C++ Wizards   1.0
Microsoft Visual C++ Wizards

Microsoft Visual Studio Tools for Containers   1.2
Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container.

Microsoft Visual Studio VC Package   1.0
Microsoft Visual Studio VC Package

Mono Debugging for Visual Studio   16.10.15 (552afdf)
Support for debugging Mono processes with Visual Studio.

NuGet Package Manager   5.11.0
NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

ProjectServicesPackage Extension   1.0
ProjectServicesPackage Visual Studio Extension Detailed Info

Razor (ASP.NET Core)   16.1.0.2122504+13c05c96ea6bdbe550bd88b0bf6cdddf8cde1725
Provides languages services for ASP.NET Core Razor.

ResXManager   ResXManager
Manage localization of all ResX-Based resources in one place. Shows all resources of a solution and let's you edit the strings and their localizations in a well-arranged data grid.

SQL Server Data Tools   16.0.62107.28140
Microsoft SQL Server Data Tools

StylerPackage Extension   1.0
StylerPackage Visual Stuido Extension Detailed Info

TypeScript Tools   16.0.30526.2002
TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools   3.11.0-4.21403.6+ae1fff344d46976624e68ae17164e0607ab68b10
Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools   16.11.0-beta.21322.6+488cc578cafcd261d90d748d8aaa7b8b091232dc
Microsoft Visual F# Tools

Visual Studio Code Debug Adapter Host Package   1.0
Interop layer for hosting Visual Studio Code debug adapters in Visual Studio

Visual Studio Container Tools Extensions   1.0
View, manage, and diagnose containers within Visual Studio.

Visual Studio Tools for Containers   1.0
Visual Studio Tools for Containers

VisualStudio.DeviceLog   1.0
Information about my package

VisualStudio.Mac   1.0
Mac Extension for Visual Studio

Windows Template Studio   4.1.21179.1
Windows Template Studio quickly builds a UWP app, using a wizard-based UI to turn your needs into a foundation of Windows 10 patterns and best practices.

Xamarin   16.11.000.190 (d16-11@2391ed9)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer   16.11.0.17 (remotes/origin/11e0001f0b17269345e80b58fb3adf1ba4efe2cd@11e0001f0)
Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates   16.10.5 (355b57a)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK   11.4.0.5 (d16-11/7776c9f)
Xamarin.Android Reference Assemblies and MSBuild support.
    Mono: c633fe9
    Java.Interop: xamarin/java.interop/d16-11@48766c0
    ProGuard: Guardsquare/proguard/v7.0.1@912d149
    SQLite: xamarin/sqlite/3.35.4@85460d3
    Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-11@683f375


Xamarin.iOS and Xamarin.Mac SDK   15.0.0.8 (0796d78dc)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

Screenshots

Xamarin.Forms 5.0.0.2012

Xamarin.Forms 5.0.0.2196

Reproduction Link

https://github.com/MADSENSE/Madsense.XamarinForms.Sample/tree/regression-uwp-button

Workaround

Layout Break

[assembly: ExportRenderer(typeof(Button), typeof(CustomNS.Renderers.ButtonRenderer))]
public class ButtonRenderer : Xamarin.Forms.Platform.UWP.ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null && Control != null)
        {
            Control.Loading += ControlOnLoading;
        }
    }

    private void ControlOnLoading(FrameworkElement sender, object args)
    {
        Element.IsNativeStateConsistent = true;
    }

    protected override void Dispose(bool disposing)
    {
        if (Control != null)
        {
            Control.Loading -= ControlOnLoading;
        }
    }
}

Hover/Pressed effect

No workaround found

[MitchBomcanhao]

This is a highly critical issue for us, most of our application doesn't render correctly with SR6

content that isn't visible, pages that do not react to window resizing, content that only renders when it feels like it - it is almost impressive that the sr6 bugfix for a button rendering issue has cause such massive application-wide issues.

as for the button pressed/hovering issues, they were expected as the xaml code in xamarin forms was blank for those states. you can make your own override to work around that problem in the UWP project app.xaml file.

            <!-- override the xamarin forms uwp button style  -->
            <Style TargetType="uwp:FormsButton">
                <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
                <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
                <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
                <Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontWeight" Value="Normal" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="FocusVisualMargin" Value="-3" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter x:Name="ContentPresenter"
                                              Padding="{TemplateBinding Padding}"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                              AutomationProperties.AccessibilityView="Raw"
                                              Background="{TemplateBinding Background}"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              CornerRadius="{TemplateBinding CornerRadius}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0.65" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

[jfversluis]

Hey @YZahringer thanks so much for the detailed report, appreciate it! I have a PR open that at least should fix the hover and selected state. Would you be able to test that as described here and let us know if this fixes this issue? That will greatly speed up the review process.

@jsuarezruiz do you have any ideas on the resize bug?

[MitchBomcanhao]

my 2 cents
From my end things seem back to normal with the UWP app 👍 . Note - we do not use CollectionView so I can't comment on how well that part is functioning, and that would still be related to a different bug anyway.

Looking at the PR changes, it seems that we've introduced a bit of a penalty on the ButtonRenderer which will try to find the element's parent for every single button, but that (if it is even noticeable) may be the current price to pay to get both the collection view stuff to work (as per the related bug) and not break the rest of the UI elements.