Creating Behavior in Silverlight

Behaviors allow designers to take advantage of new levels of interactivity decoratively, without writing code. A behavior is something you attach to an element, modifying the way in which the element should present itself, or how the element should respond to user interactions.

There are many great behaviors available in Expression Blend inside Assets > Behavior section, we can just drag and drop any behavior on to appropriate item and set some relevant properties, that’s it our behavior works fine.

In this article i am going to demonstrate how to create a simple behavior, for demonstration purpose i am going to create a messagebox behavior.

Step 1:

Let us start with a simple Silverlight application. Fire up Visual Studio 2010, and click File->New to select a Silverlight 4.0 application, name it accordingly, and click OK.

Fire Up VisualStudio

Step 2:

Visual Studio will create a Solution. Right-click on the solution in the Solution Explorer and select Add then New Project…

Add New Project file in the Solution

Step 3:

This time create a Silverlight Class Library, and name it accordingly and rename the Class1.cs to PopupBegaviour.

Silverlight Class Library

Step 4:

Now we need to add a reference called System.Windows.Interactivity.dll In the Silverlight Class Library , this assembly located at:

C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight\System.Windows.Interactivity.dll

Right click on references a popup opens and in that find for System.Windows.Interactivity and press OK.

Add Reference

Select Inerativity Dll

Step 5:

Add a Namespace inside the PopupBegaviour class

using System;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;

namespace PopupBehavior
{
public class PopupBegaviour
{

}
}

Now Inherit the OpenWindow from TargetedTriggerAction<DependencyObject>,

TargetedTriggerAction<DependencyObject> means that while this behavior can be attached to any element, the Target can only
be a Dependency.

and now create a method to invoke the popup.

protected override void Invoke(object o)
{
MessageBox.Show(message);
}

Instead of having the message box’s contents be set only via code, we’d like to make it a Dependency Property so that anybody who uses this Action can easily set the text displayed via Expression Blend’s Properties Inspector. The code for doing that, is pretty straightforward.

public string message
{
get{return (string)GetValue(MessageProperty);}
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(“Message”,typeof(string),typeof(OpenWindow), new PropertyMetadata(null));

What we are going to do is put both of these chunks of code together into our action. Below you will find the full code for our ShowMessageBox Action with the additions you need to make beyond the code that is already there more clearly visible:

using System;
using System.Windows.Interactivity;

namespace OpenWindow
{
public class OpenWindow : TargetedTriggerAction<DependencyObject>
{

public string message
{
get{return (string)GetValue(MessageProperty);}
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(“Message”,typeof(string),typeof(OpenWindow), new PropertyMetadata(null));

protected override void Invoke(object o)
{

MessageBox.Show(message);
}
}
}

Step 6:

Now build the solution, and go to the Silverlight solution right click on References and add references that is crated after our Build, here it is OpenWindow.dll

add this reference.

Add reference for OpenWindow

Step 7:

Open  the Mainpage.xaml in Blend by right clicking on page you will see “Open in Expression Blend” select this option.

Open in Expression Blend

Step 8:

Now add a button control and select assets panel > go to Behaviors section, ours behavior will be there

Asstes panel to choose Behavior

now Drag and Drop on to the Button which is on art board,

Drag Behavior

now in side the property panel we can see the properties of our newly created behavior.

Properties Window for Behavior

That’s it now save and run our application and click on Button you will see a popup after that.

Popup

Copying/Exporting XAML from Expression Design to Expression Blend

Expression Design and Expression Blend are from same family of Expression studio,we can work on both for designing our applications, the only difference between them is , in Blend we have all Silverlight/WPF/WP 7 controls but in Expression design we don’t see any controls, but we can create our layout, it contains plenty of options to design our application’s layout.Expression Design is same as Adobe Illustrator including short cut keys.

As i said before we can design our application’s design  by using Expression design, also we can export our design to many formats like

  • XAML Silverlight 3 canvas: Select this option if you want to paste objects that can be animated or manipulated interactively in Silverlight 3 project or Windows Presentation Foundation (WPF) project in Expression Blend.
  • XAML WPF Resource dictionary: Select this option if you want to paste your objects as a collection of resources that you want to use as a resource dictionary in a WPF project in Expression Blend. Resource dictionaries are a collection of custom files or styles that comprise the different design elements of your application. You can add a resource dictionary to any WPF project in Expression Blend, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project.
  • XAML Silverlight 4/WPF canvas: Select this option if you want to paste your objects as a collection of resources that you want to use as a resource dictionary in a WPF project in Expression Blend. Resource dictionaries are a collection of custom files or styles that comprise the different design elements of your application. You can add a resource dictionary to any WPF project in Expression Blend, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project.
  • PNG
  • JPEG
  • GIF
  • TIFF
  • BMP
  • WDP(HD Photo)
  • PSD
  • PDF

In this Article i am going to explain how to Exporting or copy XAML Silverlight 3 canvas and how to add them in Expression Blend.

For this article purpose i have created a sample cloud design in Expression Design.

Design View

Now we will see how we can copy or export xaml to Expression Blend, well there are two ways, i am going to explain both ways.

Copy XAML:

to copy first select the object which you want to use in Blend, and then go to Edit menu > Select  Copy XAML

Copy Xaml from Edit menu

now we have a copy of selected object in our clip board, now open Expression blend and open the page on where you want to use this object, select Edit menu and select Paste or press Ctr+V to paste on your Art board.

Paste Option

Object on Blends's Art board

Export XAML:

to Export XAMl first select the object which you want to use in Blend, and then go to File menu > Select  Export option, Short cut key : Ctr+E,

Export Option

then a popup window opens. there will be many options (don’t worry about the options, i have explained about the options at end of this article) in that popup.

Popup

Go to the Export Properties and select format Combobox, in the available items from combo box select XAML Silverlight 3 Canvas and give the name if you want and change the location of file where you want to save, and then press Export all button.

Explanation of  options available on Export Popup Window:

  • Group by This option only appears if you choose the XAML WPF Resource Dictionary format. You can choose from three options: Document, Layers, and Objects. Each option dictates how the objects in the resource dictionary will be grouped once you paste the copied object into Blend.

Here are the other options that you can adjust:

  • Always name objects Select this option to give a default name to unnamed objects. The name appears in the XAML code.
  • Place grouped objects in a XAML layout container Select to wrap each grouped object in your Expression Design document in a separate canvas layout panel.

The Text options determine how text in your objects will be handled. These options do not appear if you choose the XAML WPF Resource Dictionary format.

  • Editable TextBlock Select this option to keep the text as individual, editable characters, even if the appearance of the text may change. Note that, as the message reads, you may lose some formatting in the conversion to XAML. Also, some fonts are not supported. For a complete list of the supported and unsupported text attributes, see the XAML text support topic in Help.
  • Paths Select this option to convert each character to outlines. You will not be able to edit the text.

Text Options

The Live effects options determine how Design handles the effects that you’ve applied to your objects.

  • Rasterize all Select this option to rasterize your live effects. If you clear this check box, some objects might be exported as solid lines or fills.
  • Convert to XAML effects Exports only those live effects currently supported by XAML code. As you can see in the below graphic, only Drop Shadow and Gaussian Blur will convert to XAML.

Live Effects

That’s all there is to it. Thanks for reading this article.

Using Fluid Move Behavior with listbox

What is the FluidMove Behavior ?
The FluidMove behavior animates changes caused by layout such as resizing a window or removing some items from a StackPanel. Layout changes by default are sudden with no feedback or life. Any content that is the victim of a layout change simply appears in its new location.

In this Article i will show you how we can work with listbox by using FluidMove Behavior..

Quick view:

View Live: Here

Download Source

Step 1:
First, launch Expression Blend 3/4 and create a new Silverlight project. For my example, I will be using a Silverlight project
Step 2:
Crete some data to display on listbox, to create data, open “Data” tab, see below image.

Data tab

Press New Sample Data.., it will opens a popup where you have to enter a name, after this step your default data will be present on Data tab, now if you can see Property 2 there is a small icon  , press this button, a dropdown opens in which you can see a default type “Boolean” is there, change it to “Image”. See in the below image.

Cahnge Value

Now our data is ready to use.Once our data has been created, insert a Listbox control into your LayoutRoot, and select “property1” from Data tab, drag and drop on to our listbox control,with this list of items will be populate on our listbox control.

Now inside data tab, press DetailsMode icon see the below image.

Now Seledt Property2 and drag and drop on to the Layout root exactly beside the listbox control, see the below image.

Now adjust the image to stretch entire grid, like in the below image.

Now go to assets panel -> select Behaviors -> select FluidMove Behavior drag and drop on to Single image section, see in the below image.

inside properties tab, you can see the properties of FluidMove Behavior, select easeX and easeY properties to your required easing functions, and in the initial Tag select DataContext, and save. See in the below image.

Now you need to change some properties for listbox item in it’s style. Right click on Listbox go to Edit additional templates, select Edit Generated Items select Edit Current, this step will take you to edit the item template in which our image displays.

Inside the Objects and template select “Image” and inside Assets panel select “FluidMoveSetTagBehavior” and drag and drop on to image, then inside the properties window of FluidMoveSetTagBehavior change SetTagBehavior value to “DataContext”

now exit from the template and run the application you will see a niche fluid animation.