In this example I have used the InkPresenter to capture the mouse and produce vector paths. I also have a basic interface to change the colour and path size. I then use that captured data to duplicate the vector path upon 16 faces each rotating around a common point using the Projection properties.

The Projection properties in this example have been created inside Expression Blend using a storyboard activated by behaviors.

The InkPresenter control is this example has been created inside Expression Blend, but we need to do a bit of work in the code behind file to record the data and convert it into a visual path. You can read more about this process in this MSDN article.

Grab the Source

As always, you can grab the source files to this post here.

You can enhance the 3D effect further by pressing the ‘Spin‘ button, this simply plays a storyboard to spin each circle on an additional axis.

To create this effect I have used the Projection Transform Rotation properties and used Easing on the animations inside Expression Blend 3 to help the inertia look right.

Grab the Source

As usual you can download the source files for this example here.

Breakdown of effects

To create this effect I use the following transforms:

• Opacity at either end of the animation.
• Projection values to the X and Z axis to make each element loop to the foreground and background.
• Scale transform to enhance the size of each element at it’s nearest and furthest point.
• Easing on the above Scale transform to help the movement look more natural.
• Translate transform to move the elements from the left to right.

• I replaced the circle elements for images.
• I slowed down the storyboards using the SpeedRatio value, this allows you to speed up or slow down a storyboard without having to go through and reposition all the key frames.
• I added an additional projection transform to the Y axis to give the impression the spiral effect is along a curve.

Grab the source

As usual you can download the source files for both the above examples.

Silverlight spiral effect using 3d projection 1

Silverlight spiral effect using 3d projection 2

Break down of effects.

Each element (circle) has it’s own storyboard that uses the projection properties to spin it around in a 360 degree fashion on it’s X axis. By increasing the centre point value of the Z axis we get a larger radius.

On top of that each element is offset by 30 degrees on it’s Y axis, this allows all the elements to form an imaginary sphere. I have also set the storyboard durations to different lengths to allow a chaotic feel to the animation.

Finally I have performed a rotate animation on all of the elements. The was no code needed to create this example, everything was done inside Expression Blend 3.

Grab the source

As usual you can grab the source here:

Projection example 1

Projection example 2

Blend 3 allows you to embed fonts, but unfortunately if you publish your work online you are technically distributing the font. This is illegal and could potentially land you in trouble.

However, there is a way around this, if you encrypt the font so that it is not usable then you are arguably not distributing it any more. This process is known as Obfuscation. It is important, however, to point out that you still need a license or permission to use a non-standard font in your work.

How to Obfuscate a font

First open up Microsoft Word (2007+), create a new document and type every character you will need in the font you require. Save the file as an XPS document and close Microsoft Word.

Locate the saved XPS document on your hardrive and rename the file type from ‘.xps‘ to ‘.zip‘. Now extract the contents of the .zip and find the file called ‘Resources‘, inside this folder should be a document with the file type ‘.odttf‘. Add this file into your Silverlight Solution and set its ‘Build Action‘ to ‘Resource‘.

Now the final part, in the XAML, locate your textBlock and set the ‘FontFamily‘ property to the .odttf file in your solution. Directly after this needs to be a ‘#‘ and then the exact name of how the font was displayed in the selection field in Microsoft Word. This allows you to have multiple fonts in one .odttf file.

The XAML should look similar to the below.

<TextBlock x:Name="textBlock" FontFamily="./Fonts/20FD640A-6B8C-569B-6B08-6F60BA7CC534.odttf#Segoe UI" FontSize="12" Foreground="Black" Text="text content goes here" />

If you are using multiple instances of elements then it may make more sense to think about making these elements User Controls. User Controls allow you to place objects into a container that can be re-used again and again, even multiple times at once. Every User Control has its own XAML file and its own code file.

To make a selection of elements on stage into a User Control it is really simple. First select all the objects you want to include in your new User Control, then right click anywhere on the selected objects. From the drop down options select ‘Make into UserControl…‘. This creates a new XAML file containing the objects you selected with it’s own code behind file too.

Each time you want to add a new instance of your User Control you will need to add the following XAML in…

<local:UserControlName Margin=”0,0,0,0″/>

Data Binding allows us to take the value from one object and apply it to another without needing to know a single line of code.

In this tutorial we are going to control the font size of a textBlock through the interaction of a Slider control. To start off we need to draw a Slider control and a textBlock on our stage as seen below.

This will bring up the Create Data Binding window. First select the ‘Element Property‘ tab (the middle tab). Now click on the object we want to effect (the textBlock), this will bring up a list of values that can be binded. We want to effect the font size so scroll down and select ‘FontSize‘. Finally we need to make sure the ‘Binding direction‘ is set to ‘TwoWay‘, expand the bottom area to change this setting.

Click ok to save these settings.

Now all that is left to do is to set the minimum and maximum values of our slider, these values will represent the font size range of our textBlock. To change these values go to the ‘Properties‘ tab and scroll down to the ‘Common Properties‘ section. We should end up with the following functionality.

When styling up a control, Expression Blend allows you to apply that style to other controls. This firstly allows file sizes to be kept  down as the style is only written in the XAML once. Secondly this allows you to retain consistency across multiple controls set to the same style, when making changes to one, all controls set to that style will update automatically.

Below is an example of four standard button controls.

Now I am going to apply a visual style to the first button. You can read more about applying a style to the button control in this previous post. See how our first button is now visually unique compared to the other three.

Now to apply the same style to the following three buttons is really easy. To apply a style, we right click the button we want to change and select ‘Edit Template‘ and then ‘Apply Resource‘. We now see a list to choose from of styles we have created that are available for that control.

We can repeat this process to each of the buttons to apply this style to all four buttons.

Notice that the style applies to the contents inside the control. The Button control has a ‘Content Presenter‘ inside the control that uses Data Binding (we will touch on Data Binding later in this tutorial series) to pull through the text content, styling and color from the controls top level. By keeping this ‘Content Presenter‘ inside the styling we can keep the text on each button unique.

We can also make our style unrestricted to a fixed size, this allows us to use the same style for different sized buttons as shown below.

Styles can be applied to all control inside Silverlight.

The launch of Silverlight 3 brought with it the introduction of Behaviors. Behaviors are pieces of functionality that can be applied to objects within Expression Blend without the need for knowing any code at all.

Expression Blend has the following Behaviors ready for use:

• ChangePropertyAction - Change an objects property
• ControlStoryboardAction - Tell a storyboard to play/pause / stop
• FluidMoveBehavior - Changes an objects easing
• GoToStateAction - Changes an objects state
• HyperlinkAction - Calls a hyperlink
• MouseDragElementBehavior - Allows an item to be dragged
• PlaySoundAction - Plays an audio element
• RemoveElementAction - removes an object from the stage

To apply a Behavior, first click on the last icon in the main tool bar called ‘Assets‘, then drag your chosen Behavior onto the object you want to activate the Behavior.

Once your Behavior has been placed you will see it indented below that object in the ‘Object and Timeline‘ tab. To set the properties, click on the Behavior and go to the ‘Properties‘ tab. You will see two sections, the ‘Trigger‘ section allows you to set the source target and the event trigger type (mouse enter, mouse click etc). The ‘Common Properties‘ section allows you to set what happens when the Behavior is played.

In this previous post we used the ‘ControlStoryboardAction‘ to start an animation off automatically when the page is loaded.

To find additional Behaviors to use check out the Expression Gallery and CodePlex.

Silverlight ships with lots of built in controls ready for use with default skins applied. All of these controls are skinable following similar steps found here with the ‘Button’ control.

To access the full list of controls available to you in Blend access the last icon in the main tool bar called ‘Assets‘. This will open up a list of available assets of which one group is labled ‘Controls‘, open up this drop down to see the full list of available controls.

With Blend 3 and the Silverlight SDK installed I have a list of over 100 controls to look through. Here is a list of ten useful controls I have picked out, ideal for beginner users:

CheckBox - Works like standard check boxes

To access even more controls go visit the Expression Gallery and CodePlex to see whats available.