SilverlightTips.com

Mass Effect 2 Silverlight banner wins Best Advertising Website by WebAward

damon — Fri, 08 Oct 2010 15:34:00 +0100

This morning we received a delivery of the glorious shiny and cool WebAward trophy for Best Advertising Website award right to our door here at Metia in Leicester Square! This is for the project which I worked on at the beginning of this year and posted about on 28th January 2010. You can read my full post about this project at: The first interactive Silverlight banner ad in the world!.

The award is published on WebAwards website here: Metia wins 2010 WebAward for Mass Effect 2 Silverlight Campaign, and the actual project is available to see here: Metia Award Winning Silverlight Campaign for Mass Effect 2.

As you may know, WebAward, sponsored by Web Marketing Association, are THE kind of awards any Internet marketing, online advertising, PR, and top web site design professionals would hope to get hold of. The WebAwards use seven criteria of Design, Content, Copywriting, Use of Technology, Innovation, Interactivity and Ease of use to evaluate award-winning websites from 96 industry categories.

Every year thousands and thousands of websites enter the WebAwards Competition and we at Metia not only were recognised as a #1 in our sector to receive the Best Advertising Website, but also managed to score about 20% higher than the category average, and this is a fantastic achievement that we are very proud of.

As the developer of this project, I am particularly delighted to have been a part of an exciting team with creative and motivated team members and would like to congratulate Dean, Mark, Tina, Stuart, Stephen, Sarah and Colin who like always worked hard to deliver an outstanding result.

Tracking in Silverlight (Google Analytics) - Part II

damon — Wed, 10 Feb 2010 13:24:00 +0100

In my previous posts I explaind how to use Google Analytics in Silverlight to track different information about users interaction with your Silverlight application.

One of the things you want to include in your tracking report is how many users who visited your site had Silverlight installed and how many didn’t. In addition, you might want to go in deeper details and find out more about users who didn’t have your required Silverlight plug-in on their computers:

- how many had an older version of Silverlight – and which version did they have
- how many had/didn’t have a Silverlight compatible platform
- haw many of users without Silverlight plug-in clicked on “Download Silverlight plug-in” that you provided
- how many didn’t download the Silverlight plug-in and continued interacting with the “none-Silverlight” version of the application that you provided (if you provided any)

The source code for this project is available for download from CodePlex.

You can capture all above details and add to your analytics report.

Doing above tracking requires you to A. Find the required information about user, and B. Send them to your analytics software.

You can find all information about the user Silverlight support from Silverlight.supportedUserAgent.js file which is provided by Microsoft. You can download Silverlight.supportedUserAgent.js from Microsoft’s website.

However in order to send the right data to Google Analytics/Webtrends (or any other analytics software) you need to modify this file slightly to send the information when necessary:

1. add Silverlight.supportedUserAgent.js to your project
After downloading the Silverlight.supportedUserAgent.js file, add it to your Web project and call if from your Default.aspx (or any page that hosts your Silverlight application). You can call this file from the header, but just make sure it is called after your Tracking.js file (your tracking code).

2. add tracking code to Silverlight.supportedUserAgent.js
If you open this file and have a look, you will quite quickly notice there are a few if-else statements which checks different browser and OS to see which is the user using. Off course it depends how you like your report to be generated and what you would like to capture, but this is what I have done:

At the end of “if (slua.OS != 'Unsupported')” statement and just before the final closing curly bracket, add the following tracking code:

trackEvent("SilverlightApplication", "Platform supports Silverlight", "OS: " + slua.OS + " - Browser: " + slua.Browser);

Above code could generates a similar report to this:

Category: SilverlightApplication
Action: Platform supports Silverlight
Label: OS: Windows – Browser: IE5

So by seeing above report I know how many users did support Silverlight and what platform where they using.

Find and modify the “if (version == '2.0')” and “else if (version == '1.0')” statements at the bottom of the page and change them to include tracking code like this:

if (version == '2.0') {
trackEvent("NoneSilverlight", "Unsupported silverlight", "Silverlight Version: 2.0");
return (supUA && (slua.OS != 'MacPPC'));
}

else if (version == '1.0') {
trackEvent("NoneSilverlight", "Unsupported silverlight", "Silverlight Version: 1.0");
return (supUA && (ua.indexOf('Windows NT 5.0') < 0));
}

Now you know if user had a different version of Silverlight, and can drill down in the report to find out which version did they have.

3. If your Silverlight application was loaded
Since it is not clear from above report if user actually saw your Silverlight application you can add the below code:

In your Silverlight object add the following parameter:

And then add the following java script code to your Default.aspx page:

function onSilverlightLoad(sender) {
trackEvent("SilverlightApplication", "Platform supports Silverlight", "SilverlightApp was loaded");
}

This piece of code will be loaded every time your Silverlight application is loaded.

4. if user interacts with the none-Silverlight version of your site/application
if (and you must always) prepared a none- Silverlight version, using above method you should now have a good idea on how to send the tracking code to your analytics software if Silverlight was not loaded for any reason and the user carries on interacting with your none- Silverlight version.

Hint: to add none Silverlight version you can add your HTML inside the <object> tag and right after the last <param> tag. Any code or text before the </object> will be displayed when you don’t have Silverlight installed/enabled.

And to send the tracking on i.e. links, add it to your onload or similar function/event.

5. Call CheckSupported()function
Finally, add this function to your page:

function CheckSupported() {
    var tst = Silverlight.supportedUserAgent();
    if (tst) {
        return true;
    }
    else {
        return false;
    }
}

And now call it from your Default.aspx just before to </body> tag. i.e.:

The first interactive Silverlight banner ad in the world!

damon — Thu, 28 Jan 2010 06:16:00 +0100

Expanded 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.

Minimized 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

Google Analytics in Silverlight (Event Tracking)

damon — Tue, 26 Jan 2010 10:29:00 +0100

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());

Set Margin and Canvas programmatically

damon — Mon, 11 Jan 2010 18:36:00 +0100

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.

Silverlight Preloader

damon — Wed, 30 Dec 2009 12:47:00 +0100

Before I started writing this post I had a quick search on the internet about Silverlight Preloader (Silverlight progressbar) and noticed a few good posts that already exist and explain how to do this.

However, one thing I noticed from most of the tutorials about creating Silverlight progressbar is that they all replace the standard Silverlight preloader animation with a simple rectangle progressbar! Although displaying your logo with a standard progressbar in shape of rectangle is much better and professional than leaving the standard Silverlight preloader to be displayed, but I think it is not that cool!

To test this project I added a large file to the project in order to slow down the process of loading for us to see the effect. To view the live demo click here.

The code can be downloaded from CodePlex here.

As a result, I want to explain how to take your logo and with a bit use of maths do something cool to it, like filling it with color to display the progress of loading.

1. Add new xaml and js files to your Web project
this xaml file will include your custom progress bar, you can call this anything you like, here we call it preloader.xaml. To add a new xaml file: right click on your .Web project from the menu find ‘Add’ and click on ‘New Item...’, from the left side (Categories) select ‘Silverlight’, and then from the right side (Templates) choose ‘Silverlight JScript Page’. Once you add the xaml file Visual Studio will add a new .js file for you too.

2. Add splashscreensource and onSourceDownloadProgressChanged parameters to your Silverlight object

on your Default.aspx, or any page that hosts your Silverlight application (in our case SilverlightPreloaderTestPage.aspx), add the splashscreensource parameter i.e.:

The first parameter simply loads the loading.xaml while loading the main components of the Silverlight application.

The second parameter calls the onSourceDownloadProgressChanged function from or preloader.js file.

3. Create a new progress bar in preloader.xaml using Blend
Since we want to fill a logo or a shape with color instead of just creating a rectangle progressbar, we need to draw the shape manually in Expression Blend. You might notice Blend doesn’t open the preloader.xaml file from our .Web project. To solve this issue I simply open a new xaml file in Blend and once I am happy with my changes I copy and paste the code to my preloader.xaml file.

To demonstrate the filling of a shape we need to use Path Clipping technique. Basically we need to create a rectangular Canvas and then cut the shape we want out from it. Then we can move another coloured rectangular, which is inside the canvas but positioned outside it by adding a high margin to it, to the left/right/up/down towards inside the canvas according to the percentage of loading. This way user will see the shape we draw earlier getting filled with color as the percentage of loading increases. To learn about Path Clipping visit Clipping paths in canvas using Expression Blend by Gavin Wignall.

4. Do the calculation in Java Script file
copy this code to your preloader.js file:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    if (sender.findname("loadingStatus") != null) {
        var loaded = Math.round(eventArgs.progress * 10) / 10;
        sender.findName("loadingStatus").Text = "Loading: " + (Math.round(eventArgs.progress * 1000)) / 10 + "%";
        var newValue = 79 - (79 * loaded);
        sender.findName("LoadFill")["Canvas.Top"] = newValue;
    }
}

onSourceDownloadProgressChanged is the name of function which we call from our object in .aspx page (<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />).

loadingStatus is a name we have given to a TextBlock in our preloader.xaml. Here we find the TextBlock loadingStatus and then assign the current loading percentage to it.

eventArgs.progress is a very long number like 0.3452345234232 and shows the percentage of loading, 1 is 100%. So we need to change this to something like 34.5 and 100 as 100%. To do this we first multiply eventArgs.progress by 1000, this way we get 345.2345234232 and to remove the .2345234232 we use Math.round()function which is a Java Script built-in function. Now we should have 345. To get 34.5 which is the actual percentage of loading we simple divid

e the number by 10. At the end we add a bit of text to the result and insert it to our loadingStatus TextBlock.

In order to show our logo is getting filled by color we need to move the rectangular inside by changing its “Canvas.Top” property which acts just like Margin. As we want to keep the rectangular outside the visible area we position it 79 pixels, which is just the actual height of our rectangular, away from the top, so it sits just below the visible area.

If you follow the maths as I explain above you will understand that ‘loaded’ variable will have a value like 0.34 (this time we multiplied it by 10 instead of 1000). Lets say if we had 99 percent loaded then the ‘loaded’ variable would have a value of 0.99. times that by 79 and you get 78.21, now if we follow the equation: 79 – (78.21) = 0.79. If we set the Canvas.Top to 0.79 then our clipped area will be almost completely filled with color because the rectangular is sitting right at the top and that is exactly what we wanted to achieve.

Please note, if your rectangular is larger or smaller than 79 pixels you need to change both 79 to actual height of your rectangular to get this working correctly.

Clipping paths in canvas using Expression Blend

Gavin — Wed, 30 Dec 2009 11:33:00 +0100

Sometimes you need to cut a shape out from your canvas to produce a special effect by showing another object from behind the canvas appearing in the clipped area. This mainly is used in making animations to for instance display a text appearing in the clipped area.

In order to achieve this all you need is a canvas, another object inside the canvas, i.e. text or a rectangular to work as a color panel, and a path in your desired shape:

1. Add a canvas to your page

2. Add a rectangular inside the Canvas and fill it with a color

3. Draw a path

make sure you clicked on the LayoutRoot level before drawing the path, so your path doesn’t appear inside the canvas. You can draw a path using Pen tool. Select the Pen tool from tools panel and click on different places on the page to see the shape been drawn, to end the path click on the start point.

4. Clipping the path out from the canvas
you can choose which object to be clipped from the other by the order of selecting them. In this case we want our shape which we created using path method to be clipped from the canvas. Therefore, we need to click and select our path first, and then holding the Ctrl button on the keyboard click on the canvas.

We should now have both our path and canvas selected. Go to ‘Object’ menu in Blend and from ‘Path’ click on ‘Make Clipping Path’ (shortcut key is Ctrl + 7).

Now your canvas should have a hole in the shape you draw earlier using the Pen. So by moving the rectangular inside the canvas you will be able to notice the clipped area appearing when the rectangular or text is on the same position and disappearing when we move the rectangular or text to outside the clipped area.

Silverlight Pagination (DataPager)

allan — Mon, 14 Dec 2009 19:33:00 +0100

Silverlight pagination

Pagination (DataPager) is a built-in control in Silverlight 3.0. You simply bind your data to the DataContext through a PagedCollectionView variable.

PagedCollectionView is a class that could store collection of your data with IEnumerable interface. Through this class you are then able to use cool features such as sorting, filtering and paging functionalities.

To test pagination in this post I created a class of type “Contact” to store name, surname and tel number for each contact.

public class Contact
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public int Telephone { get; set; }
}

To get a better visual and have different fields display for each of my contacts I created a ContactTemplate.xaml. This simply contains the template for each of my contacts:

In my Mainpage.xaml I use an ItemsControl to list all contacts that have created using Contact class, and since I want each contact to be displayed within my ContactTemplate I display a reference to the ContactTemplate.xaml page and bind each contact to that:

To create a reference to the ContactTemplate.xaml you first need to create a namespace in your MainPage.xaml that refers to the project which ContactTemplate.xaml exists (the same project in our case). So don’t forget to add this to the top of the MainPage.xaml in order for your above code to work:

xmlns:Local="clr-namespace:SilverlightPagination"

Last thing we need to do in the MainPage.xaml is to add a reference to the pagination control (DataPager):

First add the reference:

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Now add the control:

<data:DataPager DisplayMode="PreviousNext" Margin="0,0,0,4" HorizontalAlignment="Center" Source="{Binding}" NumericButtonCount="{Binding Value, ElementName=numericButtonCount}" AutoEllipsis="{Binding IsChecked, ElementName=autoEllipsis}" IsTotalItemCountFixed="{Binding IsChecked, ElementName=totalItemCountFixed}" />

And to get it working your MainPage.xaml.cs should look something like this:

private List<Contact> allContacts;

public MainPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    allContacts = new List<Contact>();
    AddData();

    PagedCollectionView pcv = new PagedCollectionView(allContacts);
    pcv.PageSize = 6;
    DataContext = pcv;
}

private void AddData()
{
    for (int i = 0; i <25; i ++)
    {
        Contact contact = new Contact();
        contact.Name = "DummyName " + i;
        contact.Surname = "DummySurname " + i;
        contact.Telephone = 020711111 + i;

        allContacts.Add(contact);
    }
}

In summary, AddData() creates some contacts so that we can test this project, and the rest happens in the MainPage_Loaded. As I explained at the beginning of this post, if you add your list of data to a variable of type PagedCollectionView then you can use the pagination feature of this class. Set the page size, and set the DataContext of the page to your PagedCollectionView variable. The DataContext simply binds your data where ever it is asked to down your code (even in your ContactTemplate.xaml page that you had already added in the ItemsControl.

Play sound in Silverlight using MediaElement

allan — Thu, 10 Dec 2009 13:16:00 +0100

If you want to play music or a short sound clip in Silverlight here is what you need to do:

1. Your sound file
First, make sure you sound file is MP3 or WMA format as other formats are not supported.

Save your file to ClientBin folder (where your xap file gets coppied when buiding the project)

If you dont want to store your file to the ClientBin folder do this: from Visual Studio right click on the sound file and select Properties. Now in Properties window change Build Action to Resource. This ensures the file gets copied to the ClientBin folder during execution.

2. Add a MediaElement in your Xaml file

set the Source to be the name of your file and AutoPlay to False so it can be played at click of a button.

Also add a button to play the sound when clicked:

3. play the sound
in your code behind add this to the Click event of your button:

SoundClip.Play();

If you have any questions please visit Silverlight Forums here: http://silverlightforums.com/showthread.php?p=2080#post2080

Silverlight Deep Linking

damon — Fri, 04 Dec 2009 00:06:00 +0100

Silverlight Deep Linking.

This post is an update to the previous post I have done about Silverlight Deep Linking. So for details and to see previous code visit Basic Silverlight Deep Linking.

Download:
As usual, you can download the complete project from CodePlex site here.

Questions and answers:
For updates and any issues visit the specific thread regarding this post at Silverlight Forums: http://silverlightforums.com/showthread.php?t=1425

Basically, we need to use a built-in class called “NavigationFailed” from our Frame control to fire the event when user tries navigation to a none-existent page.

Here I demonstrate two ways of handling the error exception and displaying a friendly error message.

Using an error template page
Using a child window to display a popup message for the error

Here are 3 steps to get this working with error template page:

1. Create Error404.xaml and add it to UriMapper
add a new page to your Silverlight project and call it Error404 as it will only be used for the Error 404 or “Page not found” error.

Now, in your App.xaml add the error page to your Navigation UriMapper so the application can navigate to it when needed:

<Nav:UriMapping Uri="Error" MappedUri="/Error404.xaml" />

2. Add “MainFrame_NavigationFailed” method in MainPage.xaml.cs
in your MainPage.xaml.cs and in your constructor or Loaded method, add NavigationFailed event handler to your Frame control (MainFrame):

MainFrame.NavigationFailed += new System.Windows.Navigation.NavigationFailedEventHandler(MainFrame_NavigationFailed);

If you use the Visual Studio’s snippet/shortcut it will automatically create the method for NavigationFailed event for you. Otherwise, add this method:

private void MainFrame_NavigationFailed(object sender, System.Windows.Navigation.NavigationFailedEventArgs e)
{
MainFrame.Navigate(new Uri("Error", UriKind.Relative));
}

3. Handle the exception
although the above code looks find and seems to be working, If you run it you get the following exception error:

System.ArgumentException:
Navigation is only supported to relative URIs that are fragments, or begin with '/', or which contain ';component/'.

To fix this, you need to tell the Frame control (MainFrame) that this exception is being handled. So add this to your MainFrame_NavigationFailed method:

e.Handled = true;

Now if you try to change the URL to a page that doesnt exist you should get to see the Error404.xml page.

Using Child Window

To do this using Child Window all we need to do is to show the Child Window which we had created before (for more information about creating and showing a Child Window see my post: Passing value from Child Window to parent window).

1. Create a new Child Window (ErrorPopup.xaml)
add this file to your Silverlight project. Since we could use this for other errors too I tried to called it something more generic.

2. Add error property and placeholder to ErrorPopup
Since we want to be able to pass different error message to our popup control in the future, we add a TextBlock in the ErrorPopup.xaml, and we also add a property to our control (in ErrorPopup.xaml.cs) to receive the error message and display it in the TextBlock.

In ErrorPopup.xaml:

In ErrorPopup.xaml.cs add a private member and control its value through the property:

private string _errorMessage;
public string ErrorMessage
{
    get { return _errorMessage; }
    set
    {
        _errorMessage = value;
    }
}

Now add the following code to ensure every time the ErrorPopup is loaded it displays the error message that it received through its property (ErrorMessage):

private void ErrorPopup_Loaded(object sender, RoutedEventArgs e)
{
Error.Text = _errorMessage;
}

3. Show ErrorPopup and pass an error message
in MainPage.xaml.cs create a private variable of type ErrorPopup:

private ErrorPopup errorPopup;

In Loaded or constructor method create a new instance of the errorPopup:

errorPopup = new ErrorPopup();

Now you are ready to use the ErrorPopup every time needed within your application. So in your MainFrame_NavigationFailed method add the following code:

errorPopup.ErrorMessage = "Page you were trying to access could not be found.";
errorPopup.Show();

don’t forget to keep e.Handled = true; in that method as otherwise you receive the exception error I explained above.

Please note in the download from CodePlex I included both methods and just commented the display through Error404 template out by commenting out the MainFrame.Navigate function in the MainFrame_NavigationFailed method. Feel free to put that line back in and comment the other method out if you needed to.

I personally prefer to you the ErrorPopup, but depending on your need you can user either of the two options I explained above.

Silverlight RSS Part I (Simple RSS reader)

damon — Sun, 29 Nov 2009 14:52:00 +0100

Microsoft Silverlight 4 Beta is out!

damon — Wed, 18 Nov 2009 23:18:00 +0100

Today Microsoft released Silverlight 4.0 Beta version along with the SDK and tools for Visual Studio 2010 Beta 2 for software developers.

there are great new features added to this version of Silverlight that enables Silverlight applications to provide 'rich interactive media experiences' to end users.

Since most of these new features, such as, printing, webcam, clipboard access, right mouse click and drag and drop functionalities, are completely brand new and did not exist in previous versions of Silverlight, we will be going through them by posting tutorials and exemplas, and hopefully you will be able to play around with the demos here at Silverlight Tips website. So, make sure you have all requirements for developing on Silverlight 4.0 Beta on your computer.

Resouces:

Microsoft Silverlight - getting started

New authors on board

damon — Mon, 09 Nov 2009 09:18:00 +0100

During the past two months or so I had been working on building Silverlight Tips website and managed to put up some useful Silverlight tutorials along with examples and demos. Just after a few weeks of the site's launch, it started receiving a great number of visits from around the world. The site received about 5000 visitors through this short period of time (2 months) and I must mention the comments I received from visitors were great and motivating. The site was picked up by major and minor search engines within the first two weeks and is now been featured on various great Silverlight and none-Silverlight websites including silverlightshow.net, silverlightcream.com and silverlightbuzz.com.

Today, I am glad to announce Gavin Wignall, an Interactive Design Lead and owner of Silverlight Buzz website, along with Allan Mullar, a Silverlight and WCF expert and owner of Silverlight Forums website, have joined the site to publish their tutorials and tips on Silverlight Tips website, and help to build a great source of information and tutorials about Microsoft Silverlight by using their experiences and expertise in this field.

I am looking forward to continue posting articles on Silverlight Tips and am most grateful to have Gavin and Allan on board.

Silverlight 3.0 validation – Part 1 validating TextBox

damon — Thu, 08 Oct 2009 19:24:00 +0100

The built-in validation in Silverlight 3.0 is a great new feature that can be used on essential Silverlight controls such as TextBox. Using this feature, it is possible to nicely display an error message and highlight the TextBox that has bad value.

In this post I will only cover validating data in TextBox controls, which are simply used in most forms to receive basic information such as Name, Surname and Email address. The completed and working version of this project can be downloaded from CodePlex from here. I will explain and provide solution on how to validate ComboBox, Radio Button controls or etc in another post soon, so please keep yourself updated on new posts here.

1. Create a basic form with a few TextBox controls in the xaml

2. Create a class, call it CustomValidation
Add the following code to your CustomValidation class:

private string message;
public CustomValidation(string message)
{
    this.message = message;
}
public bool ShowErrorMessage
{
    get;
    set;
}
public object ValidationError
{
    get
    {
        return null;
    }
    set
    {
        if (ShowErrorMessage)
        {
            throw new ValidationException(message);
        }
    }
}

3. Create an Extension class (Extensions)
To understand what is an Extension class and for more information about them visit my tutorial post “Extension methods in Silverlight and C#”.

In brief: Extensions will be your Extension class to extend any object of type FrameworkElement like TextBox controls within your application framework. It means you can use the public methods within this class as a “built-in” method for your TextBox.

Create a static public method and call it SetValidation. This method receives an instance of a FrameWorkElement and a string value, and returns nothing:

public static void SetValidation(this FrameworkElement frameworkElement, string message)
{
    CustomValidation customValidation = new CustomValidation(message);
    Binding binding = new Binding("ValidationError")
    {
        Mode = System.Windows.Data.BindingMode.TwoWay,
        NotifyOnValidationError = true,
        ValidatesOnExceptions = true,
        Source = customValidation
    };
    frameworkElement.SetBinding(Control.TagProperty, binding);
}

CustomValidation is the class we defined earlier.

"Binding" is a class in System.Windows.Data assembly which gets or sets a value that indicates whether to raise the error attached event on the bound object.

What are we doing? Here we have a CustomValidation class that has one property ("ShowErrorMessage") and one public methods ("ValidationError"). "ValidationError" is our source binding object and what we want to be able to do in the future is to bind our frameworkElement, which is a TextBox, to ValidationError. We are in simple words binding the CustomValidation class to our TextBox once we call this method on our TextBox.

For more information on Binding and BindingExpression visi msdn article here.

Create another two methods for displaying validation error and also for clearing validation error when the error was corrected:

public static void RaiseValidationError(this FrameworkElement frameworkElement)
{
    BindingExpression b =
    frameworkElement.GetBindingExpression(Control.TagProperty);
    if (b != null)
    {
        ((CustomValidation)b.DataItem).ShowErrorMessage = true;
        b.UpdateSource();
    }
}

public static void ClearValidationError(this FrameworkElement frameworkElement)
{
    BindingExpression b =
    frameworkElement.GetBindingExpression(Control.TagProperty);
    if (b != null)
    {
        ((CustomValidation)b.DataItem).ShowErrorMessage = false;
        b.UpdateSource();
    }
}

By creating a new BindingExpression you will be creating an instance of your binding so you can control the properties and public methods of your binding source/target. In above case, we are casting the BindingExpression.DataItem as CustomValidation. This enables us to access the properties of this class, "ShowErrorMessage" in this case.

4. RaiseValidationError() and ClearValidationError()
So now we have our TextBox, a method in our Extension class to bind the TextBox to our CustomValidation class and passes our error message, and a method in our Extension class that fires throw new ValidationException(message); from the CustomValidation class.

All we need to do now is to check if a specific TextBox is valid or not. If the TextBox was not valid we can simply use the RaiseValidationError() and ClearValidationError() methods, which should now be available from the intellisense in Visual Studio, to throw the validation exception and display a suitable error message and we do that by following code when the submit button was pressed:

Name.ClearValidationError();
bool isFormValid = true;
if (Name.Text == "")
{
    Name.SetValidation("Please enter your name");
    Name.RaiseValidationError();
    isFormValid = false;
}

use isFormValid variable to check if you have to submit the form or not. The Name.ClearValidationError() makes sure you clear the form everytime you press submit, so if the form was valid the error message had already been cleaned.

I have some extra validation extensions on this project and have organised the code in different class files. Download the project from here.

Silverlight QueryString Validating ID, GUID and Timestamp (Date)

damon — Wed, 07 Oct 2009 18:57:00 +0100

This post is very much a combination of my three previous posts (Silverlight QueryString using TryParse() method, Validate GUID in Silverlight – Parse GUID in C# and Extension methods in Silverlight and C#) to demonstrate all these great features in one place. I have also added an Extension method in this project to validate Date and Time using a simple Regular Expression, for better validation I suggest change the Regular Expression to match your specific needs.

I am not explaining the code for this project as each part is explained in details in the posts I mentioned above, but please do feel free to ask any questions in the comment section below and I will try to answer as soon as I can.

This project can be downloaded from CodePlex from here, and feel free to play with the working version of it below.

Validate GUID in Silverlight – Parse GUID in C#

damon — Wed, 07 Oct 2009 16:17:00 +0100

I have been looking around to find any built-in method to parse GUIDs in Silverlight, or to tell me if a value of type string is a valid GUID or not. After a few research I decided to create an Extension method to validate my GUID using Regular Expressions.

You can read more about Extension methods in Silverlight in my previous post here, but here I have a method to receive a string value and return true/false depending on if the sting value is a valid GUID or not. Anyway, here is what we can do to validate Silverlight GUID!

public static bool IsGUIDValid(string expression)
{
    if (expression != null)
    {
        Regex guidRegEx = new Regex(@"^(\{{0,1}([0-9a-fA-F]){8}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){12}\}{0,1})$");

        return guidRegEx.IsMatch(expression);
    }
    return false;
}

Extension methods in Silverlight and C#

damon — Tue, 06 Oct 2009 09:37:00 +0100

Extension methods are great way to add and use custom functionality on your objects.

So what is an Extension method?

In a short and simple describing: instead of creating a method that takes an instance of your object, applies your changes and then returns you the instance of that control, you can create an Extension method for that specific object to do the same thing but in a way of built-in within your object.

Example: if we had a TextBox that needed to have a valid text input:

And you have:

string inputEmail = InputEmail.Text;

You can do:

If (inputEmail != “” && ValidateEmail(inputEmail) == true)
{
   .
   .
}
.
.
private bool ValidateEmail(string getInputEmail)
{
   .
   .
}

or you can do it in a much cleaner and easier to understand way using “IsEmailValid” extension, which extends the string:

if (inputEmail.IsEmailValid())
{

}

You can immediately notice from the above example that how much time and line of codes you will save by simply using Extensions instead of re-writing your custom methods to apply the same operation on a common object or element within a project that uses that feature in many places.

How to add an Extension method to Silverilght objects?

First we need to add a new static class that contains a static method for our new Extension method (IsEmailValid).

public static class FrameworkElementExtensionExtensions
{
    public static bool IsEmailValid (this string getInputEmail)
    {
        bool isMatched = true;
        Regex regex = new Regex(@"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$");

        if (getInputEmail != “” && regex.IsMatch(s))
        {
            isMatched = false;
        }
        return regex.IsMatch(s);
    }
}

Note in the IsEmailValid method we used the keyword “this” before string getInputEmail, this simply means the IsEmailValid Extension method belongs to objects of type “string”.

To use the above extension method anywhere within your project, all you have to do is to import the reference to any of your classes, where you like the extension to be available, by adding “using FrameworkElementExtensionExtensions;” to that class.

Now you should even get the IsEmailValid method in your Visual Studio Intellisense when you add a dot after any string variable. So now you could simply do:

if (inputEmail.IsEmailValid()){
HtmlPage.Window.Alert("Email was successfully submitted!");
}

Above example was a very simple example, I will update the example solution regularly to include more advanced examples for you to use (copy & paste!) in the future, so please check this post later for updates. Also, this example, along with more examples in the future, is available to download from CodePlex from here.

Silverlight QueryString using TryParse() method

damon — Wed, 30 Sep 2009 22:30:00 +0100

In order to get the value of your QueryString parameters from the URL all you need is this line of code:

int id = HtmlPage.Document.QueryString["ID"];

And you need to add Windows.Browser namespace for HtmlPage class:

using System.Windows.Browser;

However, there are always two situations which could break your application:

if there are no “ID” parameters in the url
if there is an “ID” parameter in the url, but it has a string value instead of an integer number.

To avoid breaking the code and causing runtime error we need to add a few conditions and also parse the value to integer instead of assigning it right away. We can use Int32.TryParse() method to test the value which we are about to assign to an integer variable before we actually do so, this way we will only assign it if it really is an integer:

int id = -1;
if (HtmlPage.Document.QueryString.ContainsKey("ID"))
{
    string queryStringValue = HtmlPage.Document.QueryString["ID"];
    if (Int32.TryParse(queryStringValue, out id))
    {
        // the result was successful and
        // the correct ID will be inserted to id
    }
    else
    {
        // the result was not successful
    }
}

Using above method, you ensure the id gets assigned a value only if the ID parameter in the url has a valid integer value, or it will remain as -1 if the value was not an integer.

Learn Expression Blend in a Month!

damon — Wed, 30 Sep 2009 21:26:00 +0100

Gavin Wignall at Silverlight Buzz is doing a series of posts on his blog, aiming to cover the most useful information and techniques on Expression Blend for both beginners and pros. For more information, and to see the list of topics, which will be posted through the whole October, visit Learn Expression Blend in a Month! at SilverlightBuzz.com.

How to display image using ImageBrush

damon — Mon, 28 Sep 2009 13:42:00 +0100

In this example I will demonstrate how to use ImageBrush to fill area of shapes like rectangle or ellipse with an image.

In order to fill the area of a control like Rectangle control, we need to create an instance of type BitmapImage, and this is not possible if we do not have a Uri which points to a real image file.

So first, I create an Uri pointing to an image which I had put in the “images” folder in my Silverlight application project.

Hint: try to use Uri.TryCreate to create your Uri as by this way you stop your application from breaking if the path you gave your Uri was not valid or did not exist.

Second, create a new instance of BitmapImage and assign your Uri to its value.

Uri imageUri;
BitmapImage image = null;

if (Uri.TryCreate("images/SilverlightTips.jpg", UriKind.RelativeOrAbsolute, out imageUri))
{
image = new BitmapImage(imageUri);
}

Now you can create a new instance of ImageBrush and assign your created BitmapImage to its ImageSource value:

ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = image;

Finally, using .Fill method on your Rectangle control fill the entire rectangle (or any other shapes your object is) with your ImageBrush. And here is how your final code should look like:

Uri imageUri;
BitmapImage image = null;

if (Uri.TryCreate("images/SilverlightTips.jpg", UriKind.RelativeOrAbsolute, out imageUri))
{
    image = new BitmapImage(imageUri);
}
if (image != null)
{
    ImageBrush imageBrush = new ImageBrush();
    imageBrush.ImageSource = image;
    Logo.Fill = imageBrush;
    LogoEllipse.Fill = imageBrush;
    LogoRectangle.Fill = imageBrush;
}

Download this project from CodePlex from here. Here it is working:

Passing value from Child Window to parent window

damon — Thu, 24 Sep 2009 21:27:00 +0100

Silverlight Child Window is a great new feature which enables you to use advantage of a fully enhanced popup window. Child Window can be customized just like a normal xaml file to display or request information from the user. In this post I will explain briefly how receive and save information entered by user from a Child Window (ChildWindowForm.xaml in our example) and then display them in the parent window (MainPage.xam).

I am going to create an example in which user enters his/her name and surname in a Child Window and once submitted different details, along with the entered name and surname, are displayed in the main page.

I have uploaded the working example of this post to CodePlex and you can download it from here to test it for yourself.

1. add a new Child Window
in Visual Studio = right click on your Silverlight project, then, Add > New Item > Silverlight Child Window. The Child Window will have an OK and a Cancel button by default when it is created. Add two TextBox controls to the page for users to enter their name and surname.

2. Create an EventHandler in Child Window
code to create a new EventHandler:

public event EventHandler SubmitClicked;

3. Create public properties to save the values
it is possible to access the value of the TextBox controls we added in the Child Window directly from the MainPage.xaml.cs, however, this is a terrible practice as it will reduces your code stability in the future. Therefore create two public properties of type string to save the value of both TextBox controls. You will notice in my project I save the value of the TextBox in a private string variable and then save that variable to my public – this is just a better practice for coding so don’t get confused.

public string NameText
{
    get { return _nameText; }
    set
    {
        _nameText = value;
    }
}
public string SurnameText
{
    get { return _surnameText; }
    set
    {
        _surnameText = value;
    }
}

4. Fire the event once submit button is clicked in Child Window
there should already be a method for when the OK (Submit) button is pressed, it is called OKButton_Click. Inside that we need to fire the event which we created earlier, so that our event gets fired when the code reaches this method i.e. when we press OK in Child Window.

private void OKButton_Click(object sender, RoutedEventArgs e)
{
    if (SubmitClicked != null)
    {
        _nameText = Name.Text;
        _surnameText = Surname.Text;
        SubmitClicked(this, new EventArgs());
    }
    this.DialogResult = true;
}

5. In MainPage.xaml create a new instance of the Child Window
in order to display your Child Window first create a private variable your Child Window type - what ever you called your Child Window file will be the type of your variable i.e. ChildWindowForm.xaml:

private ChildWindowForm childWindowForm;

now create a new instance of it:

childWindowForm = new ChildWindowForm();

6. How to show Child Window
you need to display the actual Child Window which you created and have the instance in your MainPage. To do that, use the instance you just created and call the build-in method for any Child Window called “Show”:

childWindowForm.Show();

7. In MainPage.xaml hook up the submit event in Child Window
now we have an event which will get fired up from the Child Window when we click the submit button (OK button). All we have to do is to wire that event up so that we can do something when it is fired:

childWindowForm.SubmitClicked += new
EventHandler(childWindowForm_SubmitClicked);

8. Access the properties of the Child Window

private void childWindowForm_SubmitClicked(object sender, EventArgs e)
{
Name.Text = childWindowForm.NameText;
Surname.Text = childWindowForm.SurnameText;
}

I have skipped explaining some features that you will see in the example I created for this project (download from here) to concentrate more on the subject of this post. However if you have any questions about this post or the example please do feel free to post your comments and I will try to help as much as I can.

Add a global variable to Web.Config

damon — Tue, 22 Sep 2009 18:06:00 +0100

You could use a variable globally in your .NET website if you declare it in your Web.config file.

in your Web.config file find <appSettings> tag and insert your variables before it's closing tag:

Now you can easily access this variable and its value from your C# code:

string myVariable = System.Configuration.ConfigurationSettings.AppSettings["MyName"];

To break the above code down and to make sense of it: System really looks in your Web.Config file and the rest of the line becomes more obvious when you look at your Web.Config structure:

<?xml version="1.0" encoding="UTF-8"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
    <configSections>
      .
      .
    </configSections>
      .
     <appSettings>
       <add key="MyVariable1" value="False" />
       <add key="MyName" value="Damon Serji" />
     </appSetting>
     .
     .

So your Web.Config is nothing but a simple XML. System.Configuration tells the compiler to look in to <configuration> tag and System.Configuration.ConfigurationSettings.AppSettings tells it specifically to look into the <appSettings> tag. The result is a simple array of other tags which were added by you manually, so to find a specific tag you need to give it the index of the array i.e. an integer, or the "key" for that array, which is another way to find the tag you are looking for.

Adding meta tag to your site dynamically

damon — Tue, 22 Sep 2009 17:39:00 +0100

meta tags contain useful information that could be used by user’s browser, search engine optimization, Java Script and etc. Some of the most common ones are "keyword" and "Description" meta tags which are used for better optimization.

Changing/Adding these meta tags is particularly useful if you display different data according to user’s setting or your application setting, e.g. if you have more than one language and want to have a different keyword meta tag for each language.

Here is how to add meta tags to your site programmatically:

HtmlMeta htmlMeta = new HtmlMeta();
htmlMeta.Name = "keywords";
htmlMeta.Content = "Tips, Silverlight Tips, SilverlightTips.com";
Page.Header.Controls.Add(htmlMeta);

Above code will generate the following code in your .aspx file:

How to call a JavaScript function from Silverlight

damon — Tue, 22 Sep 2009 17:29:00 +0100

In order to call a function that you created in your .HTML or .ASPX file (which hosts your Silverlight application), you need to Invoke that function by using Invoke method in System.Windows.Browser.HtmlPage namespace:

HtmlPage.Window.Invoke("yourFunction");

If you want to pass some parameter to that function, simply add the parameters to the method using comma.

HtmlPage.Window.Invoke("yourFunction", param1, param2);

Silverlight localization

damon — Tue, 15 Sep 2009 22:11:00 +0100

This post explains how to add localization to a Silverlight application.

1. Adding a resource file (.resx) to your Silverlight project
first add a new folder to your Silverlight application and call it anything you like, i.e. LocResources, and then in your Visual Studio add a new Resource File in that folder: Add>New Item>(General category)Resources File. Then, add a new resource to your file, i.e. SiteTitle, and save it. While the resource file is opened, change the Access Modifier to Public (using the combo box).

Now copy and paste the .resx file in your LocResources folder and rename the new file to yourfilename.fr-FR.resx.

Very important: Open your resourcefile.Designer.cs file and change the Constructor to public, i.e. open SiteContent.Designer.cs and change internal SiteContent() to public SiteContent(). This will allow your MainPage to have access to this file.

A .resx file is really nothing but a XML file that contains your content in a format which can be used to localize your application, try opening the .resx file with Notepad to see it for yourself.

Please note, you can call your .resx file anything you like, but unless it is the default language of your site it has to end with the local indicator characters, i.e. if it is French your file has to be called name.fr-FR.resx

2. Add a Resources namespace and a static resource

xmlns:MyResources="clr-namespace:name"

Add the above namespace accordingly, where name is your Silverlight application name. Then add a static resource:

<UserControl.Resources>
<MyResources:SiteContent x:Name="SiteContent"/>
</UserControl.Resources>

3. Replace the hardcoded text with Static Resources
update Silverlight controls to have the following format where they display text:

Text="{Binding SiteTitle, Source={StaticResource SiteContent}}"

SiteTitle is the name of your resource data, you added this in step 1 in your resource file (.resx). SiteContent is the x:Name we gave to our reference of resource file which we created in step 2.

4. Update the .csproj file of your Silverlight project
open the .csproj file of your Silverlight project in Notepad, locate the SupportedCultures element, at the moment it should not have any value, you will need to change this to a different value if you were going to localize it for a different language than your default language, i.e. you would needed to change this to fr-FR if you were going to localize this for French language, so change this to <SupportedCultures>fr-FR</SupportedCultures> then save and close the file.

5. add InitParameters to the Silverlight control
open your TestPage.aspx (the default page that hosts your Silverlight Control in your web application project), and add InitParameters="UICulture=fr-FR" in order to localize for French. If you are using Object tag add <param name="uiculture" value="fr-FR"/>, and if you are using <asp:Silverlight ... tag add this: InitParameters="UICulture=fr-FR" to your tag.

6. Update App.xaml.cs
copy the following code to the Application_Startup method:

if (e.InitParams.Count > 0)
{
    string cultureName = e.InitParams["UICulture"].ToString();
    if (!String.IsNullOrEmpty(cultureName))
        Thread.CurrentThread.CurrentUICulture =
        new CultureInfo(cultureName);
}

You may need to addthe following namespaces to the top of the page:

using System.Threading;
using System.Globalization;

Run and enjoy!

Setting focus on ListBox items

damon — Tue, 15 Sep 2009 10:33:00 +0100

The trick is to capture the selected index of the item which has been clicked, and then assign it back to the ListBox control by using .SelectedIndex method.

The only thing I needed to do extra was to assign the .SelectedIndex to 0 before I assign it back to the actual selected index.

Also, you will see in this example that I am capturing the selected index number on .MouseLeftButtonUp of TextBlocks which are my LibBox’s items, you could off course capture this information on .Click or . MouseLeftButtonUp of any other control in your ListBox items.
You can download the working project from here.

To test the project click on an item in the ListBox, then click on Loose Focus button, and then click on Focus button to bring the focus back to the ListBox.

Setting the Z Index of a control from C#

damon — Sat, 12 Sep 2009 16:55:00 +0100

To set the ZIndex of a Silverlight control programmatically use:

Canvas.SetZIndex(_control, zIndex);

Where _control is your Silverlight control and _zIndex is an integer number which you would like the new ZIndex of your control to be assigned to.

Changing VisualState of a control programmatically

damon — Fri, 11 Sep 2009 13:43:00 +0100

How to change the state of a Silverlight control to go to a different VisualState in your VisualStateManager programmatically?

Let's say you have a VisualStateManager in your Style which has TargetType="Button" and defines different VisualStates for different events, i.e. MouseOver, Pressed, Disabled and Normal. They of course work when you mouse hover the button or press it, but if you decided to force the button to change its state from the code here is the code you need:

VisualStateManager.GoToState(_YourButton, "Normal", true);

Basic Silverlight Deep Linking

damon — Sun, 06 Sep 2009 12:48:00 +0100

DeepLinking is one of the greatest features of Silverlight 3 in my opinion and this post will show you how to add Deep Linking to your Silverlight application in four simple steps:

1. Add Frame control in MainPage.xaml
Add System.Windows.Controls.Navigation in your project References and then a reference to navigation namespace to enable you adding the Frame control.

2. Add URI Routing using UriMapper

3. Add your pages to the application
Here I have added a Homepage.xaml and About.xaml and added different content and color to them.

4. Add navigation links to your MainPage.xaml
Since we have Homepage and About page, I am going to add to HyperlinkButtons on my MainPage.xaml in order to enable me browse to my two different pages. Please note, the Homepage and About pages will appear inside your <Nav:Frame control, therefore we should have our navigation links i.e. on top/bottom and have the Frame in the middle, where the content will be displayed.

Here is the MainPage.xaml after adding the HyperlinkButtons and adjusting the layout:

Add the code behind MainPage.xaml.cs

public MainPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    HomeLink.Click += new RoutedEventHandler(HomeLink_Click);
    AboutLink.Click += new RoutedEventHandler(AboutLink_Click);
}
private void AboutLink_Click(object sender, RoutedEventArgs e)
{
    MainFrame.Navigate(new Uri("About", UriKind.Relative));
}
private void HomeLink_Click(object sender, RoutedEventArgs e)
{
    MainFrame.Navigate(new Uri("", UriKind.Relative));
}

When you click on the About link, you will navigate away from the current page, note the "#About" at the end of the URL.

The complete project can be downloaded from here.

Create a Tooltip window with smart positioning

damon — Tue, 01 Sep 2009 19:06:00 +0100

As well as demonstrating how to create a simple Tooltip control for your application, this post will also show you how to get/set the absolute position of a control in your application even if it is not a Canvas control.

The idea of tooltip is really to display some information such as images or text, when you hover the mouse on a control, and hide when you hover out.

To this, all we need to do is to change the Visibility of our control which contains that information to visible/collapse when the mouse if hovered/left.

I am going to put my information in a separate xaml file called Tooltip.xaml.

I will then add a reference to the tooltip in my MainPage.xaml file with Visibility set to Collapsed.

Now from my code behind (MainPage.xaml.cs) I can easily control the Visibility of my tooltip control by using MouseEnter and MouseLeave events.

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    tb_Tooltip.MouseEnter += new MouseEventHandler(tb_tooltip_MouseEnter);
    tb_Tooltip.MouseLeave += new MouseEventHandler(tb_Tooltip_MouseLeave);

    tb_Tooltip2.MouseEnter += new MouseEventHandler(tb_tooltip_MouseEnter);
    tb_Tooltip2.MouseLeave += new MouseEventHandler(tb_Tooltip_MouseLeave);
}

private void tb_Tooltip_MouseLeave(object sender, MouseEventArgs e)
{
    TooltipWindow.Visibility = Visibility.Collapsed;
}

private void tb_tooltip_MouseEnter(object sender, MouseEventArgs e)
{
    TooltipWindow.Visibility = Visibility.Visible;
}

As you can see from the screen shot above, the tooltip appears at the top left corner of the application if you hover your mouse on any of the "Hover me" text. So what I am going to do, is to capture the position of the "Hover me" text which the mouse is hovering, and make some calculations to workout where to display my tooltip window, and finally reposition my tooltip control before I set its visibility to Visible:

private void tb_tooltip_MouseEnter(object sender, MouseEventArgs e)
{
    TextBlock tb = sender as TextBlock;
    GeneralTransform transform = tb.TransformToVisual(LayoutRoot);
    Point position = transform.Transform(new Point(0, 0));
    double senderHeight = tb.ActualHeight;
    double senderWidth = tb.ActualWidth;

    double x = position.X;
    double y = position.Y;

    int gap = 3;

    if (x + TooltipWindow.Width + senderWidth + gap > LayoutRoot.ActualWidth)
    {
        x = position.X - TooltipWindow.Width - gap;
    }
    else
    {
        x = position.X + senderWidth + gap;
    }

    if (position.Y + senderHeight + TooltipWindow.Height >
    LayoutRoot.ActualHeight)
    {
        y = position.Y - TooltipWindow.Height + tb.Height / 2;
    }
    else
    {
        y = position.Y + tb.Height / 2;
    }

    TooltipWindow.Margin = new Thickness(x, y, 0, 0);

    TooltipWindow.Visibility = Visibility.Visible;
}

and the result for hovering on both "Hover me" text:

As you can see, the tooltip is displayed on the bottom-right of the top-left text and on the top-left of the bottom text when you hover the mouse on them. This is done by some simple calculation and comparing the final X and Y positions to the Width and Height of the main application's container control, in this case a Grid called LayoutRoot.

In order to get the coordinates of the "Hover me" text, I first had to have a transform object, so I used .TransformToVisual method and passed it the control that contains my TextBlock (LayoutRoot). I then used .Transform method to get the current position of my GeneralTransform opbject according to the very top left position of my LayoutRoot container.

Finally I set the position of my tooltip by changing its margin with new X and Y values.

Download the working version of the entire project from here

How to find individual items in list-based controls

damon — Sun, 30 Aug 2009 20:02:00 +0100

this post will give you answer to below questions:

How to find/target a Silverlight control which was added through a DataTemplate of a list-based control such as ItemsControl, ComboBox, ListBox or etc.
Use Tag property in Silverlight controls to identify different items

In order to identify different controls in your ItemsControl, you could assign a unique identifier (ID) to each control through the "Tag" property.

Code behind for adding the data:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    List<Items> itemsList = new List<Items>();
    Items it = new Items();
    it.Name = "Damon";
    it.Id = 1;
    itemsList.Add(it);
    Items it2 = new Items();
    it2.Name = "Allan";
    it2.Id = 2;
    itemsList.Add(it2);
    Items it3 = new Items();
    it3.Name = "Rachel";
    it3.Id = 3;
    itemsList.Add(it3);
    lb_test.ItemsSource = itemsList;
}

Create a new class called Items to store Name and Id

public class Items
{
public string Name {get; set;}
public int Id { get; set; }
}

and the result:

Now we need to find items inside the ListBox control and apply whatever code we want to them. Here I am going to find the TextBlock for Allan thought the ID I gave it (2) and add an MouseLeftButtonUp event to it, so when we click on Allan we get an alert popup.

First thing we need to do is to add the following line to the end of our MainPage_Loaded method (after the ItemsSource of our ListBox is assigned):

CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

Above line will re-render you layout to force any updates you have done after your xaml was initially rendered.

And here is the method that is called through the above code:

private void CompositionTarget_Rendering(object sender, EventArgs e)
{
AddEventHandlers(lb_test, -1);
}

And finally the method to find the TexBlock we are looking for, and adding the EventHandler:

private void AddEventHandlers(DependencyObject parent, int childIndex)
{
    DependencyObject child;
    TextBlock textBlock;
    int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
    if (parent == lb_test && childrenCount > 0)
    {
        CompositionTarget.Rendering -= CompositionTarget_Rendering;
    }
    for (int index = 0; index < childrenCount; index++)
    {
        child = VisualTreeHelper.GetChild(parent, index);
        if (child is TextBlock)
        {
            textBlock = (TextBlock)child;
            if (textBlock.Tag != null)
            {
                int id = (int)textBlock.Tag;
                if (id == 2)
                {
                    textBlock.MouseLeftButtonUp +=
                    new MouseButtonEventHandler(textBlock_MouseLeftButtonUp);
                    textBlock.Foreground = new SolidColorBrush(Colors.Green);
                }
            }
        }
        else if (child is ContentPresenter)
        {
            AddEventHandlers(child, index);
        }
        else
        {
            AddEventHandlers(child, childIndex);
        }
    }
}

private void textBlock_MouseLeftButtonUp(object sender
, MouseButtonEventArgs e)
{
    TextBlock tb = sender as TextBlock;
    if (tb != null)
    {
        System.Windows.Browser.HtmlPage.Window.Alert(tb.Text + " was
        clicked!");
    }
}

In summary, we are passing the x:Name of our ListBox "parent" to the AddEventHandlers and search in its children for any TextBlock controls. If we didn’t find any TextBlock we search in any other searchable controls we find inside that and we do that again until we find all TextBlocks or there is no more controls to search within.

When we find a TextBlock, we check if it has a Tag property and if the value is what we were looking for, if true, we simply add or EventHandler, change color, or do anything we want to do to that TextBlock.

Download the working version of the entire project from here.

Adding 'mailto' link

damon — Mon, 24 Aug 2009 16:44:00 +0100

How to programmatically add a 'mailto' link in silverlight:

Add the below line to your .xaml.cs file to open mailto (email link) when an event gets fired (i.e. HyperlinkButton is clicked or etc):

HtmlPage.Window.Navigate(new Uri("mailto:tips@silverlighttips.com"));

if HtmlPage is not recognised in your Visual Studio, it is because you are missing an assemblly reference, so simply add this reference to the very top of your page:

using System.Windows.Browser;

Uri:	Takes the URL of the RSS feed
XmlReader:	Represents a reader that provides fast, non-cached, forward-only access to XML data” (msdn)
SyndicationFeed:	Represents a top-level feed object, <feed> in Atom 1.0 and <rss> in RSS 2.0” (msdn)
WebClient:	Receives data from a recource defuned by Uri (in our case a URL to RSS or XML file)