click tracking
Katrien's MSDN Blog - Site Home - MSDN Blogs
  • Katrien's MSDN Blog

    Silverlight 1.0 Fire Starter video now available through MIX University


    MIX University, a section of MIX Online website the has got a new addition: Silverlight 1.0 Fire Starter site.

    On November 29th 2007 a full day event was organized around Silverlight 1.0. This event was recorded and you can now view all the sessions online or download them in .wmv, .wma or .mp3 format.
    Eight sessions going from development in Silverligh 1.0, Expression Blend and the designer - developer workflow, XAML, Media and Popfly to a look at the future of Silverlight are available.

    Good news is also that if you like the interface of the video site itself, which is made in Silverlight, you can grab the source code through Adam Kinney's blog!

    No reason why not to get started with Silverlight today...

  • Katrien's MSDN Blog

    Different ways for loading images and files in Silverlight 2 applications


    When loading files in Silverlight 2 applications, this can range from images, video, fonts, etc, there are several options available. You might want to call files that reside on another server, files that are embedded into the .xap application or zip files that are downloaded and unpackaged on the client. In this post I’m reviewing the different options available for this, differences between them and how to implement each of the options.

    As an example to load the files I’m using a UserControl with an image on it. A very simple example that is clear enough to show the different approaches. All of the examples I'm showing here have a XAML based approach with a code based counterpart, except for the sample for on demand download.

    Base UserControl

    <UserControl x:Class="SLLoadResourcesApproaches.Page"
        <Grid x:Name="LayoutRoot" Background="White">
            <Image x:Name="imageElement" Stretch="Uniform" />

    This just displays the image, nothing more:


    Referencing files in the same directory as the Silverlight application (ClientBin directory )

    In other words, this is the default location of your .xap file, so files that are located in the same directory as the base application. By default when you create the Silverlight application with a test web site in Visual Studio this is the ClientBin directory. No extra code is needed to load files in this location.

    If the file is placed in the ClientBin directory, call the file in XAML:

    <Image x:Name="imageElement" Stretch="Uniform" Source="_DTH8643.jpg" />

    Or in code:

    imageElement.Source = new BitmapImage(new Uri("_DTH8643.jpg", UriKind.Relative));

    Note: for the above sample you can use a forward-slash preceding the image name to express that it is located relative to the .xap file (same directory in this case). This is important to not as here it is not the root of the domain name (absolute path) that is taken into account. Take this example where I have a sub-directory to ClientBin, I’m referencing the file as /images/imagename.jpg.


    To reference the file in the images directory in the ClientBin:

    imageElement.Source = new BitmapImage(new 
    Uri("/images/_DTH8643.jpg", UriKind.Relative));

    First time I used this it caused some confusion as I'm used to referrring to files in the root of the domain in this way, not in a sub-directory, so it's important to note this difference with Silverlight.

    Copying files to ClientBin upon build in Visual Studio

    In the case you are using the files directly in your Silverlight application and don't want to copy them manually to the ClientBin directory you can set this in Visual Studio. Note this is a copy to the ClientBin directory of the Silverlight application project, not the test web project you may have created.
    Build action: None.
    Copy to Output Directory: Copy always.


    Loading files located outside of ClientBin (.xap location) directory

    In the above screenshot I have an image files located in the "images2" directory. To load images from that directory I can enter the full URL of the image:

    <Image x:Name="imageElement" Stretch="Uniform" 

    In C# code:

    imageElement.Source = new BitmapImage(
    new Uri("http://localhost:55907/SLLoadResourcesApproaches_Web
    , UriKind.Absolute));

    Referencing files on external web sites

    If you want to call images that reside on external sites you can use the standard download method by using WebClient. Remember that cross domain restrictions apply.
    Other than that it is just like calling images using the full URL like above.

    imageElement.Source = new BitmapImage(new 
    Uri("", UriKind.Absolute));

    There is however maybe a better way to load a file in from an external site where you can better control the loading of your file before showing it in the UI. By using the WebClient class you can download external files on demand, be it from the current origin site or external sites (see below notes on cross domain restrictions). Using the WebClient you can control what to display while the image or file is being downloaded using event handlers. This approach however is not available in XAML but only in code.

    1. Create a WebClient object, an OpenReadCompleted event handler and start the download process

    WebClient webClientImgDownloader = new WebClient();
    webClientImgDownloader.OpenReadCompleted += new 
    OpenReadCompletedEventHandler(webClientImgDownloader_OpenReadCompleted); webClientImgDownloader.OpenReadAsync(photo);

    2. Set the source to the image in the OpenReadCompleted event handler

     void webClientImgDownloader_OpenReadCompleted(object sender, 
    OpenReadCompletedEventArgs e) { BitmapImage bitmap = new BitmapImage(); bitmap.SetSource(e.Result); imageElement.Source = bitmap; }

    Referencing files included in application package (the .xap file, not the assembly)

    When you need your Silverlight application to be independent of any files stored on the server separately you can include everything into a single .xap file. The same applies to file that are integral part of the application. If you know a certain file is always used when running the application it makes sense to include it in the .xap file as there is no reason to download it separately. Including files to be part of the package is what we call Content files.

    Files that are packaged into the .xap file need to have the Build Action in Visual Studio set to "Content".


    To call the file from XAML:

    <Image x:Name="imageElement" Stretch="Uniform" Source="/_DTH8643.jpg" />

    Calling from code:

    imageElement.Source = new BitmapImage(new Uri("/_DTH8643.jpg", UriKind.Relative));

    Because the files is located at the same level in the application package as the assembly in which the code is running, the forward-slash preceding the name is required here as well.

    Files can also be located in sub-directories of the application package. You will notice that the directories are also included in the .xap file (as they would in any .zip archive file).

    Application resources: calling files embedded in the application assembly (DLL)

    As with other .NET assemblies, files can be embedded into the assembly as resources. For Silverlight applications, set the file Build Action to Resource.


    Referencing resources embedded into the assembly is implemented in the same way as loading files included in the application (.xap). The difference is they are added to the DLL and thus no longer visible in the .xap file if you unzip it. 

    In XAML:

    <Image x:Name="imageElement" Stretch="Uniform" 
    Source="/_DTH8643.jpg" />

    Code call:

    imageElement.Source = new BitmapImage(new 
    Uri("/_DTH8643.jpg", UriKind.Relative));

    This is working well for the current assembly but if you want to use a file located in a referenced assembly (a Silverlight class library) you will need to add a special reference to indicate the assembly you are calling the file from. This is done by adding the following prefix to calling the file:

    So, in the example below I'm calling an image from the assembly named ReferencedSlLibrary.

    <Image x:Name="imageElement" Stretch="Uniform" 
    Source="/ReferencedSlLibrary;component/_DTH8643.jpg" />

    Code call:

    imageElement.Source = new BitmapImage(new 
    Uri("/ReferencedSlLibrarys;component/_DTH8643.jpg", UriKind.Relative));

    VS 2008 - SL 2 Beta 1 note: you will notice that the image does almost only get displayed in the Visual Studio designer if you set the source in the above manner, even for own assembly files. I'm guessing this is a bug in beta 1.

    Embedding fonts

    To embed fonts there is actually a specific implementation to call upon font files, see this great post by Tim Heuer on the different ways to do this.

  • Katrien's MSDN Blog

    Silverlight 2: structure of the new .XAP file (Silverlight packaged application)


    With Silverlight 2 comes a new file extension for your Silverlight applications: .XAP (pronounced zap). This is a compressed file that uses standard .zip compression algorithm to minimize client download size.

    .XAP structure

    As stated the .XAP file is a .zip compressed file that contains the client DLL for the Silverlight application as extra DLLs of assemblies that you are using in your application. This can be your own assemblies of user controls or assemblies that are not part of the Silverlight runtime by default that gets installed on the client.

    External resources like images or other types of files can also be added to the .XAP file if you do embed them into your client DLL. I will be doing another post on the different ways of embedding files into the package application and DLL.

    By renaming the .xap file to .zip you can view its contents:


    Application Manifest file


    The AppManifest.xml file defines the assemblies that get deployed in the client application. This file is automatically updated when compiling your application. Based on the settings of a referenced assembly it is added to the Application manifest. For example, if you have an assembly that you are referencing in your application but do not wish to have it included into the. XAP file you can choose to set “Copy Local” to false.


    In this example I’m referencing the System.Xml.Linq assembly and chose not to have a local copied deployed with the .xap. I’ll then need to an on demand download of the assembly when accessing it in my code. This can be useful to have only your base assembly deployed and have an on demand download of subsequent assemblies on the fly so that your initial download time is minimal. When only a part of your application uses a specific assembly you may want to use this mechanism.

    .XAP generation tool

    When you use the Silverlight project template in Visual Studio 2008 the .XAP file gets generated automatically for you. This is done in a post-build action that uses a tool called Chiron; a tool that gets installed with the Silverlight 2 Beta1 SDK.

    The Chiron tool can also be accessed via the command line to package your own .XAP files if needed. You can also use this tool to generate the .XAP for a DLR application.

  • Katrien's MSDN Blog

    Silverlight and the HTML page: let your Silverlight do the work


    One of the things I like with having Silverlight 2 runtime on the browser is that it gives us the power of .NET at the browser level. And this is more than just for creating RIAs, one aspect that does not get much attention is the fact that you can use the Silverlight plugin to have extra power at the browser level. With this I mean taking advantage of all the power of the .NET framework and your ease of work with C# to get things done in the browser.

    Even with the power of JavaScript debugging in Visual Studio 2008, if like me you are not a fan of lengthy applications in JavaScript this is a new possibility: just let Silverlight work with web services and processing and integrate that with your HTML page (DOM).

    You can use the Silverlight plugin without even visually showing it, if that would be a requirement. In this post I will show a few of the possibilities that you can use in your Silverlight classes to make them available to the hosting HTML page and even manipulate your page’s DOM from the Silverlight application.

    For this post I’m making a small demo application where an HTML page shows a list of thumbnails from Flickr photos together with the name. The call to Flickr is done by accessing Flickr’s REST API. What I’m doing is actually passing the calls that I would normally do using Ajax into the Silverlight application. As we all know it requires some work to get our Ajax working correctly in all browsers, with this approach we let Silverlight do the processing.

    Tools used: Visual Studio 2008 with the Silverlight 2 Beta 1 Tools for VS.

    Creating the Silverlight project

    Create a Silverlight Application project in Visual Studio. In my case I've named the application "FlickrPhotosSL". I've chosen to automatically create the web application as well as I'll be using the web application to create the HTML page in which to show the pictures. Everything is added to the default.aspx page that was created by Visual Studio in the web application. Please note that I'm using ASPX here but could as well be using a static HTML page. The advantage of using an ASP.NET is we can take advantage of the asp:Silverlight control.

    Accessing the DOM in Silverlight

    Because I don't want to display anything in the Silverlight control I'll just change the background to the color of the HTML page.
    Note: I did not find a way to completely hide the Silverlight plugin, will have to check how there is a better way to do this than setting a similar background. I tried setting the CSS class visibility to hidden but this causes the Silverlight plugin not to load anymore.

    <div id="test"></div>
          <asp:Silverlight ID="Silverlight1" runat="server" 
    Source="~/ClientBin/FlickrPhotosSL.xap" Version="2.0" Width="10" Height="10" /> </div>

    Let's start with a small test to get a DIV from the Silverlight application and change its innerHTML. To do this the DIV is added to the HTML page, together with the Silverlight object:

    <UserControl x:Class="FlickrPhotosSL.Page"
        Width="0" Height="0">
        <Grid x:Name="LayoutRoot" Background="Transparent">

    Then, in the Page.xaml.cs file we get a reference to the "test" DIV by calling HtmlPage.Document.GetElementById (lines 9 and 10).

       1:  public Page()
       2:  {
       3:          InitializeComponent();
       4:          this.Loaded += new RoutedEventHandler(Page_Loaded);
       5:   }
       7:  void Page_Loaded(object sender, RoutedEventArgs e)
       8:  {
       9:          HtmlElement testDiv = HtmlPage.Document.GetElementById("test");
      10:          testDiv.SetAttribute("innerHTML", "Silverlight Page loaded");
      11:  }

    The result is the text being displayed when running the page. Nothing fancy here but that works.


    Now we'll remove the code used for the test in the HTML page and Page.xaml.cs. Next we add a textbox in plain HTML together with a button. This will be our textbox to type in the Flickr tag name to search for. The objective is to have the onclick event of the button to fire code in the Silverlight application by calling a method made available to the browser.

    I'm also creating two DIVs: one for showing a list with pictures and another to be shown when the pictures are still loading.


    Accessing Silverlight code from script

    In the Silverlight code we we need to make some changes to the Page class so the object and methods are available to the script. .NET objects can be made available by using HtmlPage.RegisterScriptableObject(). By default the members of the object are not available in the browser, so we need to add the attribute [ScriptableMember].

    So, we call RegisterScriptableObject in the page loaded and add a new method that will be called from script.

       1:  void Page_Loaded(object sender, RoutedEventArgs e)
       2:   {   
       3:         HtmlPage.RegisterScriptableObject("SilverlightFlickrObject", this);
       5:   }
       7:  [ScriptableMember]
       8:  public void SearchPictures(string tag)
       9:   {
      10:       ///code here
      11:   }

    In order to call the SearchPictures method from script we create a reference to the Silverlight plugin and call the method in JavaScript. The method is available because it has been decorated by the ScriptableMember attribute. The loadPicturesSilverlight function is called by the onclick event of the button.

    <script type="text/javascript">
         function loadPicturesSilverlight()
             var slPlugin = document.getElementById("Xaml1"); //Silverlight plugin
             var searchTag = document.getElementById("textTag"); //textbox
    Calling the Flickr REST service in Silverlight

    Now we only need to add code in Silverlight in order to search photos on Flickr and add them to the HTML page by generating HTML through Silverlight.

    Because we are accessing the Flickr REST API we'll use WebClient to make an asynchronous call to the Flickr service. This will return us an XML document that we can parse and read to print out the picture thumbnails in the HTML page. You'll want to download the whole sample to view the complete as I'm only showing the main parts hereunder.

       1:  [ScriptableMember]
       2:   public void SearchPictures(string tag)
       3:  {
       4:         WebClient rest = new WebClient();
       5:         rest.DownloadStringCompleted += new DownloadStringCompletedEventHandler
       6:        rest.DownloadStringAsync(new Uri(string.Format(flickrApi, tag)));
       7:   }
       9:   void rest_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
      10:   {
      11:        string url = string.Empty;
      12:        string imageUrl = string.Empty;
      14:        XDocument doc = XDocument.Parse(e.Result);
      16:        HtmlElement ulList = HtmlPage.Document.CreateElement("ul");
      17:        picturesDiv.AppendChild(ulList); //pictures DIV
      19:        picturesDiv.RemoveStyleAttribute("display");
      20:        picturesLoadingDiv.SetStyleAttribute("display", "block");
      22:        picturesLoadingDiv.RemoveStyleAttribute("display");
      23:        picturesLoadingDiv.SetStyleAttribute("display", "none");
      25:        var photos = (from results in doc.Descendants("photo")
      26:                 select new
      27:                  {
      28:                     PhotoId = results.Attribute("id").Value.ToString(),
      29:                     Farm = results.Attribute("farm").Value.ToString(),
      30:                     Server = results.Attribute("server").Value.ToString(),
      31:                     Secret = results.Attribute("secret").Value.ToString(),
      32:                     Title = results.Attribute("title").Value.ToString(),
      33:                     Owner = results.Attribute("owner").Value.ToString()
      34:                   }).Take(12);
      36:      foreach (var photo in photos)
      37:      {
      38:        imageUrl = string.Format("http://farm{0}
      39:                    photo.Farm, photo.Server, photo.PhotoId, photo.Secret);
      40:        url = string.Format("{0}/{1}/", 
    photo.Owner, photo.PhotoId);
      42:        HtmlElement listItem = HtmlPage.Document.CreateElement("li");
      43:        listItem.SetAttribute("innerHTML", string.Format(LI_ITEM, url, 
    imageUrl, photo.Title));
      45:        ulList.AppendChild(listItem);
      46:      }
      48:  }

    So the result is this, we type in a tag to search for:


    And the result is retrieved by the Silverlight code that then adds new <LI> items to the page.


    The sample code used in this post can be downloaded here:

    I can see some use for this in web applications that are currently using Ajax for this kind of processing and where there is no intention of transforming the whole interface into a Silverlight application. Using Silverlight in place of the Ajax calls could prove to be an advantage, especially if you already develop in C#.

    Reproducing my example using JavaScript and AJAX is possible, but it’s another approach to achieving the same results.

  • Katrien's MSDN Blog

    Creating a Tile using theme’s color as background (Windows Phone 7)


    The Windows Phone 7 Start screen default tiles like e-mail and agenda use the current Theme color with a visual and text in white. Depending on the theme color, whether it’s set to Dark or Light, white content will always on the Tile’s foreground color.


    As I was working on a personal project this weekend I got into looking how to use this same approach for 3rd party apps. As it happens, it’s really easy to have your tile look like one of these default app tiles.
    Let’s first look at how a Tile is constructed. As explained in the section Push Notifications, in the UI Design and Interaction Guide for Windows Phone 7 document, a Start screen tile consists of:

    • Background image
    • An optional counter (foreground)
    • Tile’s/App title

    Image source: UI Design and Interaction Guide for Windows Phone 7

    There is something not mentioned in the document which is the fact that your tile image, when using transparency, also inherits from the theme color. So in fact you have these layers:

    1. Lowest layer: theme background (not shown if your tile is not transparent)
    2. Intermediate layer: background image (your image)
    3. Foreground layer: Title and counter (optional, only used when doing tile updates through Push Notifications)

    Now that we know this, the process to create a transparent Tile image that will display in the color of the current theme is really simple. For the example here I’m creating an image using, an incredibly good program to do image manipulation (and it’s free!). You can use your favorite program to do this.

    Creating a transparent image with white content in

    Create a new image file with the dimensions 173x173.


    Delete the white background, press CTRL+A (to select), then DEL.


    Create your tile visual by using white as the color. Because the background color will always be the theme color you can count on white always coming to the foreground no matter what Theme the user has chosen. I just decided to create a rectangle with a circle. Nothing fancy but it does not really matter for this post. Be creative and don’t follow my example here Knipogende emoticon


    Save the file as .PNG (in my case I named the file mytile.png). gives you several options to save your PNG. Make sure you select something other than 24bit PNG since the latter does not allow you to save transparency. Not sure why this is though.


    Adding the image as new Tile for your Windows Phone 7 project

    Open your project, or create a new one using Visual Studio 2010 (or Express edition).

    Copy the newly created image into the project. Via Explorer Ctrl+C / In Visual Studio: Ctrl+V. Other option is to use the Add existing item option in the project properties. By default your project will contain an image called ‘Background.png’. You can delete this one.
    Select your new tile image file and set it’s Build Action to “Content”.


    Go to Project properties, choose the newly added image as the “Background image”. Note: seems like a misleading name to me, wonder why they did not call it Tile background or something similar.


    Save your project and run in the emulator or device. Pin your application to the Start screen. You should now have your white visual with the theme’s color applied. Notice the application name supplied in the project properties also appears as the topmost layer. As you can see below, my rectangle is displayed as expected using either a dark (horrible brown) or a light theme.

    Emulator view:

    2010-11-01_2002  2010-11-01_2003

    On the real device:

    Easy isn’t it?

  • Katrien's MSDN Blog

    Silverlight 3: Out-of-Browser Applications


    One of the most awaited and requested features before the release of Silverlight 3 Beta was the ability to run Silverlight applications out of the browser. To be clear, this is not completely out of the browser, since the browser chrome/host is still being used. However, the application can be run directly from the Start menu (or desktop), depending on what the user chose.

    As a developer you can configure the application so that it can be installed for out of browser use. Next to out of browser, the application can also run offline but only if your code works in such a way that this is allowed. By that I mean you can work with IsolatedStorage to save some information local and use network detection to check for a network. If your application relies on services or files that are online you can disable working in offline mode (but still enable out of browser).

    While this feature has been blogged about with Silverlight 3 there are some notable differences with the Silverlight 3 RTW. First it’s important to note the syntax for the application manifest has been changed.
    Silverlight 3 Beta breaking changes: while the Beta version used “<Deployment.ApplicationIdentity>” the RTW version now uses <Deployment.OutOfBrowserSettings>


    <OutOfBrowserSettings ShortName="OobDemo Application"


    The good news is Visual Studio is now giving you an editor to configure the out-of-browser settings.

    Choose Silverlight project properties > Check “Enable running applications out of the browser” and click the “Out-of-Browser settings” button.


    You might notice Visual Studio will create a separate “OutOfBrowserSettings.xml” file to store the settings. The contents of this file get concatenated with the AppManifest.xml file upon build, which is of course logical. If you need to change any of the settings manually (like the ShowInstallMenuItem), you will need to do this in the OutOfBrowserSettings.xml. Adding these out of browser settings in the App manifest file will result in duplicates.


    When I now run this demo application and right-click I have the option to install the Silverlight application. This is the default behavior. You can also hide the display of the Install option in the right-click menu and control this programmatically, for example by adding a button “Install”.



    When controlling the installation through your own interface you can use Application.Install to install the application out of browser, however this needs to be triggered by a user action. In the sample below I’m responding to a button click event:

    private void Install_Click(object sender, RoutedEventArgs e)
        if (Application.Current.InstallState == 
    InstallState.NotInstalled) { Application.Current.Install(); } }

    Looking forward to seeing applications make use of this feature, there is one out just as Silverlight 3 is released: it’s Sobees Silverlight Twitter client. Worth checking out (just right-click the app to install locally).

  • Katrien's MSDN Blog

    ASP.NET MVC 3, NuGet, IIS Express, SQL CE 4, Web Farm Framework, Orchard, WebMatrix released


    Last week, Microsoft released more than six new or upgraded products! All these products enhance developing for the Web, from professional developers with ASP.NET MVC3 and NuGet to novice users with WebMatrix. And the best news: they are all free.

    Learn more: continue directly to the announcement blog post by Scott Guthrie: Announcing release of ASP.NET MVC 3, IIS Express, SQL CE 4, Web Farm Framework, Orchard, WebMatrix

  • Katrien's MSDN Blog

    Write HTML5 and CSS3 with Visual Studio 2010 – download the free Standards Update today


    Some folks at Microsoft are just great. Take Mads Kristensen and some folks in his team: last week they released a free update to Visual Studio 2010 SP1 that delivers better support for writing standards web pages. In essence, the extension adds Intellisense support for HTML5 and CSS3, following the newest W3C specs as good as possible.
    This includes schema support for Video, Audio, Input Type, Drag & Drop, WAI-ARIA, Microdata,; intellisense for DOM API for Geolocation and Local storage; CSS3 support for 2D transforms, 3D transforms, flexbox model, media queries and loads more . CSS3 vendor prefixes -ms, -webkit and -moz are also included.

    What about the free Visual Web Developer Express 2010 version? No problem, you can also take advantage of this extension with Web Developer Express 2010 SP1.

    Next steps:

    Note: because it’s created by these guys in their spare time, do note this is not an officially supported update.

  • Katrien's MSDN Blog

    Quick tip: using the WP Connect utility instead of Zune client (Windows Phone 7)


    Deploying and debugging your Windows Phone 7 applications on a device requires Zune client software to be running. However, Zune client software blocks access to your local media database making it impossible to debug anything using media APIs. This may include photo choosers and launchers, XNA and Silverlight playback of media elements.

    The solution is simple, with the newly released Windows Phone Developer Tools October 2010 Update, a new tool WPConnect is provided to circumvent this issue. Download and install the tools update. Once done you can connect your device, close Zune software and launch WPConnect.exe from the installation directory. Normally this is “%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect”.
    More details on MSDN:

    Note: this applies to developers using an unlocked Windows Phone device. Unlocking your phone requires registration in the AppHub.


    Quick tip posts are short, useful posts pointing to content and tricks that might otherwise go lost in a typical 140 chars on Twitterverse.

  • Katrien's MSDN Blog

    Windows Phone 7 “Mango”: download SDK and consumer features unveiled


    On May 24th Microsoft held a press conference announcing many of the new features coming to the next version Windows Phone 7. Codename for this version is “Mango” so we’ll refer to it by that name in the rest of this post. Note that the official name in the documentation is Windows Phone 7.1 beta.

    Mango was first unveiled at WMC event in Barcelona in February, more features including the full developer SDK functionalities were also shown during MIX conference in April. Take a look at the video below where Joe Belfiore walks you through the new consumer features.

    Read about the consumer features in Mango on these sites:

    Developers: download the SDK and take advantage of new features

    Developers can tap into more than 1500 new APIs in Mango and start taking advantage of the new features today. But what are the main new features? Too many to call out in this post but focusing on the top we get:

    • Background processing
    • Phone access: calendar and contacts, camera access, additional sensors
    • HTML5 support with Internet Explorer 9 on the phone
    • Support for Silverlight + XNA together
    • Silverlight 4
    • Live Tile enhancements such as multiple tiles, deep linking, updating Live Tiles locally, use back of tiles
    • Fast application switching
    • Local SQL database
    • Sockets
    • Tooling: new code profiler and emulator

    How to get started with Windows Phone 7.1 (Mango) Beta tools

    1 – Download the tools

    Download and install the updated SDK containing Visual Studio 2010, phone emulator and Expression Blend for Windows phone, including some tools like the .XAP deployment tool.
    Note: for current application development: the new updated tools allow you for multi-targeting. This means v1 projects can be worked on with the updated tools, as well as creating new applications targeting the Windows Phone 7.1 version. Running the two tools versions side by side is not possible, and in this way not required really.

    2 – Get yourself up to speed on the new developer features

    3 – Register for the Marketplace

    Today as a developer you can only submit applications for Windows Phone 7 (not Mango). In the near future the application marketplace for Mango will become available and from that point on you will be able to submit your “Mango” targeted application.
    Register for the marketplace on For tips on Belgium & Luxembourg specifics of Marketplace registration, watch this live meeting recording: “Windows Phone 7: Tips and Tricks about Developer Registration and Application Certification”.

    Happy coding!

  • Katrien's MSDN Blog

    Microsoft Web Platform Installer: what is it and how to install it?


    The Microsoft Web Platform Installer was officially announced at MIX09. The Web PI as it’s abbreviated is your best tool get access to Microsoft’s web platform runtimes, tools and database. It only installs free products, beginning with the platform tools but it also allows you to easily install ASP.NET community tools like DotNetNuke, Umbraco and others, but also PHP open source projects like Acquia Drupal, Wordpress, and more.

    In this post I’m focusing on the platform and not using the gallery, which will be for a later post.

    Just this weekend I re-installed my old laptop at home with the Windows 7 RC, so having a new clean install is really a good moment to try out the Web Platform Installer. No need to get several tools from several download sites, search for the latest version and so forth.

    Before getting started: supported platforms

    Web PI is supported on the following platforms: Windows Vista, Windows Vista SP1, Windows XP SP2+, Windows Server 2003 SP1+, Windows Server 2008

    Here I’m doing the installation on a new Windows 7 RC version, which itself is not really a supported platform. Logical as Windows 7 is not released but I had no issues except a warning about SQL Server 2008 Express, for which I made sure to add SP1 after completing the Web PI installation.

    Installing the web platform with the Web Platform Installer

    Download, choose either Web PI 1.0 (released) or 2.0 which is still in beta. Here I’m going to install version 2.0 since I want access to some beta stuff and also because at a later stage I would like access to the gallery.

    Go to and click Download and run. This will launch the installer.


    The first screen you’re presented with shows you the latest additions.
    Note: this is exactly the same screen that is presented to you when you re-run the Web Platform Installer later on to add technologies.

    Choosing which items to install is straightforward, and you get detail information about each of the detail options. For example, on the web platform section I’m installing the Web Server, Frameworks and Runtimes, Database and Tools. Under each of these there are extra options, that you can customize to your needs. By default, the most used and logical ones are selected but you may choose to add other features as well.


    Let’s drill further on the Web Server section.

    I surely want to run ASP.NET as well as have support for the latest Media services on Internet Information Server. To add those I choose to “Customize” the Web Server element.

    Web Platform Installer: IIS custom choices

    In case I’m not sure what a specific feature means I can click the icon (i) icon. This gives you extra information and a link to even more details about the selected feature. In the screenshot below you can see I selected to know more about IIS Media Services 3.0 Beta:
    IIS Media Services 3.0 Beta

    Since this is the Web PI 2.0 beta I do have a choice of some technologies still in beta like the Application Request Routing 2.0 Beta or the IIS Media Services 3.0 Beta.

    Framework and Runtimes

    In the framework and runtimes section you have the option to install ASP.NET MVC 1.0 (which I’m doing), .NET Framework 3.5 SP1 and PHP 5.2.9.-2.


    The proposed database is SQL Server 2008 Express, as well as the SQL Server 2008 Management Studio Express and SQL Server 2008 Management Objects.


    In the tools section the free Visual Web Developer 2008Express with SP1 (the latest service pack already applied), and the Silverlight 2 Tools for Visual Studio. Since this is the beta one the option to install Silverlight 3 Tools for Visual Studio. I know the two sets of tools (Silverlight 2 and Silverlight 3 Beta) cannot be installed on the same machine. And yes, the Web PI correctly checks for this and warns you. I had to try it out and was glad the check is built in :-)

    Now that I have chosen all items I wish to install I can either go ahead and get my machine setup, or also choose to install applications from the gallery. I’m skipping this part for now and go ahead and click on “Install”. The Web PI shows the items selected along with any specific license terms, which in order to install, well of course I do need to accept. Let’s do that.

    license terms

    Once installation starts, depending on the items you have chosen there might be some extra configuration screens appearing. In my case I selected the SQL Server 2008 Express, for which I now get the chance to configure security settings.

    Only after this does the installer start downloading the items I have chosen. Depending on the number of items this might take a few moments to complete.


    That’s it, all the chosen items have been installed.

    Re-running the installer

    Running the installer again is very easy, just launch the Web Platform Installer from the Start menu. At this stage the installer will connect and download information on any new items added or updated in the installer.

    Uninstalling chosen items

    One thing I noticed was that when re-running the Web PI I had no choice to unselect already installed items. At this stage the Web PI does not support this feature (at least that what seemed the obvious to me). The best solution now is to go through Control Panel > Uninstall a program. All the individual programs installed through the Web PI can be found there and uninstalled separately if needed.

    So now I’m all set to start my development and testing on the newly installed machine. All without having to go through several downloads of framework, tools, IIS extensions, and so forth.

    I’ll be blogging about the Gallery at a later stage as well, including the support for PHP applications delivered with the gallery.

    And now to end this post you might want to sit back and watch this funny video: Cannon P.I., and see which Microsoft execs you might recognize ;-)

  • Katrien's MSDN Blog

    Windows 7 RC and support for VHD (including booting from VHD)


    I’m loving the new Windows version, I’ve been using it on my work and my demo computers since the release of the Beta version in January. I’m not going back!
    Now with the release of Windows 7 RC we are coming closer to a scheduled release by holiday season 2009 (as announced during TechEd US keynote).

    Expiration of Beta and RC versions
    If you are using the beta version yourself it’s recommended to upgrade (actually do a clean install) for RC. The beta version will be expiring in July 2009.
    Windows 7 RC install will expire in February 2010.

    Note that the RC version is available for download until the end of June 2009, from the MSDN site.

    VHD support

    One of the interesting features in Windows 7 is support for VHD. There’s support in two ways: first is being able to create and mount a VHD file as a disk in the OS.

    This is done through the Disk management settings under Computer Management.

    The second feature is booting from a VHD file. As my colleague Arlindo explained to me, this is not running on vritualization technology. It’s done through the boot loader which will unpack the VHD and then boot from there. So it’s not the same as running your VHD with Virtual PC.

    Creating a bootable VHD

    To create my bootable VHD I used a few sites with to gather the information and guide me through the process. These were:

    Because an existing VPC is not supported to be used as a bootable VHD, you are obliged to follow one or other procedure in order to get a new Windows 7 installed on the VHD. Basic steps are, as I followed from Cesar’s post:

    1. After the base Windows 7 OS is installed, restart the computer and run from Windows 7 DVD. Note: it
    2. Choose Windows Repair (or press Shift+F10 to load the command line at the first install screen)
    3. Start the Command prompt.
    4. Type Diskpart
    5. Diskpart utility will load. Type create vdisk file=c:\Windows7Build7000.vhd maximum=40000 (where “c:\Windows7Build7000.vhd” can of course be another location and name). The 40000 refers to the disk size. Adapt as required.
    6. Enter the command to select the newly created disk: select vdisk file=c:\Windows7Build7000.vhd
    7. Type: attach vdisk
    8. Type: exit (you exit Windows Repair, but Do Not Reboot), or close the command line
    9. Click “Install now” back in the installation wizard.
    10. Accept license and then make sure you choose “Custom (advanced")” in the installation type screen.
    11. Choose the newly created disk as a destination (by checking the size of your newly created VHD you should be able to recognize which one it is.
    12. If you get a warning saying that your computer hardware might not support this drive just ignore it.
    13. Continue installation wizard, Windows 7 gets installed and will reboot the system a few times. That’s it.

    After following this procedure I ended up with two Windows 7 entries in my boot sequence so this is something that needs to be addressed. I found out the last install (on VHD) is put at the top.


    The only change needed here is adapting the entries in the boot loader so that I know exactly which one is which. To do this we can use the bcdedit.exe command line tool.

    The bcdedit tool is pretty straightforward (see TechNet document on command line options). What I need to do is rename the VHD Windows 7 entry to something that is more logic, and secondly I would like my base OS to appear as the first in the dual boot option. To do this I opened up command line in admin prompt, and used these commands.

    bcdedit /v
    This command will list the boot loader entries. Copy the GUID for the VHD entry onto clipboard.

    bcdedit /set {GUID} description “Windows 7 – VHD”
    Setting the entry description, you can of couse choose whatever description fits you.

    bcdedit /displayorder {guid} /addlast
    Here we set the display order of the VHD entry to be displayed last. Since the entry already exists it’s simply moved to the end of the list.

    Now since I also want to make sure the first entry gets selected by default when booting, I copy the base OS GUID to clipboard and then use the /default option:

    bcdedit /default {GUID}

    With that I’m all set: my main install I’m using for my main (released) version demos and keeping the VHD for trying out all beta versions of technologies. And my boot entries show as I have set:

    Sleep mode also continues to work perfectly, indifferent from the fact that it’s been booted on the VHD or the base OS.

    To finish off, another interesting advantage of having a bootable disk on a VHD: you can use BitLocker to encrypt the whole disk where the VHD sits: if by any your laptop gets lost or stolen there’s no way to get the VHD’s content.

  • Katrien's MSDN Blog

    Expression Blend SketchFlow 4 integration with SharePoint


    One of the new features that were just announced about Expression Blend SketchFlow 4 is the integration of SketchFlow projects with SharePoint. What does this mean? It allows you to publish SketchFlow prototypes to a SharePoint library and manage stakeholder feedback directly in the SharePoint library.

    Knowing that hosting the prototype and having your stakeholders send e-mails back and forth with feedback is not always straightforward, I think this is a really nice and useful addition to SketchFlow.
    Let’s have a look at how this integration works.

    For showing how this works I’m using one of the prototypes that comes with the Expression Blend 4 samples, in this case the "MockupDemonstration’ solution.


    Once I’m ready to publish this SketchFlow prototype, I can choose “Publish to SharePoint…”


    I’m using my personal SharePoint “My site” since I don’t have an external full SharePoint server available.


    At this point the SketchFlow application is packaged and published in the “MockupDemonstration” folder on my site. After publishing the app I can open the library and and copy the link for distribution.
    When I browse to the SharePoint library I will get a new folder as requested, with a new sub-folder for this version of the project. Inside this folder you will find the .XAP file that contains the prototype as well as a TestPage.html.


    As expected, opening the TestPage.html will load the associated .XAP file from the same folder. And that’s it: for hosting the prototype nothing more is needed.

    Integrating feedback

    SketchFlow’s SharePoint integration would only be half useful without the capability to integrate feedback.


    Because the prototype is being accessed through the SharePoint library, uploading the feedback directly to SharePoint is also available as a choice in the player. After entering your initials, the feedback is uploaded to SharePoint. Several reviewers can give feedback which is all saved into the SharePoint library corresponding to the prototype version.


    Content of the feedback folder:

    The next step is getting that feedback into Expression Blend 4. To do this I activate the SketchFlow Feedback pane (if not visible, activate it by going to Window > SketchFlow Feedback). You will see in this pane that left to the + icon to load feedback files there is now a image  icon to refresh feedback from SharePoint. After synchronizing the latest feedback, Expression Blend will show you the details as you would get in Expression Blend 3, ordered by revision.


    Further iterations will generate new versions on SharePoint and new revisions. This allows you to keep feedback linked to a certain version correctly structured in SharePoint.

    Have fun with sketching and SharePoint collaboration!

  • Katrien's MSDN Blog

    My favorite tools to optimize Visual Studio for webdev


    How do we make Visual Studio play nicer with HTML5, CSS3, JavaScript, jQuery, in other words more of the front-end webdev stuff?

    Visual Studio 2010, be it the Ultimate, (free) Web Developer Express or other version, is not fully optimized for front-end web development out of the box. But don’t let the default VS2010 install fool you. There is a combination of community effort and tooling enhancements by Microsoft that make VS2010 play nicer to webdevs.

    In this post you can find a collection of my favorite extensions and tools to make Visual Studio handy for web devs. I’m focusing on the tools I have used and installed myself, knowing that there are others out there. Do you have any additions for the list? Please let me know so I can add them here!

    Most of the extensions I discuss can be installed using the Extension Manager (Tools > Extension Manager). You can also download extensions through the Visual Studio Gallery.

    Web Standards Update for Visual Studio

    Web Standards Update for Microsoft Visual Studio 2010 SP1

    Download Web Standards Update for Microsoft Visual Studio 2010 SP1

    This is the first tool I would recommend for introducing HTML5, CSS3 and JavaScript enhancements to the editor. Released by the Visual Web Developer team at Microsoft it includes HTML5 schema support, CSS3 and improved JavaScript IntelliSense.
    Although Visual Studio Service Pack 1 did bring some HTML5 schema support I advise installing this extension for improved support.

    More info at Mads Kristensen’s blog: Web Standards Update - behind the scenes

    JScript Editor Extensions

    Download JScript Editor Extensions

    You might have seen my previous quick tip on these extensions. JScript Editor Extensions are a welcome addition to the IDE.
    If you are used to having full fledged IDE optimized for C# development, things like word highlighting, outlining and brace matching are a given. Not so with JavaScript, until you install this extension.

    (outlining functions example in some jQuery code)

    After installing JScript Editor Extensions you’ll get the option to Enable/Disable four different extensions: Brace Matching, JScript Intellisense <Para>, Outlining and Word Highlighter. Knowing that sometimes installing a specific extension conflicts with one of these it’s a nice option.


    Make sure you check out the Channel9 video for a live demo of the extensions.

    Mindscape Web Workbench

    Download the Mindscape Web Workbench.

    Scott Hanselman has a great (as always) post on this new “Mindscape Web Workbench” extension for Visual Studio, adding support for CoffeeScript, SAAS and LESS.
    Too many new extensions for you? Don’t worry if you haven’t been doing front-end web dev lately it’s normal they sound crazy.

    • Coffeescript: CoffeeScript is a little language that compiles into JavaScript.
    • SAAS: Sass is an extension of CSS3, adding variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS. With the Visual Studio extension conversion into standard CSS is automated.
    • LESS: LESS is similar to SASS in that it also adds support for variables, mixins and more but instead of having a server side or plugin translate the code into standard CSS it runs via a JavaScript library on the client.


    Download JSLint.VS2010

    This is an extension of JSLint for Visual Studio, as I’m sure you are aware of by reading the tool’s title. You probably can’t escape doing web front-end without using any JavaScript. But what about applying patterns and validating code? JSLint, a code quality tool is a solution for this.

    It will hurt your feelings, that’s the promise of JSLint. No, seriously that’s their tagline but it’s more of a warning on how JSLint will hurt your feelings at the beginning but in the end make you a much better JavaScript developer. Writing JavaScript without applying patterns and best practices leaves your code unmaintainable.
    JSLint will apply a set of rules to validate your code and report issues. It helps you enforce usage of patterns and overall code structure.


    (//note there is a lot wrong with this little script, although it does run it’s just for demo)

    You can also try the online version at

    jQuery IntelliSense

    Getting IntelliSense support for jQuery in your ASP.NET MVC 3 projects is already be happening. The default template contains the -.vsdoc.js files which have been commented for Visual Studio IntelliSense. If you want to add this support to another project just install the NuGet package “jQuery.vsdoc”, however the vsdoc files are now included in the default jQuery package so you should get them by default (jQuery version 1.6 and up).



    Image Optimizer (by Mads Kristensen)

    Download Image Optimizer

    A nice little extension integrated into Vial Studio, which uses SmushIt and PunyPNG for optimizing the images. Run it on a folder of images in Visual Studio to have all the images optimized. Gains of 15% to 40% are not unusual with some files I tried out.


    Other tools, not tested

    • JSEnhancements: Similar to JSscript Editor Extensions, it provides outlining and matching braces highlighting for JavaScript and CSS editor.
    • CSS 3 intellisense schema
    • Chirpy: VS Add In For Handling Js, Css, and DotLess Files
    • ReSharper 6, already used by lots of developers also has support for JavaScript and CSS (note this one is not free)

    ASP.NET MVC & HTML5 templates

    As I was working on this post a tweet by @maartenballiauw got my attention:


    So I did just that in the Visual Studio (NuGet) Package Manager console for an ASP.NET MVC3 project. This package adds support to MVC EditorTemplates for new HTML5 input types such as E-mail, Tel and URL. Technically not a tool for my list but interesting to mention here anyway.

    So that’s it for my current list. Don’t forget, add your favorite tools to the list by leaving a comment.

  • Katrien's MSDN Blog

    Visual Studio 2008 productivity - print your keyboard shortcuts sheet for C# and Visual Basic


    Don't like to switch between the keyboard and your mouse when developing in Visual Studio? This sheet is well worth printing for reference.

    A few weeks ago Peter Himschoot showed a keyboard shortcut I had never used before: CTRL + . (dot) at an MSDN Evening event. This will show the SmartTag options for the element. In the case you are referring to a class for which the "using " statement has not yet been inserted it allows you to quickly select the required one with the keyboard.


    This inserts the statement at the top of the class so you can continue on typing.
    I've been using it heavily since. Learning about this easy shortcut made me look into the full reference sheet.




Page 1 of 27 (401 items) 12345»