Animated UI very choppy. How to create an effective animated expanderBox with Drawable?

[WileyNg]

hi @cwensley

AnimationProblem.mp4

I have yet another problem.
I made a Animated Drawable ExpanderBox as shown in the video.

using System;
using Eto.Forms;
using Eto.Drawing;

namespace UI.Controls
{
    public class ExpanderBox : Drawable
    {
        #region variables
        public string Title;
        public bool Expanded;

        private int headerHeight = Terrain.Helpers.Globals.GridRowHeight;
        private HoverLabel header;

        private Padding padding = new Padding(0, 4, 0, 0);
        private string labelStyle;
        private Control expandedControls;
        private ImageButton expandButton;
        private int _targetHeight;
        private int _capturedHeight;
        private UITimer _timer;
        public ExpanderBox(string title, Control controls, bool expanded)
        {
            Title = title;
            expandedControls = controls;
            Expanded = expanded;

        }
        #endregion
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            Padding = new Padding(0);
            var expanderPadding = new Padding(0);
            var expanderbuttonSize = Terrain.Helpers.Globals.GridRowHeight;

            var layout = new DynamicLayout { Padding = padding };
            var headerLayout = new DynamicLayout { Padding = new Padding (4,0,0,0)};
            var expandedPanel = new Panel { Padding = expanderPadding };
            headerLayout.BeginHorizontal();
            expandButton = new ImageButton() { Width = expanderbuttonSize, Image = Expanded ? Appearance.Icon_Expand : Appearance.Icon_Collapse };
            header = new HoverLabel(labelStyle, Appearance.HoverTextColorDark) { Text = Title };
            headerLayout.Add(expandButton);
            headerLayout.Add(header);
            headerLayout.Add(new Panel { Width = 5 });

            layout.AddRow(headerLayout);
            layout.AddRow(expandedPanel);
            expandedPanel.Content = expandedControls;
            expandedControls.Visible = Expanded ? true : false;
            Content = layout;

            _timer = new UITimer { Interval = 0.015 };
            _timer.Elapsed += Timer_Elapsed;
        }
        private void Timer_Elapsed(object sender, EventArgs e)
        {
            _timer.Stop();
            int increment = (_targetHeight - _capturedHeight) / 3;
            if (Height>_targetHeight&& Expanded)  //in case ExpanderBox expands before controls are added
                _targetHeight = Expanded ? ((int)expandedControls.GetPreferredSize().Height) + headerHeight : headerHeight;

            if (Math.Abs(_targetHeight - Height) >= Math.Abs(increment)*2)
            {
                Height += increment;
                _timer.Start();
            }
            else { Height = _targetHeight; Height = -1; }
        }
        protected override void OnMouseUp(MouseEventArgs e)
        {
            base.OnMouseUp(e);
            bool _hover = e.Location.Y>0 && e.Location.Y < headerHeight;

            if (_hover)
            {
                InitializeAnimation();
            }
        }

        public void InitializeAnimation()
        {
            Height = _capturedHeight = Height;
            Expanded ^= true;

            expandButton.Image = Expanded ? Appearance.Icon_Expand : Appearance.Icon_Collapse;
            expandButton.UpdateImage();

            expandedControls.Visible = Expanded ? true : false;
            _targetHeight = Expanded ? ((int)expandedControls.GetPreferredSize().Height) + headerHeight : headerHeight;
            _timer.Start();
        }

    }
}

I am using this class as a template to have a hierarchy of expanders expand and collapse in the Panel.
Every time a child expander starts expanding/collapsing, it finds the parent expander and do this:
parentExpander.Height = -1;

The problem is, every time the Height of any expander changes, it results in the Height change of the parent expander.
Every time its Height changes, all the controls inside the expander redraws itself (as shown in the video clip). Even though there was just 4 animated intervals, each control is redrawn for 9 times within the animated timeframe, which results in laggy animation.
Is it the only way to do it? I tried "freezing" the controls with SuspendLayout() but it doesn't work. The children controls are still redrawing themselves many times over when Height of parentExpander is changing.

[Sonderwoods]

hi @WileyNg how did you end up solving this? ugly way would be override the redraw with a check before actually redrawing?

[WileyNg]

@Sonderwoods

a showcase of the animated expander after further development

2023-07-24.10-21-06.mp4

I have found out that every control would have to be redrawn for the animation to work.

for a animation of 4 intervals, if the animated control is nested in 4 different parent controls that change height during the animation, the number of redrawing times need to be up to 16 times at least or more.

That's why anything called by the OnPaint() method in any control needs to be as lean as possible.