80-20 Rule: Silverlight

Showing posts with label Silverlight. Show all posts

Tuesday, May 27, 2014

Decompiling BAML

We know that XAML is a declarative markup language. XAML simplifies creating a UI for .NET application created using WPF or Silverlight. It is simple and easy to create UI elements using XAML, and then separate the design from run-time logic by using code-behind files, joined to the markup by partial class definitions. So what is a BAML ?

BAML is the short form of Binary Application Markup Language, as the name implies it is a binary representation of the XAML file containing implementation details. It is nothing but parsed, tokenism and XAML that is converted into binary format. Tokenized means lengthier bits of XAML are replaced with shorter tokens. It is compressed declarative format that is faster to load and parse also it is smaller in size as compared to regular XAML.

So when you compile a WPF project, all XAML files whose build action are set to Page or Resource gets converted to BAML and then embedded as resource in the assembly. So now you have a binary object that is smaller and also optimized in a way that makes it faster to parse at runtime. BAML gets embedded as a resource so developer don't need to worry about linking,parsing or referencing anything except calling InitializeComponent() in code-behind.

BAML is converted to implementation code during runtime, internally it is used for creating objects. If you set the x:shared attribute to false, a new copy is created from the BAML every time you use the object. In earlier versions developers didn't have access to BAML, After WPF 4 the new implementation of XamlReader.Load(), BAML loading, Control & DataTemplates functionality with a new engine built on top of the new System.Xaml.dll, I know back in the early days of WPF that CAML was generated rather than BAML, looks like the WPF team has decided to eliminate it, and keep the BAML version.

Baml2006Reader :
Again as most of us know that in WPF, UI can be created either by code or by XAML-which is basically an declarative XML to describe object graphs. This approach makes UI development easy and fast but parsing XAML file at runtime is quite expensive. So the MarkupCompiler converts the XAML file to BAML.The BAML API is something unique of WPF and was not public until .NET 4.0. Now it's available through the Baml2006Reader implementation. The following code shows how to load a BAML stream .Baml2006Reader uses Reflection to load the assemblies needed for decompilation, which is a little expensive.

var reader = new Baml2006Reader(stream);
var writer = new XamlObjectWriter(reader.SchemaContext);
while(reader.Read())
{
    writer.WriteNode(reader);
}
return writer.Result;

A simple way to decompile the generated BAML is by using the dotPeek from JetBrains or .NET Reflector. Lets walk through the process of installing the plugin.

dotPeek : We have to build and install a plugin for dotPeek. To install the plugin follow this steps.

Download the addin Baml4dotPeek from the github project https://github.com/cprieto/Baml4dotPeek
Build the project, you might have to update reference to point to your dotPeek bin folder.
A successful build will generate a output file "BamlFromResource.dll".
Copy this file to the dotpeek bin directory.
Restart dotPeek, and verify form the Tools|Options, if you have the BamlDecompiler.

Once you have the plugin installed open any WFP project and expand the directory tree to find the resources . From the resources you will find some baml file, select any file and the window on the right will display the xaml for that resource.

Note: For Silverlight the XAML files are not converted in to BAML.When you build a Silverlight project a .xap file is created, it is just a .zip-file containing an AppManifest.XAML and all resources in your project compiled as dll's. You can verify that by opening a dll in dotPeek or Reflector, it will show the XAML-files and other resources.

Friday, January 13, 2012

Visual Studio Templates for Silverlight

For Visual Studio and Silverlight there are nice templates available online. If you are a new developers this templates will be very useful, also for experience developers they should be a handy tool in their toolbox. In this post we will learn how to install the project item templates and use them. I assume every .NET developer should have used the inbuilt visual studio template's and understand how helpful they can be.

The five template are :-
1) Silverlight Client Access Policy File:-
This templates adds a file named clientaccesspolicy.xml in the root folder of the Silverlight project.Silverlight 4 supports two different mechanisms for services to enable cross-domain access clientaccesspolicy.xml or crossdomain.xml file. This file need to be at the root of the domain where the service is hosted, I tend to use clientaccesspolicy.xml file because it provides more granular control over allowed domains and can also be used to set configuration for Sockets.A very good explanation can be found here http://www.devtoolshed.com/explanation-cross-domain-and-client-access-policy-files-silverlight

Either way, when you are done the policy file needs to go in the ROOT of the domain. This is important as it is not the application root, but the root web. Even if your app is located at foo.com/myapp, the policy file needs to be at foo.com/clientaccesspolicy.xml.

2) Value Converter:-
This templates adds a file for converter.

3) C# Trigger Template for Silverlight:-
This templates adds a file for trigger.

4) C# Behavior Template for Silverlight:-
This templates adds a file for behavior.

5) C# Action Template for Silverlight:-
This templates adds a file for action.

How to get the templates ?
Open Visual Studio, open an existing silverlight project or create new one.
Right click on the Silverlight Project –> Add -> New Item ->(left side) select Online Templates -> Silverlight

Organizing the templates
This templates will create files and place them under the root folder. What I do is usually create folders in the silverlight project named as behaviors,triggers,actions,converters. How this helps? eventually and gradually when the projects files increase its easy to locate code-files and manage them effectively.

Code Snippets
I know there are code snippets available for the same, I like the templates because a single click will generate the file with basic code and it opens the popular open-file dialog where you can name the file.

Sunday, October 30, 2011

Silverlight Cookie Manager

Cookies are popular in web programming for state management, mostly used for persisting small data on client computer. Each cookie is a name-value pairs, this information is stored as small files on client hard-disk. You can also set expiration date and time of a cookie. If no expiration is provided cookie will be discarded when user closes the browser, this type of non-persistent cookies is useful to store secure or short time data.

In Silverlight, one can access cookies through the 'HtmlPage' class. This class provides browser functionalities and other details like Cookie data, Browser name and version, Popup Window, Platform, UserAgent, Product name and version. Below is a diagram illustrating how the Silverlight plug-in access cookies through the browser. In traditional web programming, the Response Object or java script is used to set a cookie. A user can disable cookies on his browser, so while using the response object we should check if cookies are enabled or not. To verify if cookies are enabled, set a cookie and try to read it back, if you can't read it means cookies are disabled. Silverlight code executes on client PC, so we can directly check if cookies are enabled or not just by using 'HtmlPage.BrowserInformation.CookiesEnabled'.

Securing cookie data is very important and should be take in account during application design. To prevent unauthorized access of cookies, combination of tricks can be used like encryption, expiration time, HttpOnly,etc. Silverlight code executes on client PC and cannot access HttpOnly cookies. Cookie class is a part of 'System.Net' and is used to retrieve information about cookies that are received with Http responses. Cookies are stored in a CookieContainer on a Web request, and a CookieCollection on a Web response. You must always create a CookieContainer to send with a request if you want cookies to be returned on the response, also for HTTPOnly cookies.

Limitation if a cookie is that it can store only string data types.
1) Some user may disable cookies on their browser in some case user may manually delete cookies
2) Size limitations Most browsers place a 4096-byte limit on the size of a cookie, although support for 8192-byte cookies is becoming more common in newer browser and client-device versions.
3) User-configured refusal Some users disable their browser or client device's ability to receive cookies, thereby limiting this functionality.
4) Potential security risks Cookies are subject to tampering. Users can manipulate cookies on their computer, which can potentially cause a security risk.

I have created a simple class that aggregates common functionality related to cookies. All members in the class are static so there is no need to create new instances every time you read or write a cookie. The overloaded method SetCookie() will create a new cookie or reset the value of an existing cookie, you can also set the expiration time, path, domain, security using the same method. GetAllCookieList() method will return a list of all available cookies. DeleteCookie() method will delete the cookie by setting the expiration time to yesterday. GetCookieAsString() will return the full cookie data as a string.

 using System; 
using System.Net; 
using System.Text; 
using System.Linq;  
using System.Collections.Generic; 
using System.Windows.Browser; 
  
namespace Utilities 
{ 
    public static class CookieManager 
    { 
        // 1) If same name cooke exist, SetCookie() will over-ride value. 
        // 2) Exception handling should be done in user code  
        // 3) - expireDays = 0, indicates a session cookie that will not be written to disk  
        //    - expireDays = -1, indicates that the cookie will not expire and will be permanent  
        //    - expireDays = n, indicates that the cookie will expire in n days  
  
  
        public static bool IsCookieEnabled() 
        { 
            return HtmlPage.BrowserInformation.CookiesEnabled; 
        } 
  
        public static bool SetCookie(string key, string value) 
        { 
            return SetCookie(key, value, null, null, null, false); 
        } 
  
        public static bool SetCookie(string key, string value, TimeSpan? expiry) 
        { 
            return SetCookie(key, value, expiry, null, null, false); 
        } 
  
        public static bool SetCookie(string key, string value, TimeSpan? expiry, string path, string domain, bool secure) 
        { 
            if (!IsCookieEnabled()) return false; //If cookies not enabled return false. 
  
            StringBuilder sbCookie = new StringBuilder(); 
            sbCookie.Append(string.Concat(key, "=", value)); 
  
            if (expiry.HasValue) 
            { 
                DateTime expire = DateTime.UtcNow + expiry.Value; sbCookie.Append(string.Concat(";expires=", expire.ToString("R"))); 
            } 
  
            if (path != null) 
            { 
                sbCookie.Append(string.Concat(";path=", path)); 
            } 
  
            if (domain != null) 
            { 
                sbCookie.Append(string.Concat(";domain=", domain)); 
            } 
  
            if (secure) 
            { 
                sbCookie.Append(";secure"); 
            } 
  
            HtmlPage.Document.SetProperty("cookie", sbCookie.ToString());  // User should handle exceptions if any while writing cookie. 
  
            return true; 
        } 
  
        public static List<Cookie> GetAllCookieList() 
        { 
            string[] cookies = HtmlPage.Document.Cookies.Split(';'); 
            List<Cookie> cookieList = new List<Cookie>(); 
            foreach (string cookie in cookies) 
            { 
                string[] cookieParts = cookie.Split('='); 
                if (cookieParts.Count() >= 1) 
                { 
                    cookieList.Add(new Cookie(cookieParts[0].Trim(), cookieParts[1].Trim())); 
                } 
            } 
  
            return cookieList; //User should check for count to know how many cookies are retrieved. 
  
            ////LINQ code 
            //return (from cookie in cookies 
            //        select cookie.Split('=') 
            //            into cookieParts 
            //            where cookieParts.Count() >= 1 
            //            select new Cookie(cookieParts[0].Trim(), cookieParts[1].Trim())).ToList(); //User should check for count to know how many cookeies are retrieved. 
        } 
  
        public static CookieCollection GetAllCookieCollection() 
        { 
            string[] cookies = HtmlPage.Document.Cookies.Split(';'); 
            CookieCollection cookieCollection = new CookieCollection(); 
            foreach (string cookie in cookies) 
            { 
                string[] cookieParts = cookie.Split('='); 
                if (cookieParts.Count() >= 1) 
                { 
                    cookieCollection.Add(new Cookie(cookieParts[0].Trim(), cookieParts[1].Trim())); 
                } 
            } 
            return cookieCollection; //User should check for count to know how many cookies are retrieved. 
  
            //LINQ code  
            //foreach (string[] cookieParts in 
            //   cookies.Select(cookie => cookie.Split('=')).Where(cookieParts => cookieParts.Count() >= 1)) 
            //{ 
            //    cookieCollection.Add(new Cookie(cookieParts[0].Trim(), cookieParts[1].Trim())); 
            //} 
            //return cookieCollection; //User should check for count to know how many cookies are retrieved. 
        } 
  
        public static string GetCookieAsString(string key) 
        { 
            string[] cookies = HtmlPage.Document.Cookies.Split(';'); 
  
            foreach (string cookie in cookies) 
            { 
                string[] keyValue = cookie.Split('='); 
  
                if (keyValue.Length == 2) 
                { 
                    if (keyValue[0].ToString().Trim() == key) //sometime we get one space infront of the cookie so need to Trim() 
                    { 
                        return cookie; 
                    } 
                } 
            } 
            return null; 
            //LINQ code  
            //return (from cookie in cookies 
            //        let keyValue = cookie.Split('=') 
            //        where keyValue.Length == 2 
            //        where keyValue[0].ToString().Trim() == key 
            //        select cookie).FirstOrDefault(); 
        } 
  
        public static string GetValue(string key) 
        { 
            string[] cookies = HtmlPage.Document.Cookies.Split(';'); 
  
            foreach (string cookie in cookies) 
            { 
                string[] keyValue = cookie.Split('='); 
  
                if (keyValue.Length == 2) 
                { 
                    if (keyValue[0].ToString().Trim() == key) //sometime we get one space infront of the cookie so need to Trim() 
                    { 
                        return keyValue[1]; //this will return only Value                          
                    } 
                } 
            } 
  
            return null; 
            //LINQ code  
            //return (from cookie in cookies 
            //        select cookie.Split('=') 
            //            into keyValue 
            //            where keyValue.Length == 2 
            //            where keyValue[0].ToString().Trim() == key 
            //            select keyValue[1]).FirstOrDefault(); 
        } 
  
        public static bool DeletCookie(string key) 
        { 
  
            if (Exists(key, ""))// check if cookie is present or not  
            { 
                DateTime expireDate = DateTime.Now - TimeSpan.FromDays(1); // yesterday 
                string expires = ";expires=" + expireDate.ToString("R"); 
                string cookie = key + "=" + expires; 
                HtmlPage.Document.SetProperty("cookie", cookie); 
                return true; 
            } 
            else 
            { 
                return false; 
            } 
        } 
  
        public static bool Exists(string key, string value) 
        { 
            if (string.IsNullOrEmpty(key)) 
                return false; //If key not provided, return false 
  
            return string.IsNullOrEmpty(value) 
                       ? HtmlPage.Document.Cookies.Contains(key + "=") 
                       : HtmlPage.Document.Cookies.Contains(key + "=" + value); 
        } 
  
    } 
}

Cookie FAQ
http://www.cookiecentral.com/faq/

Silverlight cookies
http://msdn.microsoft.com/en-us/library/dd920298%28v=VS.95%29.aspx

HttpOnly cookies
http://msdn.microsoft.com/en-us/library/system.web.httpcookie.httponly.aspx

Wednesday, February 9, 2011

Silverlight double click event

We had to perform some business logic when a user double click’s on a Image, unfortunately till the current version of silverilght( version 4.x) there is no double click event. In future versions of silverlight we might get the double click functionality but for right now we will have to get this done by our self. So how do we implement double click event? The trick is to start a timer and check if the MouseLeftButtonDown event is fired again in certain duration(milliseconds).

Code is very simple and short, In the xaml we have a Image with a MouseLeftButtonDown event in the code behind we add a dispatch timer which is a part of System.Windows.Threading. On the first click start the timer, when next click event is fired check if the timer is active, if the timer is active then it is a double click so go ahead and perform the intended action.

    private DispatcherTimer timer;
   public MainPage()
   {
       InitializeComponent();
       timer = new DispatcherTimer();
       timer.Interval = new TimeSpan(0, 0, 0, 200);
       timer.Tick += new EventHandler(( sender,  e) => { timer.Stop(); });
   }
 
   private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
   {
       if (!timer.IsEnabled)
       {
           timer.Start();return;
       }
       timer.Stop();
       HandleDoubleClick();
   }
 

DoubleClick Class
The above functionality can be encapsulated in a class for a cleaner looking code. The class ‘DoubleClick’ has a dispatch timer and a public event. In the constructor you pass the UIElement as parameter and hook the MouseLeftButtonDown event. The timer tick event has an inline event handler defined that will stop the timer on the first tick.

 namespace DoubleClickInSL4
{
    using System.Windows.Threading;
    public class DoubleClick
    {
        private const int dblclickDelay = 200;
        private DispatcherTimer timer;
        public event MouseButtonEventHandler MouseDoubleClick;
 
        public DoubleClick(UIElement uiElement)
        {
            timer = new DispatcherTimer();
            timer.Interval = new TimeSpan(0, 0, 0, dblclickDelay);
            timer.Tick += new EventHandler((sender, e) => { timer.Stop(); });
 
            uiElement.MouseLeftButtonDown += new MouseButtonEventHandler(UIElement_MouseLeftButtonDown);
        }
 
        private void UIElement_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!timer.IsEnabled)
            {
                timer.Start();
                return;
            }
            timer.Stop();
 
            //HandleDoubleClick();
            if (MouseDoubleClick != null)
            {
                MouseDoubleClick(sender, e);
            }
        }
    }
}
 

Rx Framework
A very interesting use of the Rx framework can simplify the above code to just couple of lines. In the MouseLeftButtonDown event we add a Observable.FromEvent and set TimeInterval, so when the event is fired for the first time the timer starts. On the second event the code in the body of lambda will be executed which checks if duration is greater then 300.

 private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{           
   Observable.FromEvent<MouseButtonEventArgs>(this.LayoutRoot, "MouseLeftButtonDown").TimeInterval().Subscribe(evt =>
    {
        if (evt.Interval.Milliseconds >= 300)
        {
            // Do something on double click 
        }
    }); 
}
 

Doubleclick Behaviour
The above code is helpful for application that handles the logic directly in the codebehind, so how about MVVM application where the application logic is handled in the model view. A decent solution for such a scenario would be to write a behavior that implements the double click functionality. There are many posts which explain how to create a behaviors so I will not go in details, basically this double click behavior have a dependency property named as DoubleClickCommand that will bind to a property in the view model of type ICommand. I created a class called as DelegateCommand which implements the interface ICommand, this class will be instantiated in the view model and assigned to view models property.

 namespace DoubleClickInSL4
{
    using System.Windows.Threading;
    public class DoubleClickBehavior : Behavior<UIElement>
    {
        private const int dblclickDelay = 200;
        private DispatcherTimer timer;
 
        public object CommandParameter
        {
            get { return (object)GetValue(CommandParameterProperty); }
            set { SetValue(CommandParameterProperty, value); }
        }
        public ICommand DoubleClickCommand
        {
            get { return (ICommand)GetValue(DoubleClickCommandProperty); }
            set { SetValue(DoubleClickCommandProperty, value); }
        }
 
        public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.Register
            ("CommandParameter", typeof(object), typeof(DoubleClickBehavior), new PropertyMetadata(CommandParameterChanged));
        private static void CommandParameterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { }
 
        public static readonly DependencyProperty DoubleClickCommandProperty = DependencyProperty.Register
            ("DoubleClickCommand", typeof(ICommand), typeof(DoubleClickBehavior), new PropertyMetadata(DoubleClickCommandChanged));
        private static void DoubleClickCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { }
 
        public DoubleClickBehavior()
        {
            timer = new DispatcherTimer();
            timer.Interval = new TimeSpan(0,0, 0, 0, dblclickDelay);
            timer.Tick += new EventHandler((sender, e) => 
            { timer.Stop(); });
        }
        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.MouseLeftButtonDown += UIElement_MouseLeftButtonDown;
        }
        protected override void OnDetaching()
        {
            base.OnDetaching();
            AssociatedObject.MouseLeftButtonDown -= UIElement_MouseLeftButtonDown;
        }
 
        private void UIElement_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!timer.IsEnabled)
            {
                timer.Start();
                return;
            }
            timer.Stop();
 
            //HandleDoubleClick();
            if (CommandParameter != null)
                DoubleClickCommand.Execute(CommandParameter);
        }
    }
}
 
namespace DoubleClickInSL4
{
     public class DelegateCommand : ICommand   
     {   
         Func<object, bool> canExecute;   
         Action<object> executeAction;   
         bool canExecuteCache;   
         public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecute)  
         {  
             this.executeAction = executeAction; 
             this.canExecute = canExecute; 
         }  
         #region ICommand Members  
         public bool CanExecute(object parameter)  
         {  
             bool temp = canExecute(parameter); 
             if (canExecuteCache != temp) 
             {  
                 canExecuteCache = temp; 
                 if (CanExecuteChanged != null) 
                 {  
                     CanExecuteChanged(this, new EventArgs()); 
                 }  
             }  
             return canExecuteCache; 
         }  
         public event EventHandler CanExecuteChanged;  
         public void Execute(object parameter)  
         {  
             executeAction(parameter); 
         }  
           #endregion
     }
}
 

Here is the code for the MainPage.xaml.cs

 using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Threading;
using System.Windows.Interactivity;
 
namespace DoubleClickInSL4
{    
    public class myViewModel
    { 
        public ICommand DoubleCommand { get; set; }
        public myViewModel()
        {
            DoubleCommand = new DelegateCommand(myAction, canExe);
        }     
        private void myAction(object param)
        { //Write your action here }
        private bool canExe(object param)
        { return true; }
    }
 
    public partial class MainPage : UserControl
    {      
        public MainPage()
        {
            InitializeComponent();
            Image.DataContext = new myViewModel();
        }
    }
}
 

Here is the xaml for the MainPage.xaml.

 <UserControl x:Class="DoubleClickInSL4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:Local="clr-namespace:DoubleClickInSL4"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Local:myViewModel x:Name="vm"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="400">
        <Image x:Name="Image" Source="Images/80_20.jpg"  >
            <i:Interaction.Behaviors>
                                <Local:DoubleClickBehavior DoubleClickCommand="{Binding DoubleCommand}" CommandParameter="{Binding ElementName=Image,Path=Source}"/>
            </i:Interaction.Behaviors>
                               </Image>
    </Grid>
</UserControl>
 

Extending Silverlight mouse events

SharpGIS has a very interesting blog post about extending the silverlight mouse events. Including double-clicks they have provided many more extensions with source code and a online demo.
http://www.sharpgis.net/post/2009/05/02/Extending-Silverlighte28099s-mouse-events.aspx

Wednesday, February 2, 2011

Exam 70-506 ( TS: Silverlight 4, Development )

In November I gave the beta exam for silverlight 4, it took me more then four hours to complete the exam questions, review and comment. For beta exams you do not get the score right away, exactly after three months I got an email from Microsoft stating that I passed the beta exam for silverlight and now I am certified Silverlight 4,Developer.

Silverlight exam is now released and is available through prometric testing centers and the exam number is 70-506. I like beta exams because they are challenging, one reason is you don't get ready made material to study all you have is MSDN documents, blogs,some samples and forums. There is a huge community support for silverlight and luckily there where some good books in the market. I find many of my fellow programmers worried about not able to find definite material to prepare for the exam. I am going to put together a list of useful links that will help to prepare for the exam.

Exam details on Microsoft learning.
http://www.microsoft.com/learning/en/us/Exam.aspx?ID=70-506&Locale=en-us#tab2

Some good books
Professional Silverlight 4
Silverlight 4 in Action
Pro Silverlight for the Enterprise
Microsoft Silverlight 4 Data and Services Cookbook

Forums
http://forums.silverlight.net
http://social.msdn.microsoft.com/Forums/eu/silverlightdeveloper/threads

Links

Silverlight Show Getting ready for silverlight exam 70-506
http://www.silverlightshow.net/items/Getting-ready-for-the-exams-Part-1.aspx
http://www.silverlightshow.net/items/Getting-ready-for-Microsoft-Silverlight-Exam-70-506-Part-2.aspx
http://www.silverlightshow.net/items/Getting-ready-for-Microsoft-Silverlight-Exam-70-506-Part-3.aspx
http://www.silverlightshow.net/items/Getting-ready-for-Microsoft-Silverlight-Exam-70-506-Part-4.aspx
http://www.silverlightshow.net/items/Getting-ready-for-Microsoft-Silverlight-Exam-70-506-Part-5.aspx
http://www.silverlightshow.net/items/Getting-ready-for-Microsoft-Silverlight-Exam-70-506-Part-6.aspx
http://www.silverlightshow.net/items/Getting-ready-for-Microsoft-Silverlight-Exam-70-506-Part-7.aspx

Mark’s Blog
http://mark.mymonster.nl/2010/10/25/exam-preparationsilverlight-4-development70-506part-1/
http://mark.mymonster.nl/2010/10/26/exam-preparationsilverlight-4-development70-506part-2/
http://mark.mymonster.nl/2010/10/31/exam-preparationsilverlight-4-development70-506part-3/
http://mark.mymonster.nl/2010/11/01/exam-preparationsilverlight-4-development70-506part-4/
http://mark.mymonster.nl/2010/11/02/exam-preparationsilverlight-4-development70-506part-5/
http://mark.mymonster.nl/2010/11/03/exam-preparationsilverlight-4-development70-506part-6/
http://mark.mymonster.nl/2010/11/04/exam-preparationsilverlight-4-development70-506part-7/

Microsoft training catalog
http://learning.microsoft.com/Manager/Catalog.aspx?qry=silverlight&nav=0&btn=1

Silverlight Documents on MSDN
http://msdn.microsoft.com/en-us/library/cc838158(VS.95).aspx

Silverlight 4 Hands On Labs
http://www.silverlight.net/learn/handsonlabs/

List of all popular books
http://www.silverlight.net/learn/books/

Chanel 9 - What's New in Silverlight 4
http://channel9.msdn.com/Learn/Courses/Silverlight4/Overview

Videos and screen cast
http://www.silverlight.net/learn/videos/all/
http://blogs.msdn.com/b/joestagner/archive/2008/08/01/44-silverlight-videos.aspx
http://sandrinodimattia.net/blog/post/Complete-Expression-Blend-and-Silverlight-5-day-OnRamp-training-course-All-videos-all-assets-download-packages-in-one-place.aspx

For developers having right experience the exams are not really tough but I would say the questions are tricky so make sure you have good hands-on experience with silverlight before you appear for the exam. Although the exam focuses on sivlerlight 4, I would say Visual Studio 2010 and Expression Blend are inevitable tools for a silverlight developer. I have tried to put together some of the good links, if you find some more good links please put them in the comments

Wednesday, December 22, 2010

Performance Wizard for Silverlight

Microsoft has released the first service pack for Visual studio 2010, although the service pack is marked as beta it comes with a “go live” license. Along with it two other service packs are released Team Foundation Server 2010 SP1 Beta and .NET 4.0 SP1 Beta. For Silverlight developers they have packed two update in the Visual studio 2010 SP1 Beta.

1) Silverlight 4 tools for Visual Studio 2010 : “The Silverlight 4 tools are now included along with Silverlight 3 support”, all it means that you will not have to install Silverlight 4 tools separately.

2) Performance Wizard for Silverlight : This will enable the users to profile the silverlight application performance directly through visual studio, user can create profiling reports and save them.

You can get the download links from Brian blog, he has nicely detailed all important updates in the service packs
http://blogs.msdn.com/b/bharry/archive/2010/12/07/vs-tfs-2010-sp1-beta-has-released.aspx
Once you have downloaded the web installer, be patient as the install will take some time to download the packages and install, for me the process took around an hour from start to finish. After successful installation you will be ask to restart your computer, now you visual studio is all set to start profiling your silverlight application using the wizard.

The Performance Wizard is very simple let us go set by step through it, open a existing silverlight project or create a new project. To launch the ‘Performance Wizard’ go to the main menu find Analyze –> Launch Performance Wizard…

Performance wizard page 1 of 3 should be displayed, CPU Sampling must be selected by default if not the check mark the radio button before CPU Sampling.

Performance wizard page 2 of 3, on this page you will find a list of projects depending on the structure of your solution. Typically for a silverlight project you will find the silverlight application and the web application in the list, select your silverlight application and click the ‘Next’ button.

Performance wizard page 2 of 3, is just a summary that say’s all the information needed has been collected. Make sure on this page you have the check mark on the check box labeled as Launch profiling after the wizard finishes. When you click finish the application should open in your default browser.

If you are not running as administrator you might get an error saying “ Unable to open profiler driver, would you like to upgrade credentials ..“ . Just click ‘yes’ and provide admin credentials if needed.

Once above steps are done the Performance Explore with be populated with a structure similar to the image below. The performance wizard has created two folders Reports and Targets.

Ok now lets do simple performance test,Let us create a simple application and see how performance report looks like.Create a silverlight application, In your main page add a button and on the click of the button we should have a function that does some kind of cpu intensive activity. I have simply created nested loop to keep the cpu busy for a while but you can write any code that will be cpu intensive.

  1:         private void Button_Click(object sender, RoutedEventArgs e)
  2:         {
  3:             for (int i = 0; i < 100000; i++)
  4:             {
  5:                 for (int j = 0; j < 10000; j++)
  6:                 {
  7:                 }
  8:             }
  9:         }

Now follow the steps shown above to generate profiling report using the wizard, run the project and click on the button couple of time and then close the browser. Visual studio will bring up the visual report based on the samples collected during the performance analysis. Below figure show the result of my test, one can clearly identify in the graph the spike in CPU during the first and second click.Interesting fact is Studio will automatically bring show a call tree of the method that are expensive in terms of resource. For our case the event handler Button_Click() does a expensive for loop and studio was able identify the method and display the call hierarchy.

Thursday, November 18, 2010

Context Menu with check mark

In Silverlight 4 it is very easy to create a context menu, basically a context menu appears on right click action and has choices depending on the state of the UI element. Silverlight toolkit has a in build context menu control, if you do not have the toolkit you will have to install it from Microsoft website. Once installed you can add context menu control to your visual studio toolbox by doing a right click on toolbox –> Choose Items…-> Silverlight Components –>select ContextMenu and press ok. Now you can drag and drop the context menu from the toolbox in your layout editor, a name space xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" should be added to the XAML and three dll’s will be added in the project references

In the main page XAML add the below code, here we have a text box with a context menu it has two items one has a Icon and the next item does not have a icon. Our intention is to show a check mark in front of the menu item when a user first time clicks on the menu and toggle it on consecutive clicks. To display a icon in front the toolkit has element called <MenuItem.Icon> the icon is of type content so it can be anything like a image, textbox, grid. I could have select a Image of a check mark and used it as icon but the problem is my application has numerous themes where the user can change the color of every item in UI, so in this case we will have to create different image for each an every color. Instead of Image I use a textblock that will have the ascii equivalent of the check mark and surround the textblock with a Border. To display ascii character in textblock we should use the format “&#<ascii code>;”

  1:   <Grid x:Name="LayoutRoot" Background="White">
  2:         <TextBox Text="Context Menu test" Height="200" Width="200" >
  3:             <toolkit:ContextMenuService.ContextMenu>
  4:                 <toolkit:ContextMenu>
  5:                     <toolkit:MenuItem x:Name="AlertWindow" Header="Display Window" 
  6:                                       Click="AlertWindow_Click" >
  7:                         <toolkit:MenuItem.Icon>
  8:                             <Border BorderBrush="Blue" Background="LightBlue"
  9:                                     BorderThickness=".5"  >
 10:                                 <TextBlock Text="&#8730;" FontWeight="Bold" 
 11:                                      Foreground="Green" TextAlignment="Center"/>
 12:                             </Border>
 13:                         </toolkit:MenuItem.Icon>
 14:                     </toolkit:MenuItem>
 15:                     <toolkit:MenuItem x:Name="Close" Header="Close" >
 16:                     </toolkit:MenuItem>
 17:                 </toolkit:ContextMenu>
 18:             </toolkit:ContextMenuService.ContextMenu>
 19:         </TextBox>
 20:     </Grid>

Now you can add a click event on the menu item, and in the xaml.cs add a event handler. The code shown below will basically toggle the visibility of the border.

  1:     private void AlertWindow_Click(object sender, RoutedEventArgs e)
  2:     {
  3:         Border border = ((sender as MenuItem).Icon as Border);
  4:         if(border.Visibility==Visibility.Collapsed)
  5:             border.Visibility = Visibility.Visible;
  6:         else
  7:             border.Visibility = Visibility.Collapsed;
  8:     }

The final output in the browser will look like this

Additional benefit of this technique is modularity and maintainability because you do not need different images for differently themed application.One can easily match the color of the context menu check mark icon with the theme of your application as the colors are stored in resources. For simplicity I will keep the theme color’s in the <UserControl.Resources> but for your application the theme location might in a resource dictionary, the final XAML should look like this .

  1:     <UserControl.Resources>
  2:         <SolidColorBrush x:Name="MenuTickBorderColor" Color="Brown"/>
  3:         <SolidColorBrush x:Name="MenuTickFillColor" Color="Yellow"/>
  4:         <SolidColorBrush x:Name="MenuTickFontColor" Color="Brown"/>
  5:     </UserControl.Resources>
  6:    
  7:     <Grid x:Name="LayoutRoot" Background="White">       
  8:         <TextBox Text="Context Menu test" Height="200" Width="200" > 
  9:             <toolkit:ContextMenuService.ContextMenu>
 10:                 <toolkit:ContextMenu>
 11:                     <toolkit:MenuItem x:Name="AlertWindow" Header="Display Window"
 12:                                       Click="AlertWindow_Click" >
 13:                         <toolkit:MenuItem.Icon>
 14:                             <Border BorderBrush="{StaticResource MenuTickBorderColor}"
 15:                                     Background="{StaticResource MenuTickFillColor}"
 16:                                     BorderThickness=".5"  >
 17:                                 <TextBlock Text="&#8730;" FontWeight="Bold"
 18:                                            Foreground="{StaticResource MenuTickFontColor}"
 19:                                            TextAlignment="Center"    />
 20:                             </Border>
 21:                         </toolkit:MenuItem.Icon>
 22:                     </toolkit:MenuItem>
 23:                     <toolkit:MenuItem x:Name="Close" Header="Close" >                      
 24:                     </toolkit:MenuItem>
 25:                 </toolkit:ContextMenu>
 26:             </toolkit:ContextMenuService.ContextMenu>
 27:         </TextBox> 
 28:     </Grid>

Now one can change the three SolidColorBrush in resources to change color of the icon on the context menu. Here I have shown three differently themed icons of the context menu.

  1:    <UserControl.Resources>
  2:         <SolidColorBrush x:Name="MenuTickBorderColor" Color="Blue"/>
  3:         <SolidColorBrush x:Name="MenuTickFillColor" Color="LightBlue"/>
  4:         <SolidColorBrush x:Name="MenuTickFontColor" Color="Green"/>
  5:     </UserControl.Resources>

  1:     <UserControl.Resources>
  2:         <SolidColorBrush x:Name="MenuTickBorderColor" Color="Red"/>
  3:         <SolidColorBrush x:Name="MenuTickFillColor" Color="LightPink"/>
  4:         <SolidColorBrush x:Name="MenuTickFontColor" Color="Red"/>
  5:     </UserControl.Resources>

  1:    <UserControl.Resources>
  2:         <SolidColorBrush x:Name="MenuTickBorderColor" Color="Brown"/>
  3:         <SolidColorBrush x:Name="MenuTickFillColor" Color="Yellow"/>
  4:         <SolidColorBrush x:Name="MenuTickFontColor" Color="Brown"/>
  5:     </UserControl.Resources>

The above technique might not be suitable for every scenario and using images might be more easy. I am not a big fan of writing code in backend rather I prefer to follow MVVM pattern where ever possible, In future post I will write about how to connect context menu using the view model