Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.
Recent comments

MassEffect2-Screenshot - Expanded viewExpanded view of Mass Effect 2 Silverlight banner

Today I am very excited to say we at Metia are at the very final stage of launching the world’s first interactive and expandable banner ad developed using Microsoft Silverlight 3.0 technology.

This Silverlight banner, which is going to be published on Tech and Gadgets page of MSN UK this afternoon (28th Jan 2010) and then published and remain on MSN UK homepage for a few weeks from tomorrow, has been developed to launch Electronic Art’s new game: Mass Effect 2.

MassEffect2-Screenshot - Minimized viewMinimized view of Mass Effect 2 Silverlight banner on MSN's homepage

As the developer of this project, I am particularly excited about launching this because apart from the fact that this is the first Silverlight banner in the world, it also uses cool Silverlight features such as Deep Zoom and Smooth Streaming. The banner has been designed to give the same exciting and lively feeling as the game by using some graphics from the game, and most importantly the creativity of our interactive designers as well as everybody else involved in this project at Metia, to add the essential touches to the user experience.

So some rather technical facts:

At first glance you might think how did Microsoft allow a banner with HD quality video and high resolution images, 1280×720 and 1920×1200 to be precise,  to be displayed on their MSN homepage, surly this is going to slow down the loading time for their homepage? Well it could slow the loading time down because the content of the banner all together is about 600MB! Yet, the answer is NO, and the reason is because the size of initial download banner is only about 40kb!

Basically, there are two .xap files for this banner: footprint and content. The footprint is the preloader .xap file that gets downloaded when loading the page and is 40kb, and the content .xap file, which is about 600kb, is the one that contains UI elements and dlls. All other contents including videos and images are streamed or downloaded seperatly in the background when needed. Seriously, the banner is supper fast.

So the banner is quite smart enough to not throw all content including Mass Effect 2 screenshots and many high-resolution images for your desktop wallpaper to your computer when you don’t actually want them. Instead, it starts downloading content at different stages according to the user’s behaviour, i.e. it guesses what content is the user going to see next and starts downloading it in the background, so when the user opens the content he/she is more likely to see the actual content instead of the loading bar. The amazing Smooth Streaming has also made it possible to download HD quality videos including Mass Effect 2 trailer without leaving the user waiting for hours!

I am very pleased to have experienced working on this exciting project, with exciting people, for an exciting client, and for an exciting event! The banner is going live this afternoon, so make sure you visit Tech and Gadgets page of MSN UK and download Mass Effect 2 wallpapers!

Mass Effect 2 screenshot

Mass Effect 2 screenshot

 

Mass Effect 2 screenshot

Mass Effect 2 screenshot

 

Posted by Damon Serji on 28. January 2010 06:16 under: Silverlight News
 with 4 Comments

As you may be aware, Google Analytics does not track any actions such as click and etc from inside Silverlight applications. To overcome this issue and track the actions made by users on a Silverlight application we need to manually report to Google the actions. We do this using “Event Tracking” feature on Google Analytics.

Above screen shot shows how the data show in Google Analytics once they are captured in Event Tracking. In the screen shot: Homepage, Home – video player and Products page are categories. Each category then has a list of Event Actions and each action could have a label to provide more details about that action, for instance you could have: ‘Homepage’ > ‘Clicks’ > ‘Logo Image’, which displays how many times the ‘Logo Image’ was clicked from the homepage of the site.

The process of tracking actions in Silverlight is very simple, it consists of capturing the actions and passing them to Google Analytics using a JavaScript function that Google provides us in their tracking code.

The first thing I would do in setting up tracking for my Silverlight application is to create a separate class in the main Silverlight project to managed the all tracking code. I then can use this class everywhere within my application and pass to it the required parameter for tracking. This way if I decided to change something in my tracking code, or use a complete different application for my tracking i.e. Webtrends, I then only need to change my code in one place and the rest of code remains as before.

1. create Tracking class

namespace SilverlightGoogleAnalytics.Tracking
{
    public class Tracking
    {
    }
}

A. declare some private variables for passing required parameters to the analytics:

private string category;
private string resourceLabel;
private string groupType;
private string action;
private static Tracking _instance;

B. create an instance of the Tracking class as a property

public static Tracking Instance
{
    get
    {
        if (_instance == null)
        {
            _instance = new Tracking();
        }

        return _instance;
    }
}

Instance is a static public variable that holds a reference to the Tracking class itself. You will see later how we use this property to access its Tracking’s public methods.

C. create a public method to receive parameters and pass to the analytics:

public void Track(string trackingCategory, string trackingResourceLabel, string trackingAction)
{

    category = trackingCategory;
    resourceLabel = trackingResourceLabel;
    action = trackingAction;
    SendTracking();
}

public void Track(string trackingCategory, string trackingAction)
{
    category = trackingCategory;
    action = trackingAction;
    resourceLabel = "";
    SendTracking();
}

The Track methods (note they both are called Track but have different signatures) take the tracking data: category, resourceLabel and action.

D. send the data to “trackEvent” JavaScript function
now that we have the tracking information we simply call a private method which sends the data to our JavaScript function (see step 2) using Invoke method for being sent off to Google Analytics:

private void SendTracking()
{
    HtmlPage.Window.Invoke("trackEvent", category, action, resourceLabel);
}

We don’t need to do anything else with this class, from now on we can simply use this track whenever we need to pass some tracking data to Google Analytics.

2. JavaScript function to pass parameters to Google Analytics
this is the code we need for passing the data to Google Analytics to save it as an event:

function trackEvent(category, action, opt_label, opt_value) {
    pageTracker._trackEvent(category, action, opt_label, opt_value);

}

Here I added this to a separate JavaScript file called Tracking.js, but you can also add it straight to your html/asp page inside script tags.
The default script that Google provides you for the analytics remain as they are.

3. Calling Tracking class from your code and passing tracking values
first create a private variable to hold a reference to your Tracking class:

private Tracking.Tracking tracking;

Now initialize your variable in your constructor or Loaded method:

tracking = new SilverlightGoogleAnalytics.Tracking.Tracking();

Now you can call the Track methods within Tracking class anytime needed. i.e.:

tracking.Track("SilverlightApplication", "Loaded");

Here I called the Track method within tracking that takes two parameters: Category and Action. I could also pass another parameter (resource label) for instance:

tracking.Track("Homepage", "Click", "ClickButton");


Improving your code:
The above code works perfectly fine, however this was a small project, if you were dealing with a much bigger scale project then you wouldn’t want to type in the category, action and resource label every time you have to pass the parameters because you could end up with inconsistent data or typo errors.

One solution to this is to use Enum variables for either category, action or resource label. So whenever you have to pass a action you just select it from the list of available actions and if it wasn’t there you can add it to the list so next time you can use the same action and not end up with an inconsistent report like: “Homepage > ClickButton > Clicked” and “Homepage > ClickButton > Mouse Click”

1. create a new class in your Silverlight project and call it Enums.

2. create required enum types

namespace SilverlightGoogleAnalytics.Enums
{
    public enum TrackingCategories
    {
        SilverlightApplication,
        Homepage
    }

    public enum TrackingGenericLabels
    {
        ClickButton
    }


    public enum TrackingActions
    {
        Click,
        Load
    }
}

3. use the created enum types to pass values

tracking.Track(Enums.TrackingCategories.Homepage.ToString(), Enums.TrackingGenericLabels.ClickButton.ToString(), Enums.TrackingActions.Click.ToString());

Posted by Damon Serji on 26. January 2010 10:29 under: Intermediate
 with 2 Comments

To set the margin or Canvas of an object from the code you can use SetValue() which is a built-in method. SetValue() takes a DependencyProperty such as a Button, and a double value.

Example:

myButton.SetValue(Canvas.LeftProperty, myPoint.X);

In above example ‘myButton’ is a Button on the xaml, and myPoint is a variable of type Point which we use the X value of.

Posted by Damon Serji on 11. January 2010 18:36 under: Basic
 with 0 Comments