Windows Phone From Scratch #11 – Behaviors

Behaviors are, in my experience, under-appreciated by many Silverlight and WindowsiStock_ShockedManAtPCXSmall Phone programmers; possibly because they are most easily used from Expression Blend, which itself is greatly under-appreciated. 

A behavior is an encapsulation of logic within Xaml – it is essentially, declarative logic.  As such it has many advantages over writing the same logic in C#, notably that of re-use.

Behaviors also make it possible to create custom logic and hand it over to a designer without asking that designer to see or understand the internal logic.

Replacing Code With Behaviors

To see behaviors at work, let’s start with the code we finished yesterday (download from here). 

Start by renaming the solution and project to WPFS11. Open the project in Visual Studio and open MainPage.xaml.cs where you will remove all the event handling code (all that should be left when you are done is a call to InitializeComponent() in the constructor.

Save all your files and open the solution in Blend.   In the Objects and Timline tab click to expand LayoutRoot, ContentPanel, SexStackPanel exposing the Male and Female RadioButtons.

Dragging Behaviors Onto Controls

Click on the Assets panel and then click on Behaviors.  Locate GoToStateAction and drag it onto the Male RadioButton.  Click on the Properties window and note that the SourceName is Male (the RadioButton you just attached the Behavior to) and the EventName is Click.  Click the ellipses to the far right of the TargetName field and choose the OK button.  Finally, drop down the StateName field  and choose Dirty.

You just attached a behavior to the Male RadioButton that will cause the OK button to go to the Dirty state (lighting the red dot) when the RadioButton is clicked.  Do the exact same thing for the Female button. (Or, if you are feeling feisty, set the Female RadioButton to change the OK button’s state to Clean).

Finally, click on Resources and open the OK button for template editing.  Here you will have access only to the component parts of the button, so drag GoToStateAction to the grid, so that clicking anywhere in the grid will trigger the behavior. 

Click on Properties, and note that the EventName has been pre-set to MouseLeftButtonDown (this being a grid, it doesn’t have a click event).  Leave all the fields as they are except for StateName which you will set to DefaultSavedState.

Run the application and note that the button lights as before, but this time with nothing in the code-behind.  All the logic is in the behaviors, which you set in the properties window of Blend

Examining the Xaml

In either Blend or in Visual Studio open MainPage.xaml and search for GoToStateAction… you’ll see that the logic is embedded in the Xaml for each of the controls.

To fully understand the Xaml you’ll need to understand Behaviors, Triggers and Actions which I’ll cover in the next tutorial in this series.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in Patterns & Skills. Bookmark the permalink.