xamarin/Xamarin.Forms

Animating Xamarin.Forms ViewCell causes scaling issues and slow performance on iOS

Open

#4,012 opened on Oct 5, 2018

 (4 comments) (0 reactions) (0 assignees)C# (1,926 forks)batch import
a/listviewa/performancee/5 :clock5:excellent-reporthelp wantedinactivep/iOS 🍎t/bug :bug:up-for-grabs

Repository metrics

Stars
 (5,644 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Description

I am currently trying to animate a ViewCell inside a ListView so it expands and collapses once it gets Tapped. The logic behind this works fine, but there seem to be issues with the iOS ListView that I am unable to figure out. The implementation is currently done in the shared code and not platform specific.

Steps to Reproduce

The ViewCell itself contains two subviews:

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="com.example.CollapsableCell"
          Appearing="OnAppearing">
    <Frame x:Name="CollapsableFrame" CornerRadius="5" HasShadow="true" Margin="5" BorderColor="Gray" OutlineColor="Gray">
        <Grid>
            <Grid x:Name="CollapsableContent" />
        </Grid>
        <Frame.GestureRecognizers>                
            <TapGestureRecognizer Tapped="OnTapped" />
        </Frame.GestureRecognizers>
    </Frame>
</ViewCell>

The method for switching between the collapsed and expanded views looks like this:

protected void OnTapped(object sender, EventArgs args)
    {
        Debug.WriteLine("OnTapped");
        if (_isExpanded) // collapse the ViewCell
        {
            CollapsableFrame.LayoutTo(_collapsedBounds, 500, Easing.CubicIn);
            ForceUpdateSize();
            CollapsableFrame.BackgroundColor = _collapsedView.BackgroundColor;
            _collapsedView.RotationY = -270.0;
            _expandedView.RotateYTo(-90.0, 250, Easing.SinIn);
            _expandedView.IsVisible = false;
            _collapsedView.IsVisible = true;
            _collapsedView.RotateYTo(-360.0, 250, Easing.SinOut);
            _collapsedView.RotationY = 0.0;
            _isExpanded = false;
        }
        else // Expand the ViewCell
        {
            CollapsableFrame.LayoutTo(_expandedBounds, 500, Easing.CubicOut);
            ForceUpdateSize();
            CollapsableFrame.BackgroundColor = _expandedView.BackgroundColor;
            _expandedView.RotationY = -270.0;
            _collapsedView.RotateYTo(-90.0, 250, Easing.SinIn);
            _collapsedView.IsVisible = false;
            _expandedView.IsVisible = true;
            _expandedView.RotateYTo(-360.0, 250, Easing.SinOut);
            _expandedView.RotationY = 0.0;
            _isExpanded = true;
        }
    }

The _collapsedView and _expandedView are private members that are set via properties and are child objects to CollapsableContent.

Expected Behavior

The animations perform the same on iOS and Android.

Actual Behavior

On Android this works perfect, on iOS the scaling of the CollapsableFrame never works properly (the content extends over the Frames bounds) and in addition after executing the animation a few times the animation gets stuck and freezes the whole application. I already tried to strip the animation down to only the scaling of the CollapsableFrame, but the issue stays the same.

Basic Information

  • Version with issue: Xamarin.Forms 3.1.0.697729 - 3.2.0.871581
  • Last known good version:
  • IDE: Visual Studio for Mac 7.6 (build 2190) - 7.6.8 (build 38)
  • Platform Target Frameworks:
    • iOS: 11.4 - 12.0
    • Android: 8.1
  • Android Support Library Version: 27.0.2.1
  • Nuget Packages:
  • Affected Devices: iPhone 6, iPhone X, iOS Simulator

Screenshots

ios-initial-list ios-item-expanded ios-transition-aftersomeclicks

Contributor guide