Wednesday, 13 April 2016

Xamarin.Forms Behaviors: DataChangedBehavior and SetPropertyAction

Previously, I demonstrated using the DataChangedBehavior and InvokeMethodAction classes to invoke one or more methods when data changes. 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 DataChangedBehavior and SetPropertyAction classes to set one or more properties when data changes.

Setting a Property when Data Changes

The DataChangedBehavior class listens for the bound data to meet a specified condition, and executes one or more actions in response. It requires you to set the following properties:

  • Binding – an object that represents the bound object that the behavior will listen to.
  • ComparisonCondition – a ComparisonCondition enumeration value that represents the comparison to be performed between the values of the Binding and Value properties. The enumeration values are: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual.
  • Value – an object that represents the value to be compared with the value of the Binding property.
  • Actions – one or more actions that should be executed in response to the bound data changing. Note that this property is set indirectly.

The SetPropertyAction class sets a specified property when invoked. It requires you to set a TargetObject property to an object that exposes the property of interest, a PropertyName property to the name of the property to be set, and a Value property to an object that represents the property value to be set.

The following code example shows an example of using the DataChangedBehavior and SetPropertyAction classes to set the colour of BoxView control and a ViewModel property as a Slider value changes:

<ContentPage.BindingContext> <local:SetPropertyDemoPageViewModel /> </ContentPage.BindingContext> <Slider x:Name="slider" Minimum="0" Maximum="100"> <Slider.Behaviors> <behaviors:DataChangedBehavior Binding="{Binding Path=Value, Source={x:Reference slider}}" ComparisonCondition="LessThan" Value="1"> <behaviors:SetPropertyAction TargetObject="{x:Reference changingBoxView}" PropertyName="Color" Value="{StaticResource ColorAqua}" /> <behaviors:SetPropertyAction TargetObject="{Binding}" PropertyName="ColourText" Value="Aqua" /> </behaviors:DataChangedBehavior> <behaviors:DataChangedBehavior Binding="{Binding Path=Value, Source={x:Reference slider}}" ComparisonCondition="GreaterThanOrEqual" Value="1"> <behaviors:SetPropertyAction TargetObject="{x:Reference changingBoxView}" PropertyName="Color" Value="{StaticResource ColorRed}" /> <behaviors:SetPropertyAction TargetObject="{Binding}" PropertyName="ColourText" Value="Red" /> </behaviors:DataChangedBehavior> ... </Slider.Behaviors> </Slider> <BoxView x:Name="changingBoxView" WidthRequest="100" Color="Aqua" HeightRequest="100" ... /> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label Text="Slider value:" /> <Label BindingContext="{x:Reference slider}" Text="{Binding Value, StringFormat='{0:F0}'}" /> </StackLayout> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label Text="Colour:" /> <Label Text="{Binding ColourText}" /> </StackLayout>

When the Value property of the Slider changes a series of DataChangedBehavior instances are executed. Each behavior instance compares the Value property of the Slider against a value, and executes two SetPropertyAction instances if the comparison is true. The first SetPropertyAction instance changes the Color property value of the BoxView, while the second SetPropertyAction instance sets the ColourText property of the SetPropertyDemoViewModel instance. Note that the Actions property of each DataChangedBehavior instance is set indirectly by creating the SetPropertyAction instances as children of the DataChangedBehavior instances.

The advantage of combining the DataChangedBehavior and SetPropertyAction classes is that properties of controls and ViewModels can easily be set when data changes, therefore removing boiler-plate property setting code from code-behind and ViewModels.

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

Summary

The DataChangedBehavior class listens for the bound data to meet a specified condition, and executes one or more actions in response. The SetPropertyAction class sets a specified property when invoked. The advantage of combining the DataChangedBehavior and SetPropertyAction classes is that properties of controls and ViewModels can easily be set when data changes, therefore removing boiler-plate property setting code from code-behind and ViewModels.

No comments:

Post a Comment