Wednesday, July 7, 2010

Setting Up the ClientBin Folder to Debug a Silverlight Control in a Test ASP.NET Application

If you create a new Silverlight control using either VS.NET 2010 or Expression Blend 4, you are already off on the right foot for setting up a test ASP.NET application for running and debugging a Silverlight control. The newer versions of these applications configure well the test project, creating the 'ClientBin' folder, and associated test .aspx page including preconfigured <object> tags referencing the control.

But what if you have an old or mis-configured project that manually references a .xap file, or had to be constantly updated in Explorer in the referenced path? It is especially important to have the configuration correct in a test app or debugging the .xap from the source Silverlight project is not possible. The following steps describe how to easily reconfigure your ASP.NET test harness to properly reference the .xap generated from the Silverlight control created within the same solution.

1. Right click the ASP.NET test project and select 'New Folder'. Name it 'ClientBin' (without the quotes). Only do this step if the folder does not already exist.

2. Right click the ASP.NET test project (this project should be in the same solution as the Silverlight Control being referenced) and select 'Properties' (or 'Property Pages' for website projects).

3. While still in the Properties, open the 'Web' (for web project types) or 'Start Options' (for website types) and make sure to scroll down and have the 'Silverlight' checkbox checked under 'Debuggers'.

4. Select the 'Silverlight Applications' tab or selection on the left hand pane.

5. Click the 'Add' button to bring up the 'Add Silverlight Application' dialog box.

6. Make sure the radio button selection for 'Use an existing Silverlight project in the solution' is selected, and select the Silverlight control to reference.

7. In the 'Destination folder:' field, make sure 'ClientBin' is in the textbox. This will most likely be pre-populated.

8. Configure the remaining options to your liking. I suggest leaving 'Add a test page that references the control' checked as this will save you from having to do this from scratch.

At this point try starting debugging the Silverlight code by placing a breakpoint in the source. Obviously make sure the ASP.NET test app is set as the default project, and set the newly created page to be the startup page. If you configured it correctly, your code will properly place any new builds of the .xap into the ClientBin folder of the test app, and should allow for proper debugging.

4 comments:

  1. Thanks. I had somehow lost this mapping and it took forever to figure out how to get it back.

    For those who have had the same problem as I did, this will likely fix the problem if the .xap file in your Silverlight project has a different timestamp than the .xap file in your ClientBin.

    ReplyDelete
  2. Thanks for this tuto.
    For a specific project I need to have the .xap in a folder different than 'ClientBin'. That does work but I can't manage to debug anymore. Is 'ClientBin' a name convention?

    ReplyDelete
  3. Thanks for this tuto.
    I was wondering if 'ClientBin' is a name convention. I'm trying to use another folder instead. It still works but I can't debug the .xap anymore. Is there something to set somewhere?

    ReplyDelete