D-loader's Codebloghttp://d-loader.dk/
Code adventures in .NETArticulate, blogging built on Umbraco1084http://d-loader.dk/archive/using-behaviors-in-xamarinforms/
.NETXamarinUsing behaviors in Xamarin.Forms<p>Behaviors are used to encapsulate logic, which can be attached to a specific component. This logic can be used to make the component behave in a specific way, for instance make a log entry every time a certain event is fired, or rearrange child entities. Support for behaviors were added to Xamarin.Forms version 1.3.0.</p>
<h2>Xamarin.Forms 1.3.0 Pre-release</h2>
<p>At the time of writing, Xamarin.Forms version 1.3.0 is in pre-release. You can download the Nu-Get packaged needed to follow this example from <a href="http://cdn.vanillaforums.com/xamarin.vanillaforums.com/FileUpload/81/5aecd7bf2b7a6ddc9a3aa99e2cd84c.zip">here</a>. You will need to drop the binding to the version of Xamarin.Forms you are currently using, and retarget all of your projects to use the Xamarin.Forms 1.3.0 pre-release assembly:</p>
<p><img style="width: 500px; height:252.53549695740367px;" src="http://d-loader.dk/media/1020/xamarin130nuget.png?width=500&amp;height=252.53549695740367" alt="Xamarin 1.3 NuGet" rel="1074" /></p>
<h2>Behaviors</h2>
<p>In order to make a behavior, we will create a new class which will inherit from <strong>Behavior&lt;T&gt;</strong>:</p>
<pre>using System;
using Xamarin.Forms;
namespace XamarinTests.Behaviors
{
public class ChangeColorButtonBehavior : Behavior&lt;Button&gt;
{
protected override void OnAttachedTo (Button bindable)
{
bindable.Clicked += ButtonClicked;
base.OnAttachedTo (bindable);
}
protected override void OnDetachingFrom (Button bindable)
{
bindable.Clicked -= ButtonClicked;
base.OnDetachingFrom (bindable);
}
private void ButtonClicked(object sender, EventArgs e)
{
var button = sender as Button;
button.BackgroundColor = button.BackgroundColor != Color.Blue ? Color.Blue : Color.Red;
}
}
}</pre>
<p>The way behaviors are implemented in Xamarin.Forms is slightly different from the way it is implemented by Microsoft in their ecosystem. First of all, we do not have access to the <strong>AssociatedObject</strong> member in our class. Instead, the associated object is injected in the relevant overrides instead. From here we can subscribe to all relevant events, and perform as usual. In this example, I am flipping the background color of a button every time it is clicked. It might not be the most exciting example, but it is sufficient to demonstrate concept of behaviors.</p>
<h2>Adding behaviors to elements</h2>
<p>Now that our behavior implementation is done, it is time to add it to a <strong>Button </strong>element:</p>
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:behaviors="clr-namespace:XamarinTests.Behaviors;assembly=XamarinTests"
x:Class="XamarinTests.BehaviorTestpage"&gt;
&lt;ContentPage.Content&gt;
&lt;StackLayout&gt;
&lt;Button Text="Click to chance color!"&gt;
&lt;Button.Behaviors&gt;
&lt;behaviors:ChangeColorButtonBehavior /&gt;
&lt;/Button.Behaviors&gt;
&lt;/Button&gt;
&lt;Button Text="Click to do nothing!" /&gt;
&lt;/StackLayout&gt;
&lt;/ContentPage.Content&gt;
&lt;/ContentPage&gt;</pre>
<p>This piece of XAML also shows a key difference between the way behaviors are implemented in Xamarin.Forms. Here it is not necessary to import a special namespace to handle behaviors, as every element inheriting from <strong>VisualElement </strong>contains an <strong>IList&lt;Behavior&gt; </strong>member. To access the <strong>ChangeColorButtonBehavior </strong>created earlier in this example, we import the namespace in which it resides using the standard <strong>clr-namespace </strong>import syntax. We then add the behavior to the first <strong>Button </strong>element, and now we are ready to test the behavior:</p>
<p><img style="width: 300.28735632183907px; height:500px;" src="http://d-loader.dk/media/1017/buttonclickblack.png?width=300.28735632183907&amp;height=500" alt="Button click black" rel="1071" /></p>
<p>When the view is loaded for the first time, both of the <strong>Button </strong>elements will contain their standard background color. If we click both of the <strong>Button</strong> elements now, we will get the following:</p>
<p><img style="width: 300.28735632183907px; height:500px;" src="http://d-loader.dk/media/1018/buttonclickblue.png?width=300.28735632183907&amp;height=500" alt="Button click blue" rel="1072" /></p>
<p>Here we can see the behavior attached to the first button in action. The background color of the first <strong>Button</strong> element is now blue. The second <strong>Button</strong> remains unaffected by the behavior, as it is not attached to that element. By clicking both of the Button elements again, we get the following:</p>
<p><img style="width: 300.28735632183907px; height:500px;" src="http://d-loader.dk/media/1019/buttonclickred.png?width=300.28735632183907&amp;height=500" alt="Button click red" rel="1073" /></p>
<p>Once again the background color of the second <strong>Button </strong>element remains unchanged, while the background color of the first <strong>Button</strong> element has been changed to red. By repeating this pattern we will see the color of the first <strong>Button </strong>element flip between blue and red.</p>Tue, 21 Oct 2014 17:30:00 +02002014-10-21T17:30:00+02:00