Xamarin.Forms Behaviors: ScaleAction

Previously, I demonstrated using the EventHandlerBehavior and TranslateAction classes to run a translation animation when an event occurs. The Behaviors Library for Xamarin.Forms has the notion of behaviors and actions. A behavior is attached to a control and listens for something to happen, such as an event firing. When the “something” happens, it triggers one or more actions, such as invoking a method or command. Actions are invoked by behaviors and executed on a selected control.

In this blog post, I’ll demonstrate using the EventHandlerBehavior and ScaleAction classes to run a scaling animation when an event occurs.

Scaling a VisualElement when an Event Fires

The EventHandlerBehavior class listens for a specified event to occur, and executes one or more actions in response. It requires you to set an EventName property to the event that you want the behavior to listen to, and an Actions property to one or more actions that should be executed in response to the event firing. Note that the Actions property of the EventHandlerBehavior instance is set indirectly by creating the ScaleAction instance as a child of the EventHandlerBehavior instance.

The ScaleAction class performs a scaling animation, which expands or contracts a VisualElement when invoked, and allows the following optional properties to be set:

• TargetObject – an object that is the VisualElement on which to run the animation. If this value is omitted the object the behavior is attached to will be set as the target on which to run the animation.
• FinalScale – a double that specifies the value of the Scale property to animate to. If this value is omitted the default value of 1 is used.
• Duration – an int that represents the length of the animation in milliseconds. If this value is omitted the default value of 250ms is used.
• EasingFunction – an EasingFunction that specifies any velocity changes in the animation. If this value is omitted the default value of the Linear easing function is used.
• IsRelative – a boolean that specifies whether to perform relative scaling. If this value is omitted the default value of false will be used. Relative scaling obtains the current Scale property value for the start of the animation, and then scales from that value to the value plus the value defined by the FinalScale property.
• Await – a boolean that represents whether the animation should be awaited, or whether it should be allowed to complete in the background. If this value is omitted the default value of false will be used.

The following code example demonstrates using the EventHandlerBehavior and ScaleAction classes to implement a scaling animation that expands and contracts an Image control when a Button is clicked:

<Image x:Name="image" Source="monkey.png" Opacity="0" VerticalOptions="CenterAndExpand" />
<Button Text="Run Animation">
    <Button.Behaviors>
        <behaviors:EventHandlerBehavior EventName="Clicked">
            <behaviors:ScaleAction TargetObject="{x:Reference image}" 
                                   FinalScale="2.0" 
                                   Duration="3000" 
                                   EasingFunction="SpringIn"
                                   Await="true"/>
            <behaviors:ScaleAction TargetObject="{x:Reference image}" 
                                   FinalScale="1.0" 
                                   Duration="3000" 
                                   EasingFunction="SpringOut" />
        </behaviors:EventHandlerBehavior>
    </Button.Behaviors>
</Button>

When the Button.Clicked event fires, two ScaleAction instances execute over 6 seconds. The first ScaleAction instance expands the Image instance to twice its size over 3 seconds (3000 milliseconds), and uses the SpringIn easing function to cause the animation to accelerate towards the end. Once the first ScaleAction instance has executed the second ScaleAction instance begins. This is because the first ScaleAction instance sets the Await property to true. The second ScaleAction instances causes the Image to contract back to its original size over 3 seconds (3000 milliseconds), and uses the SpringOut easing function to cause the animation to decelerate towards the end.

The advantage of using the ScaleAction is that it’s possible to invoke animations through XAML, rather than having to use C#. In addition, when combined with behaviors, a scaling animation can easily be invoked from XAML when a behavior occurs, such as event firing, or when a piece of data changes.

The sample application that this code comes from can be downloaded from GitHub.

Summary

The ScaleAction class allows scaling animations to be invoked through XAML when a behavior occurs, such as an event firing, or when a piece of data changes.

Xamarin.Forms Behaviors: TranslateAction

Previously, I demonstrated using the EventHandlerBehavior and FadeAction classes to run a fade animation when an event occurs. The Behaviors Library for Xamarin.Forms has the notion of behaviors and actions. A behavior is attached to a control and listens for something to happen, such as an event firing. When the “something” happens, it triggers one or more actions, such as invoking a method or command. Actions are invoked by behaviors and executed on a selected control.

In this blog post, I’ll demonstrate using the EventHandlerBehavior and TranslateAction classes to run a translation animation when an event occurs.

Translating a VisualElement when an Event Fires

The EventHandlerBehavior class listens for a specified event to occur, and executes one or more actions in response. It requires you to set an EventName property to the event that you want the behavior to listen to, and an Actions property to one or more actions that should be executed in response to the event firing. Note that the Actions property of the EventHandlerBehavior instance is set indirectly by creating the TranslateAction instance as a child of the EventHandlerBehavior instance.

The TranslateAction class performs a translation animation, which moves a VisualElement, when invoked, and allows the following optional properties to be set:

• TargetObject – an object that is the VisualElement on which to run the animation. If this value is omitted the object the behavior is attached to will be set as the target on which to run the animation.
• X – a double that specifies the number of pixels to move the TargetObject horizontally. If this value is omitted the default value of 1 is used.
• Y – a double that specifies the number of pixels to move the TargetObject vertically. If this value is omitted the default value of 1 is used.
• Duration – an int that represents the length of the animation in milliseconds. If this value is omitted the default value of 250ms is used.
• EasingFunction – an EasingFunction that specifies any velocity changes in the animation. If this value is omitted the default value of the linear easing function is used.
• Await – a boolean that represents whether the animation should be awaited, or whether it should be allowed to complete in the background. If this value is omitted the default value of false is used.

The following code example demonstrates using the EventHandlerBehavior and TranslateAction classes to implement a compound animation that moves an Image control around the screen when a Button is clicked:

<Image x:Name="image" Source="monkey.png" Opacity="0" VerticalOptions="CenterAndExpand" />
<Button Text="Run Animation">
    <Button.Behaviors>
        <behaviors:EventHandlerBehavior EventName="Clicked">
            <behaviors:TranslateAction TargetObject="{x:Reference image}" 
                                       X="-100" 
                                       Y="0" 
                                       Duration="1000" 
                                       Await="true" />
            <behaviors:TranslateAction TargetObject="{x:Reference image}" 
                                       X="-100" 
                                       Y="-100" 
                                       Duration="1000" 
                                       Await="true" />
            <behaviors:TranslateAction TargetObject="{x:Reference image}" 
                                       X="100" 
                                       Y="100" 
                                       Duration="1000" 
                                       Await="true" />
            <behaviors:TranslateAction TargetObject="{x:Reference image}" 
                                       X="0" 
                                       Y="100" 
                                       Duration="1000" 
                                       Await="true" />
            <behaviors:TranslateAction TargetObject="{x:Reference image}" 
                                       X="0" 
                                       Y="0" 
                                       Duration="1000" 
                                       Await="true" />
        </behaviors:EventHandlerBehavior>
    </Button.Behaviors>
</Button>

When the Button.Clicked event fires, a series of TranslateAction instances creates a compound animation, which is a sequential combination of animations. Specifically, an Image is translated around the screen over 5 seconds (5000 milliseconds). The translation of the Image uses five translation animations, with the Await property of each TranslateAction instance indicating that each animation executes sequentially. Therefore, subsequent animation methods execute after the previous method has completed,

The advantage of using the TranslateAction is that it’s possible to invoke animations through XAML, rather than having to use C#. In addition, when combined with behaviors, a translation animation can easily be invoked from XAML when a behavior occurs, such as an event firing, or a when a piece of data changes.

The sample application that this code comes from can be downloaded from GitHub.

Summary

The TranslateAction class allows translation animations to be invoked through XAML when a behavior occurs, such as an event firing, or when a piece of data changes.

Xamarin.Forms Behaviors: FadeAction

Previously, I mentioned that I’d added a number of new actions to the Behaviors Library for Xamarin.Forms, to support animations. The library has the notion of behaviors and actions. A behavior is attached to a control and listens for something to happen, such as an event firing. When the “something” happens, it triggers one or more actions, such as invoking a method or command. Actions are invoked by behaviors and executed on a selected control.

In this blog post, I’ll demonstrate using the EventHandlerBehavior and FadeAction classes to run a fade animation when an event occurs.

Fading a VisualElement when an Event Fires

The EventHandlerBehavior class listens for a specified event to occur, and executes one or more actions in response. It requires you to set an EventName property to the event that you want the behavior to listen to, and an Actions property to one or more actions that should be executed in response to the event firing. Note that the Actions property of the EventHandlerBehavior instance is set indirectly by creating the FadeAction instance as a child of the EventHandlerBehavior instance.

The FadeAction class performs a fade animation when invoked, and allows the following optional properties to be set:

• TargetObject – an object that is the VisualElement on which to run the animation. If this value is omitted the object the behavior is attached to will be set as the target on which to run the animation.
• FinalOpacity – a double that specifies the value of the Opacity property to fade to. If this value is omitted the default value of 1 is used.
• Duration – an int that represents the length of the animation in milliseconds. If this value is omitted the default value of 250ms is used.
• EasingFunction – an EasingFunction that specifies any velocity changes in the animation. If this value is omitted the default value of the linear easing function is used.
• Await – a boolean that represents whether the animation should be awaited, or whether it should be allowed to complete in the background. If this value is omitted the default value of false is used.

The following code example shows an example of using the EventHandlerBehavior and FadeAction classes to fade in an Image control when a Button is clicked:

<Image x:Name="image" Source="monkey.png" Opacity="0" VerticalOptions="CenterAndExpand" />
<Button Text="Run Animation">
    <Button.Behaviors>
        <behaviors:EventHandlerBehavior EventName="Clicked">
            <behaviors:FadeAction TargetObject="{x:Reference image}" 
                                  FinalOpacity="1.0" 
                                  Duration="2000" 
                                  Await="true" />
        </behaviors:EventHandlerBehavior>
    </Button.Behaviors>
</Button>

When the Button.Clicked event fires, the FadeAction fades in the Image instance over 2 seconds (2000 milliseconds), and the animation is awaited. This means that if there were subsequent animations defined, they would only execute after the fade animation has completed,

The advantage of using the FadeAction is that it’s possible to invoke animations through XAML, rather than having to use C#. In addition, when combined with behaviors, a fade animation can easily be invoked from XAML when a behavior occurs, such as an event firing, or a when a piece of data changes.

The sample application that this code comes from can be downloaded from GitHub.

Summary

The FadeAction class allows fade animations to be invoked through XAML when a behavior occurs, such as an event firing, or when a piece of data changes.