Build “Out of Browser” Applications with Silverlight

20. June 2010 09:30

Silverlight Visual Studio 

If you think that Silverlight applications are only intended to be run on web browsers, then you are wrong! Silverlight is now widely used to build Rich Internet Application (RIA) allowing users to work more efficiently and make a working session more interactive and attractive. As we all know a customer will always seek for a short-cut method, he will never listen to your comments or suggestions and wants everything to be done in few mouse clicks. A lazy customer! You build an application with a lot of effort and upload it to the user or customer’s website. Now the customer wants the same application for his desktop - he doesn’t want to open browser and work. Writing the same application again for his desktop won’t help and will also waste a lot of development time, why can’t we make the same Silverlight application to run from his machine?

Silverlight gives you an option to install the Silverlight application from the browser to your desktop called “Out of Browser” application support. Consider if you have built a game on Silverlight and upload it to your blog/website allowing you reader or visitors to play the game. It’s not just the case with games but same can be done with applications or with some general web utility like URL shortening service using API.

To get started create a new Silverlight application in Visual Studio 2010.

Give the name to your application and click OK.















 Design your application put the business logic in (if any). Once you are done designing and building the application go to the project properties. Click Project > APPNAME Properties. APPNAME represents the name of your application. In the project properties check the “Enable running application out of browser”.

Out-of-Browser Settings button will get enabled which will let you choose out of browser application settings.

The settings dialogue box is quite self-explanatory. You can set the name of the application which you want to put on the window when it runs out of the browser. You can also set the icon for you application in different sizes. Click OK to save settings.

Now, run you application. You will see your Silverlight application running inside your browser. If you want the application to run out of the browser then right-click anywhere in the browser and click “Install <APPNAME> onto this computer”.

This will prompt you to install the application and place the application icons on your desktop or on your start menu or both. It will give your application the default application install icon. If you have set your own in the Out of Browser Settings then you will see your icon.


Now your Silverlight application is on your system and can be executed at user’s desktop. Check out the same demo here. It's just a demo anyway!

 No Rating

.NET Framework 4.0 Poster

29. September 2009 15:30

.NET Framework Silverlight 

The new .NET Framework 4.0 poster in deepzoom.

Download PDF: (3.22 mb)

Currently rated 4.8 by 5 people

Using Deep Zoom Composer - Part I

25. September 2009 15:56


In my previous post I have shown how to use Seadragon / Deep Zoom with online application. But there is one limitation on this…..which really upsets me is that you can only use one image at a time. To overcome this Microsoft provides us with a tool known as Deep Zoom Composer. Using this tool is pretty simple, just some few easy steps and your Deep Zoom is ready in Seadragon or Deep Zoom composition. Here I will show how to use Deep Zoom composer step by step.
I am using an old version of Deep Zoom composer. Though there is much newer version of Microsoft Deep Zoom which you can download from here. Please be noticed of this that the newer version of Deep Zoom composer might promise you some new features, so there is a probability that the screenshots I have placed here may differs.

Step 1: Initial step is to collect all the high resolution images (not necessary actually, but recommended). When collected open Deep Zoom composer and create a new Project.

Step 2: Select project type from the new “New Project” window. As in the screenshot below you can see there is only one project type to choose from, but as I mentioned earlier that I have used an older version of Deep Zoom composer in this tutorial, you might tend to see some other new project types.

Step 3: Collect the high resolution images from your collection. Choose those images that you clicked from your digital camera, as the images clicked by digital cams are of high resolution and will give a good zoom effect. But if you don’t have a digital camera then go for the high resolution images or wallpapers that you can get from the internet. Here I have included the wallpapers from my vista wallpapers Collection. Click “Add Images” button just above the right pane as shown below in the screenshot.

Step 4: Select multiple images and click OK to start the import of images you selected.

Step 5: Once all the images are imported successfully click the “Compose” button situated at the top of the working area.

Step 6: Drag-n-Drop the images from the right pane showing all the images that you have imported. Select the image and resize it and place the images on the workspace where you want the images to show up when the composition is completed.

Step 7: You can also arrange the images in order to make them appear the way you want. For most of the users it seems to be a very simple function, but if you are a bit creative and understand the concept of Deep Zoom you can create an jaw-dropping composition. Though I will not be covering this option in this article but I will elaborate this option furthermore on my next post with an example. As with the options you are familiar as their name clears everything but just to give an idea you can place an image partially over each other and then set these options. (Don’t forget to check my forthcoming post on how do we use these options more brilliantly.

Step 8: Once you set all the images in the workspace, remember that you the way you are seeing your composition here it will be the same you will witness when you export your composition. In the left hand side there is a small zoom pane which helps you in position the workspace.

Once you finalize the layout of your composition then you can finally export you composition by clicking the “Export” button

Step 9: Now you have 2 export options that will allow you to have your composition either published on the PhotoZoom website (and yes of course, you need to have a windows live ID) or you can export your composition on your local drive.

Step 10: Now on the “Custom” tab you can choose the settings and export your compositions from the available options.

The custom export option allows you to have the Output Type which can be just Images, Silverlight Deep Zoom or Seadragon AJAX.

Step 11: Click the Export button and this is it…when the export is complete you can view your composition in the browser.

Step12: Aftet the export is complete then you can preview the composition in you browser.

Check out the working demo here.

Currently rated 5.0 by 1 person

Microsoft Live Labs - SeaDragon / DeepZoom

24. September 2009 15:04

Microsoft Silverlight 

Microsoft introduces yet another way to present you image collection online and its not only limited to present your huge photo collection but can also help you in your presentation (well I mean jaw-dropping presentation). After Microsoft Photosynth® it is another way to represent the collection of your picures. One thing is good for that you don't even have to download the huge/high resolution images from a website instead you can zoom in/out to get it all done at one place with this great technology. Here is how you can get a quick look and start.

To get started visit: This is an official seadragon link where you get to know more about seadragon and DeepZoom . One good thing I found is that you can use Seadragon with AJAX and in Silverlight both and both supports APIs for developers to develop and leverage DeepZoom functionality. You can download the AJAX library and documenations to guide you throughout your own development process.

If you want to have a quick look on how this in actual works then visit: Here you just have to give the URL of the photo you want to view with Seadragon viewer as shown in the below screenshot:

Once you provide the URL of your image just click Create and you can see the image withing the viewer above and other option to View, Embed and Share. Similarly here you can choose here from different images available.


In the coming posts I will describe how to use DeepZoom composer to create our own custom DeepZoom views. And atlast here is the outcome of the above.


 No Rating