XFBehaviors: Open Source Xamarin.Forms behaviors library
13 January 2016

XFBehaviors: Open Source Xamarin.Forms behaviors library

From Xamarin.Forms 1.3 our XAML can use behaviors and triggers to execute actions without need to invoke logic in our ViewModels. This is a largely known feature in Windows XAML universe, where behaviors and triggers support is there from the beginning with a great selection of actions and behaviors ready to use in our apps.

In Xamarin.Forms, we get support for Behaviors and Triggers, but there isn't any predefined actions we can use right out of the box. In most apps, there are some common tasks that can be solved using behaviors, so having a library to reuse across apps can speed up our development.

XFBehaviors

With this in mind i created a little open source project, called XFBehaviors with some behaviors ready to use in our code. The starting point was the behaviors library on Windows XAML, having some really good features:

  1. Being able to navigate from one page to another, without need to use code behind or a command.
  2. Invoke commands from a control that doesn't have the command property, in response to an event.
  3. Create and execute animations in XAML:
    1. Fade, Scale, Rotate.
    2. Using predefined easing functions.
    3. Activated based on events like focus, unfocus, attached...

There is more behaviors or triggers that can be predefined, and i hope to continue working on adding more features. For now, you can clone XFBehaviors and a sample project from GitHub:

gitHub-download-butt...

 

 

 

How to use XFBehaviors

To use XFBehaviors in your own project, just clone it and compile the XFBehaviors project. It's the only needed project to include in your app, no external dependencies. To use it in your XAML page, include a new namespace mapping in your page header definition:

xmlns:xfbehaviors="clr-namespace:XFBehaviors.Behaviors;assembly=XFBehaviors"
xmlns:xftriggers="clr-namespace:XFBehaviors.Triggers;assembly=XFBehaviors"

After doing this, you can start using the predefined behaviors in your page's controls. All behaviors are used in the same way. Inside your control definition, open the behavior attribute and insert the behavior you want to use:

<Entry>
  <Entry.Behaviors>
    <!-- the behavior declaration goes here.-->
  </Entry.Behaviors>
</Entry>

Lets take a look at how to use every one available.

Common properties

There are some properties all animation behaviors relay upon:

  • Duration: Animation time, specified in milliseconds.
  • OnEvent: Predefined event that will launch the animation, from the EventTypeEnumerator enumerator:
    • Focused
    • Unfocused
    • ChildAdded
    • ChildRemoved
    • Attached
    • Detaching
  • EasingMethod: Predefined easing function to use with the animation to modify distribution of value changes in time, from the EasingMethodEnumerator:
    • BounceIn/BounceOut
    • CubicIn/CubicOut/CubicInOut
    • Linear
    • SinIn/SinOut/SinInOut
    • SpringIn/SpringOut

FadeBehavior

The FadeBehavior allows you to add a FadeIn/FadeOut animation to your controls. You can use the common properties to define the length (time value), the event and the easing method for the fade animation. Also you have a FinalOpacity property that allows you to specify the final value of the Opacity property for the attached control. The start value will be the Opacity property value at the moment the animation begins. This allows to create linked animations, with multiple behaviors:

<Entry Text="Fade in/out sample" Opacity="0" HorizontalOptions="Center">
  <Entry.Behaviors>
    <xfbehaviors:FadeBehavior FinalOpacity="0.5" Duration="3000" OnEvent="Attached" EasingMethod="CubicIn"/>
    <xfbehaviors:FadeBehavior FinalOpacity="1" Duration="250" OnEvent="Focused"/>
    <xfbehaviors:FadeBehavior FinalOpacity="0.5" Duration="250" OnEvent="Unfocused"/>
  </Entry.Behaviors>
</Entry>

ScaleBehavior

The ScaleBehavior allows you to create an scale increasing/decreasing animation in your control. For example changing a bit the scale in an Entry field when the user taps on it. To specify the target scale, you can use the FinalScale property of the behavior:

<Entry Text="Scale sample" Opacity="1" HorizontalOptions="Center">
  <Entry.Behaviors>
    <xfbehaviors:ScaleBehavior FinalScale="0.2" Duration="3000" OnEvent="Attached"/>
    <xfbehaviors:ScaleBehavior FinalScale="1.5" Duration="250" OnEvent="Focused"/>
    <xfbehaviors:ScaleBehavior FinalScale="1" Duration="250" OnEvent="Unfocused"/>
  </Entry.Behaviors>
</Entry>

RotateBehavior

The rotateBehavior allows to modify the rotation of the controls, animating it. The same way FadeBehavior and ScaleBehavior have FinalOpacity and FinalScale properties, RotateBehavior have a FinalAngle property, where you can specify the angle for the control when the animation finishes. But, in this case, you can use FinalAngle with a Value greater than 360, to make the control rotate more than one time for the target duration of the animation. Also, RotateBehavior have another property, called Axis, to specify the Axis to apply the rotation to. This property is specified using the RotationAxisEnumerator enumerator:

  • X
  • Y
  • Z

With all of this, you can make different definitions like these:

<!-- RotateBehavior Axis X -->
<BoxView WidthRequest="200" HeightRequest="200" BackgroundColor="Blue" HorizontalOptions="Center">
  <BoxView.Behaviors>
    <xfbehaviors:RotateBehavior FinalAngle="720" Duration="6000" OnEvent="Attached" Axis="X"/>
  </BoxView.Behaviors>
</BoxView>
<!-- RotateBehavior Axis Y -->
<BoxView WidthRequest="200" HeightRequest="200" BackgroundColor="Red" HorizontalOptions="Center">
  <BoxView.Behaviors>
    <xfbehaviors:RotateBehavior FinalAngle="720" Duration="6000" OnEvent="Attached" Axis="Y"/>
  </BoxView.Behaviors>
</BoxView>
<!-- RotateBehavior Axis Z -->
<BoxView WidthRequest="200" HeightRequest="200" BackgroundColor="Green" HorizontalOptions="Center">
  <BoxView.Behaviors>
    <xfbehaviors:RotateBehavior FinalAngle="720" Duration="6000" OnEvent="Attached" Axis="Z"/>
  </BoxView.Behaviors>
</BoxView>

NavigateToPageAction

This one isn't a behavior, but a triggers action. Very useful when you need to navigate to another page without the need for any logic behind it. Maybe you want to navigate to an about page from a button... This action allows you to specify the fully qualified name of the page class to navigate to as part of the NavigateToPageBinding property:

<Button Text="Navigate to second view" Opacity="1" HorizontalOptions="Center">
  <Button.Triggers>
    <EventTrigger Event="Clicked">
      <xftriggers:NavigateToPageAction>
        <xftriggers:NavigateToPageAction.TargetPageBinding>
          <xftriggers:NavigateToPageBinding TargetPage="XFBehaviorsSample.Views.SecondView, XFBehaviorsSample"/>
        </xftriggers:NavigateToPageAction.TargetPageBinding>
      </xftriggers:NavigateToPageAction>
    </EventTrigger>
  </Button.Triggers>
</Button>

The TargetPage property of the NavigateToPageBinding class is the one specifying the page class. Take into account you need to specify the full qualified name and the assembly containing the page. Internally the NavigateToPageAction uses reflection to search for the page and perform the navigation.

InvokeCommandAction

Last but not least, InvokeCommandAction allows you to Invoke a command defined in your ViewModel from any Control Trigger. Normally, you can only invoke commands from Button controls using the Command property.  With the InvokeCommandAction action, you could invoke a command and  specify a command parameter from any control. For example, you could do it from a BoxView Clicked event:

<Entry Text="Change text to invoke command" Opacity="1" HorizontalOptions="Center">
  <Entry.Triggers>
    <EventTrigger Event="TextChanged">
      <xftriggers:InvokeCommandAction>
        <xftriggers:InvokeCommandAction.CommandBinding>
          <xftriggers:InvokeCommandBinding Command="{Binding BindingContext.MyCommand, 
                                                             Mode=TwoWay, 
                                                             Source={x:Reference contentPage}}"/>
        </xftriggers:InvokeCommandAction.CommandBinding>
      </xftriggers:InvokeCommandAction>
    </EventTrigger>
  </Entry.Triggers>
</Entry>

Further development...

That's only a peak at what Xamarin.Forms Behaviors and Triggers could offer to us. I will try to continue adding features, behaviors and triggers to XFBehaviors. If you have anything you would love to see implemented, just ping me in the comments to add it to the backlog.

Hope this could help to use Behaviors in your Xamarin.Forms apps.

Happy Coding!

Related

10.00 ( 4 reviews)

Post a Comment