Hosting and Debugging Silverlight in Windows Azure



Objective

This article will give a pictorial representation of how a Silverlight application can be hosted and debugged on local development fabric of Windows azure.

Now a Silverlight application can be hosted in a Web Role. And on local development fabric application can be debugged also.

Step 1

Add .XAP as MIME type to IIS.   To open IIS, click on Start button. After that open Run prompt and type INETMGR. 

1.gif

After selecting MIME type from left top corner, select Open Feature from Action tab. 

2.gif

After opening Open Feature from the Action tab select Add

3.gif

Then add the MIME type. 

4.gif

Step 2

Create Azure service.

Select File -> New -> Cloud Services ->Windows Azure Cloud Service.

5.gif

After that select ASP.Net Web Role and click on arrow button. 

6.gif

7.gif

Step 3

Add a Silverlight application. Right click on solution then select Add New Projects and select Silverlight application from Silverlight tab. 

8.gif

Host the Silverlight application in existing Web Role. 

9.gif

Make sure checkbox for Silverlight debugging is enabled is checked. 

enable.gif

Make Silverlight .aspx page as start page.  Select aspx page from WebRole1 project.

10.gif

Step 4

Add some code in XAML. I am adding a button on Silverlight page and on click event of button , I will display a message in messagebox in debug mode.

MainPage.Xaml

<
UserControl x:Class="SilverlightApplication1.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
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="myButton" Height="200" Width="300" Background="Navy" Content="ClickMe" Click="myButton_Click"  />
    </Grid>
</UserControl>

MainPage.Xaml.cs

using
System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace
SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("I am Debugging Silverlight in Azure ");
        }
    }
}

Output 

11.gif

Step 5

Debugging Silverlight from Azure. Just put a breakpoint in c# code and you would able to debug the Silverlight application hosted in Azure. 

12.gif

On running, 

13.gif

So Silverlight application is in debugging mode.

Conclusion

In this article, I discussed how to host and debug a Silverlight application in Windows azure. Thanks for reading!

Next Recommended Readings