Xamarin Forms fade to hidden?

Question

In my current app, I have a bunch of buttons which can hide or show their corresponding stackLayout. First, i tried using IsVisble property, but this causes a flash, now im at using LayoutTo() which also flashes?

My code is as below:

async void btnStrike_Clicked(object sender, EventArgs args)
        {
            var layout = this.FindByName<StackLayout>("stkStrikeInfo");
            var rect = new Rectangle(layout.X, layout.Y, layout.Width, layout.Height - layout.Height);
            await layout.LayoutTo(rect, 2500, Easing.Linear);
        }

Id like to animate the height!

Edit:

I found the following piece of code, which removes the Stacklayout from the page. The issue now is that the view isnt updating?

Answer 1

I think you'll have better luck with just a default animation that reduces the height of the layout you want to hide to zero.

void btnStrike_Clicked(object sender, EventArgs args)
{
    // get reference to the layout to animate
    var layout = this.FindByName<StackLayout>("stkStrikeInfo");

    // setup information for animation
    Action<double> callback = input => { layout.HeightRequest = input; }; // update the height of the layout with this callback
    double startingHeight = layout.Height; // the layout's height when we begin animation
    double endingHeight = 0; // final desired height of the layout
    uint rate = 16; // pace at which aniation proceeds
    uint length = 1000; // one second animation
    Easing easing = Easing.CubicOut; // There are a couple easing types, just tried this one for effect

    // now start animation with all the setup information
    layout.Animate("invis", callback, startingHeight, endingHeight, rate, length, easing);
}

If the layout is already hidden and you want to show it, you would replace

double startingHeight = layout.Height;
double endingHeight = 0;

with

double startingHeight = 0;
double endingHeight = 55;

The 55 is just an arbitrary height, if you want it to go back to the height from before, you would save the previous height to a variable before you hide it and use that saved height instead of 55.