1 Previous Next 

AspNet: Adding Silverlight 1.0 to an Asp.Net project


Silverlight 1.0 is a new Web 2.0 technology for using a subset of WPF on a webpage. 

 

You can interact with the WPF controls with JavaScript.  Silverlight 1.1 will allow you to program with VB but you will have to wait for VS 2008 to be released to use it. 

 

There are versions of Silverlight 1.0 for Windows and Mac pc's. Moonlight is a version that runs on Linux based pc's.

 

http://silverlight.net/GetStarted/

 

http://www.mono-project.com/Moonlight

 

To start off with you need to download and install the Silverlight 1.0 sdk on the Silverlight get started page. 

Then do the following steps.

Step 1.


Add the Silverlight.js and CreateSilverlight.js files found in the Silverlight SDK resources directory to your project.

 

Step 2.

Register the JavaScript files on the page.

<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
</head>

 

For a webpage which uses ajax you have to register the files with the ScriptManager

            <asp:ScriptManager ID="sm1" EnablePartialRendering="true" runat="server">
                <Scripts>
                    <asp:ScriptReference Path="Silverlight.js" />
                    <asp:ScriptReference Path="CreateSilverlight.js" />
                </Scripts>
            </asp:ScriptManager>

Step 3

Create an Xaml page.  Add an xml file to your project and name it myxaml.xaml

 

This xaml page just shows a circle

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

For more examples see the Silverlight SDK

 

Step 4

Create the Silverlight control on your webpage.  Note the div which hosts the silverlight control must be before the javascript for the control to load.

 

    <div id="mySilverlightPluginHost">
    </div>
    <script type="text/javascript">
       
       
        // Retrieve the div element you created in the previous step.
        var parentElement =
            document.getElementById("mySilverlightPluginHost");
       
        // This function creates the Silverlight plugin.
        createMySilverlightPlugin();
        function createMySilverlightPlugin()

    Silverlight.createObject(
        "myxaml.xaml",                  // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        "mySilverlightPlugin",         // Unique plugin ID value.
        {                               // Per-instance properties.
            width:'300',                // Width of rectangular region of
                                        // plugin area in pixels.
            height:'300',               // Height of rectangular region of
                                        // plugin area in pixels.
            inplaceInstallPrompt:true, // Determines whether to display
                                        // in-place install prompt if
                                        // invalid version detected.
            background:'#D6D6D6',       // Background color of plugin.
            isWindowless:'false',       // Determines whether to display plugin
                                        // in Windowless mode.
            framerate:'24',             // MaxFrameRate property value.
            version:'1.0'               // Silverlight version to use.
        },
        {
            onError:null,               // OnError property value --
                                        // event handler function name.
            onLoad:null                 // OnLoad property value --
                                        // event handler function name.
        },
        null);                          // Context value -- event handler function name.
}

    </script>

 

Run your website

 




1 Previous Next