Animations

When you run the application you will notice two animations:

• Blinking of the stock value that has been updated

• Smooth motion when changing the layout

Animations

Animation Extender

Wisej can add animations (even multiple animations) to any control or container simply by dropping one or more instances of the ⭐ Animation extender to a container. All the child controls will show a new Animation property in the designer.

In this case, the blink animation has been applied to the DataRepeater template panel without an event. Therefore the animation will run only if invoked by code.

Animation properties

Since the Animation extender exposes a complex property with child fields it is not replicated by the DataRepeater. With a simple handler for the ItemCloned event we can add the blink animation to the repeated items:

private void dataRepeater_ItemCloned(object sender, DataRepeaterItemEventArgs e)
{
    this.animation.GetAnimation(e.DataRepeaterItem).Name = "blink";
}

When the text of the value label is changed by the data binding layer, we handle the TextChanged property and run the animation.

private void labelValue_TextChanged(object sender, EventArgs e)
{
    // animate the item when the value changes.
    var control = (Control)sender;
    if (control.Parent != null)
        this.animation.Run(control.Parent);
}

Stylesheet Extender

A second way to add simple animations is to use the Stylesheet extender to add a transition style to the elements.

MainView with the Stylesheet extender

For the MainView, we simply added a general transition to all div elements:

div {
    transition: top 250ms, left 250ms
}

When Wisej moves the controls into their new position because the responsive property for a client profile kicks in, the element will move to the target location in 250 milliseconds.