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.

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:


<param name="onload" value="onSilverlightLoad" />

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


<script type="text/javascript">
    CheckSupported();
</script>   
</body>

Posted by Damon Serji on 10. February 2010 13:24 under: Intermediate
 with 1 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

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


<object data="data:application/x-silverlight," type="application/x-silverlight"
id="SL">
    <param name="splashscreensource" value="loading.xaml" />
    <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

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.

Posted by Damon Serji on 30. December 2009 12:47 under: Intermediate
 with 9 Comments

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.

Posted by Gavin Wignall on 30. December 2009 11:33 under: Intermediate
 with 2 Comments
Get Microsoft Silverlight  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:


<Grid x:Name="LayoutRoot" Height="50">
    <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="19" />
    <TextBlock Text="{Binding Surname}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,2,0,19" />
    <TextBlock Text="Tel:" Margin="0,17,0,6" HorizontalAlignment="Left" />
    <TextBlock Text="{Binding Telephone}" Margin="25,17,0,7" />
</Grid>

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:


<ItemsControl x:Name="Contacts" ItemsSource="{Binding}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Local:ContactTemplate />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

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.

Posted by Allan Muller on 14. December 2009 19:33 under: Intermediate
 with 1 Comments
Get Microsoft Silverlight  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:


<TextBlock x:Name="Error" />

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.

Posted by Damon Serji on 4. December 2009 00:06 under: Intermediate
 with 2 Comments
Get Microsoft Silverlight Latest posts from SilverlightTips.com

Displaying a RSS feed is a very straight forward task in Silverlight.

In summary: we need to access and download the RSS (XML file) and read it as a single string value, read the downloaded string as XML using XmlReader class, load the XML into a variable of type SyndicationFeed, and finally using a loop extract each node and save it in a desirable variable.

Some of the Silverlight built-in classes used in this example are:

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)

I am going to demonstrate how to read and display a RSS feed (XML file) in three simple steps:

Step 1: Create a custom RSS class
here I am just creating a new public class (RSSItem) for my RSS feed to contain any information I would like to keep for each item in the RSS. This will help to keep my project tidy and my code meaningful. In my RSSItem class I will add as many properties as I need:

public class RSSItem
{
    #region Properties
    public string RSSTitle {get; set;}
    public string RSSDescription { get; set; }
    public Uri RSSLink { get; set; }
    #endregion
}

Step 2: Reading the RSS feed in Silverlight
create three private variables for Uri, XmlReader and SyndicationFeed (for this you need to add a new reference in your project to System.ServiceModel.Syndication – do this by right clicking on ‘References’ folder in you Silverlight project and clicking on ‘Add Reference...’)

private Uri rssUri;
private XmlReader xmlReader;
private SyndicationFeed feed;

and don't forget to add the namespaces:

using System.Xml;
using System.ServiceModel.Syndication;

Now, in your constructor or ‘Loaded’ method add the following:

rssUri = new Uri("http://feeds.feedburner.com/Silverlighttips");
WebClient client = new WebClient();
client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
client.DownloadStringAsync(rssUri);

WebClient is another built-in class in Silverlight and is used to open the XML (RSS). Since the operation is done asynchronously the callback method (DownloadStringCompleted) is called after the operation is done.

Step 3: Populate RSS nodes
first, add an ItemsControl in the MainPage.xaml:


<ItemsControl x:Name="RSS" ItemsSource="{Binding}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <HyperlinkButton x:Name="Title" NavigateUri="{Binding RSSLink}"
             Width="305" Margin="0,22,0,15" Foreground="#FF10589F"
             FontSize="12" FontWeight="Bold">
                <HyperlinkButton.Content>
                  <TextBlock Text="{Binding RSSTitle}" TextWrapping="Wrap" />
               </HyperlinkButton.Content>
            </HyperlinkButton>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

In the ItemsControl we can bind the required properties from our RSSItem class using {Binding nameOfProperty}.

Now, from our DownloadStringCompleted method in MainPage.xaml.cs we can retrieve the RSS in form of a string. Then, we can create our XmlReader and load it to a SyndicationFeed variable which treats the XML as a 'RSS' and allow us to use its properties:

private void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error == null)
    {
        int itemsCount = 5;
        xmlReader = XmlReader.Create(new StringReader(e.Result));
        feed = SyndicationFeed.Load(xmlReader);
       
        List<RSSItem> itemsList = new List<RSSItem>();

        if (feed.Items.Count() < 5)
        {
            itemsCount = feed.Items.Count();
        }

        for (int i = 0; i <= itemsCount; i++)
        {
            RSSItem rssitem = new RSSItem();
            rssitem.RSSTitle = feed.Items.ToList()[i].Title.Text;
            rssitem.RSSLink = feed.Items.ToList()[i].Links[0].Uri;
            itemsList.Add(rssitem);
        }
        RSS.ItemsSource = itemsList;
    }
}

you will need to add the namespace for the StringReader:

using System.IO;

In the above method from top:

  • check if there are any errors in the result, if not continue
  • set the number of items to read
  • load the XML into a SyndicationFeed variable
  • create a new List of type RSSItem to hold each RSSItem
  • if the number of total RSS items to be found (itemsCount) is greater than the total number of RSS items available then go with the total number of available items
  • search in each node for ‘Title’ and ‘Summary’ (description)
  • add Title and Summary of each RSS item to the variable of type RSSItem class, and finally add the rssitem to the RSSItem list
  • at the end we bind our itemsList to 'RSS' which is an ItemsControl in our XAML page
Posted by Damon Serji on 29. November 2009 14:52 under: Intermediate
 with 6 Comments
Get Microsoft Silverlight

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.

Posted by Damon Serji on 8. October 2009 19:24 under: Advance, Intermediate
 with 9 Comments

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.

Get Microsoft Silverlight
Posted by Damon Serji on 7. October 2009 18:57 under: Intermediate
 with 1 Comments

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;
}

Posted by Damon Serji on 7. October 2009 16:17 under: Intermediate
 with 0 Comments