Partager via

Deploying Existing Silverlight Application (Deep Zoom) on Windows Azure

  • Article

In this blog, I will introduce several Microsoft Technologies showed as below and you could view live demo on https://tibet.cloudapp.net/

  1. Using Deep Zoom Composer to develop a Silverlight based photo gallery (You could use your existing Silverlight Application here)
  2. Migrate Existing Silverlight Application onto Windows Azure
  3. Deploy Windows Azure Application on Cloud

Here, I will showcase how easily you could compose a Silverlight-based Deep Zoom applications onto cloud. You can skip part I if you plan to use your existing Silverlight application. Here, I will introduce a very powerful tool called Deep Zoom Composer in part I. If you have a lot of pictures to show, you can compose a Silverlight application easily for you to browser all the photos. You can check Hardrock café example here.

Firstly, let's walk-through how to use Deep Zoom Composer to develop Siverlight based photo gallery.

1.  You need to download Deep Zoom Composer here. This is a tool to allow the preparation of images for use with the Deep Zoom feature in Silverlight. Hard Rock is using Deep Zoom technology to feature their site, and you could take a look here.

2.  After installation and open the tool. Select File - New Project...

3.  You will see a Add images button in the right up corner. By clicking it, you could upload photos from your local drives.

4.  Next, click on Compose Icon on the Top Navigation Bar and you could compose your imagines on canvas by drag-and-drop. Noted, you could zoom in/out canvas to place photos with different sizes. Meanwhile, noted there are several functions lined up in the right side of the tool, such as Slide Show, Menu, Internal Links, External Links. You could drag photos from right sides into Slide show to compose the sequences of your slide show. Also, you could do the same for the rest. For internal/external links, you could specify link and when user clicks on the photo, he/she will be re-directed to the page that your link specified.

5.  Now, click on Export Icon from the top navigation bar. Type in the name of your Deep Zoom application and choose location for your files as well. There are several templates you could choose from. And here, I will select Deep Zoom Navigation. And you could further customize your image settings. Click on Export.

6.  After exporting successfully, you will be able to either viewing your silverlight application in web browser or browse files in local folders.

Secondly, we will see how to Migrate Existing Silverlight Application onto Windows Azure.

7. Download Windows Azure SDK and Tools for Visual Studio here.

8. Open Visual Studio as administrator. Current I am using Visual Studio 2010 for this example.


9. Select File –> New –> Project… Select Windows Azure Cloud Service in Visual C# Category.

9. Right click on Role Folder under TibetDemo project and select New Web Role Project…


10. Select ASP.NET Web Role and to Cloud service solution and rename it as tibetWeb showed as below:


11. Now, copy over files from XX\Documents\Expression\Deep Zoom Composer Projects\Tibet-Demo\Exported Data\tibet_demo (you may look for your own file directory) under this project. A quick way is to right click on tibetWeb and open folder in windows explorer.
12. Click on  Icon [Show all Files] showed below and you will see folder GeneratedImages showed in a dash line. Right-Click and select Included in the project.

13. Open Web.Config and add in codes showed below to set the default starting page as Test.html. You need to modify the web.config file and add the following setting in the <system.Webserver> section: 

<defaultDocument>
      <files>
        <add value=”Test.html”/>
      </files>
 </defaultDocument>

14. Now compile and build your page. You could set Test.html as Start page by right clicking Test.html and test your Silverlight page locally.

15. Right Click on TibetDemo Cloud project and select Publish… and Select Create Service Package Only… You will be able to see a folder pop up with all the publish documents.

Lastly, we will show you how to Deploy Windows Azure Application on Cloud.

16. You need to go and register here for a Azure account if you don’t have one.

17. Create a new service under your Cloud server, choose Hosted Service showed as below:

18. Type in a Service Label and Service Description showed as below to create a new service. Click on Next.


19. Fill in Public Service Name, this will be the url to access your cloud application. Also, you could choose your server location as well. Click on Create once you have filled in all the information.

20.  You will be able to see this screen showed below. Click on the arrow besides Production Cube, you could see Staging Cube. Grey color indicates cloud service is not running on cloud and hence you are not charged at this point of time.


21. Click on Deploy… and you will see a dialog showed as below. Select the folder where you Published your Cloud Service just now. Choose Application Package for the first Browse Button and choose configuration settings for the second Browse Button. Click on Deploy and application is deploying to the Cloud for you now.

22. After Click Deploy, click on Run and you will see the status of the application becomes Initializing. You need to wait for a while to see your page up. Basically, the status needs to be Ready with a green dot.


23. Remember that the computing hour is counted once the tube is blue. You need to click on suspend to stop the service. Now you can see the app up and running! Check out https://tibet.cloudapp.net/ to see this up and running demo!