Bunifu Transition is a special component, that allows us to have transitions in our Windows Forms apps. 

To use Bunifu Transition simply locate it in your toolbox and drop it to your form. 

Bunifu Transition allows us to apply transitions to controls in this example we will use Bunifu Cards control and two Bunifu Flat Button controls

Our objective

We would like to achieve the following effect: 

when we press the Hide button, the Bunifu Cards Control will disappear and when we press the Show button, the control will be shown in an animated way (using the Bunifu Transition component).

In design mode, just click on each button and Visual Studio will generate for us two Click Event Handlers that we will use in order to achieve our effect:

C# code

private void bunifuFlatButton1_Click(object sender, EventArgs e)
{
bunifuTransition1.ShowSync(bunifuCards1, false, null);
bunifuCards1.Visible = true;
}
 
private void bunifuFlatButton2_Click(object sender, EventArgs e)
{
bunifuCards1.Visible = false;
}

VB.NET code

Private Sub BunifuFlatButton1_Click(sender As Object, e As EventArgs) Handles BunifuFlatButton1.Click

BunifuTransition1.ShowSync(BunifuCards1, False, null)

BunifuCards1.Visible = True

End Sub

Private Sub BunifuFlatButton2_Click(sender As Object, e As EventArgs) Handles BunifuFlatButton2.Click

BunifuCards1.Visible = False;

End Sub

Using the event handler for the bunifuFlatButton1, we call the ShowSync method that performs the transition applied on the control given by the first parameter. 

The second parameter is a boolean flag called parallel that we can use if we want our transition to be rendered in parallel for efficiency purposes.

The last parameter indicates the types of animation that we want to apply. We set it to null because we have already specified the animation type in design mode.

On the event handler for bunifuFlatButton2, we set the visible property of the cards control to false, because we want to hide it.

How to set the transition parameters

We need to specify the parameters for our transition in order to behave the way we want to. We can see all the parameters of our component in the Properties window (in Design Mode):

Customizing properties

By clicking on the transition component you will see the properties. The main ones are listed below:

  • Animation Type - This property specifies the type of animation that we want to apply to our control. By clicking on the property you will see all the animation options available to you
  • Interval - This property sets the speed of the frame rendering
  • MaxAnimationTime - This property sets the maximum amount of time for the animation rendering. If the animation is still working and the MaxAnimationTime was elapsed, then it will stop and the control will be rendered at its final state
  • TimeStep - This property sets the granularity of the frame processing

The result should be as indicated below

Custom events

Bunifu Transition has a set of custom events that we can use in order to perform different tasks when our animation reaches a specified point. The events are visible on the properties window as shown below

That's it!
We hope Bunifu Transition will help you create interactive user interfaces for your users. 

Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen. 

Did this answer your question?