ARTICLE

Host Silverlight in ASP.NET

Posted by Raj Kumar Articles | Silverlight with C# November 22, 2010
This article describes how to host and integrate Silverlight projects and files in ASP.NET application.
Reader Level:

Silverlight 4 comes with tools, controls and functionality that is impossilbe to implement in ASP.NET. Companies are already building cool Silverlight controls. Currently, I am working on a Website where we have to build some Silverlight custom controls and integrate these controls with ASP.NET 4.0 application.

This article describes how we can integrate and host Silverlight controls in an ASP.NET application.

First of all let's make a new Silverlight project and put whatever you like in it; you can use my code for testing.

Here is my MainPage.xaml

<UserControl x:Class="SLTestExample.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"
     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid x:Name="LayoutRoot" Background="White" Margin="-146,-105,-145,-109" Height="500" Width="800">
        <sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="183,159,0,0" Name="datePicker1" VerticalAlignment="Top" Width="120" />
        <sdk:Calendar Margin="312,149,200,73" d:LayoutOverrides="Width"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Welcome Raj Kumar" VerticalAlignment="Top" Margin="179,125,0,0" Width="158" Foreground="#FFC82C2C" FontWeight="Bold" FontStyle="Italic" FontSize="13.333"/>
        <Rectangle Fill="#FF9B9BC2" Height="100" Stroke="Black" VerticalAlignment="Top"/>
        <Rectangle Fill="#FF83A16B" Height="30" Stroke="Black" VerticalAlignment="Bottom"/>
        <Rectangle Fill="#FFC2AF9B" HorizontalAlignment="Left" Stroke="Black" Width="175" Margin="0,104,0,34"/>
        <Rectangle Fill="#FF747370" HorizontalAlignment="Right" Stroke="Black" Width="186" Margin="0,104,0,34"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="This is header" VerticalAlignment="Top" Margin="63,11,0,0" Width="263" FontSize="24" FontWeight="Bold" FontStyle="Italic"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="This is footer" VerticalAlignment="Bottom" Margin="60,0,0,7" Width="263" FontSize="13.333" Foreground="#FFE5EFEF"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="This is left bar" VerticalAlignment="Top" Margin="8,106,0,0" Width="157" FontSize="13.333" Foreground="#FFE5EFEF"/>
        <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="This is right bar" VerticalAlignment="Top" Margin="0,106,18,0" Width="157" FontSize="13.333" Foreground="#FFE5EFEF"/>
    </Grid>
</UserControl>

Now just run the application to see the result. 

 1.jpg

Image 1. 

As you can see silverlight application url looks like this. 

2.jpg

Image 2. 

 3.jpg

Image 3.

In Web project you can see .xap file in ClientBin folder. We are done here with silverlight application.

Now Make a new ASP.NET website. And add that .xap file using Add Existing Item. 

4.jpg

Image 4. 

Now put this code to the .aspx page. 

<body>
    <form id="form1" runat="server">
    <div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/SLTestExample.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40818.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&;v=3.0.40818.0"  style="text-decoration:none">
                   <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>

And finally run the application and see the result.

 5.jpg

Image 5. 

We are done here.

Login to add your contents and source code to this article
comments
COMMENT USING
PREMIUM SPONSORS
Nevron Software is a global leader in component based data visualization technology for a diverse range of Microsoft centric platforms. Nevron Data Visualization components are used by many companies, educational and government organizations around the world.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.