Microsoft & .NETASPHow to Construct a Reusable Silverlight ASP.NET User Control

How to Construct a Reusable Silverlight ASP.NET User Control

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Silverlight opens the door for exciting new ways to provide more productive, engaging, and innovative experiences across multiple platforms. Excitingly, developers are able to leverage existing development skills to create these experiences.

Note: The material that follows is intended for the Silverlight Beta 1 Release.

Silverlight also provides an excellent opportunity to cement a product or organization’s identity within users’ minds. Once a product or organization has established an identity, that identity is something that will often remain constant for a sizable timetable. The process of establishing an identity is often referred to as “branding.”

This situation of branding provides an excellent opportunity to walk through how to develop a reusable ASP.NET user control that assists in setting an application’s experience apart from others. For an overview of ASP.NET user controls, please visit http://msdn2.microsoft.com/en-us/library/fb3w5b53.aspx.

The Goal

At the end of this article, a fully constructed and reusable corporate logo will be created. This component will be built using the following technologies: ASP.NET, Silverlight, and JavaScript. The corporate logo will look like the following:

Within any web application, it is likely that several different technologies are used. It is important to understand how these various technologies interact with each other. It is equally important to understand where each technology is being invoked (in other words, on the client or the server). This is important because that, by understanding where each technology is invoked, you receive a easier understanding of how the technologies interact with each other.

ASP.NET is a server-side technology. It can be used to generate HTML code, which then can be delivered to the client over a network. HTML is essentially a client-side technology that is rendered through a web browser. In addition to HTML, Silverlight includes a client-side runtime that enables browsers to render XAML content. Because the XAML content is rendered on the client side, each element can be managed through JavaScript.

This simple example will show how easily Silverlight can be integrated with existing web applications. This straightforward integration is accomplished via a model that is consistent with the web architecture. This consistency also allows for the utilization of pre-existing development skills.

This article assumes the reader is familiar with web technologies such as ASP.NET, HTML, and JavaScript. Initially, this article will focus on the client side technologies (HTML, Silverlight, and XAML) before proceeding onto the ASP.NET integration.

The XAML

Silverlight utilizes a subset of the Windows Presentation Foundation. Similar to WPF, Silverlight is XAML-based. XAML code can be used to define the look-and-feel of visual components. The XAML code for the corporate logo displayed earlier is as follows:

<Canvas 
        xmlns_x="http://schemas.microsoft.com/winfx/2006/xaml">
   <!--Remove the following XAML and define your logo XAML here-->

   <Ellipse Height="50" Width="50" Stroke="#648CBE"
    StrokeThickness="5" Fill="Transparent"  />
   <TextBlock Text="C" Canvas.Left="12" Canvas.Top="6"
    FontFamily="Verdana" FontWeight="ExtraBold"
    FontSize="30" Foreground="#84A58D" />

   <!--End of logo XAML-->


Notice from the XAML snippet that the corporate logo is more than an image being referenced, although there is support to do such. Instead, the corporate logo is composed entirely of XAML! The utilization of XAML is important in this case because it grants flexibility. With the combination of JavaScript, or even more XAML, the corporate logo could be manipulated to animate only the “C” portion of the logo, if desired. With some imagination and a text editor, it is possible to create content that leaves a lasting impression.

Creating designs entirely from a text editor leaves something to be desired. Thankfully, Microsoft has created an application called “Microsoft Expression Blend,” that allows individuals to create designs using a designer-centric set of tools, which automatically generates XAML from designs created within Blend.

Hosting Silverlight Content

At this point, the XAML for the corporate logo has been constructed. However, before the XAML content can be displayed, a connection between the browser and the Silverlight runtime must be defined. This connection between the Silverlight runtime and the browser is managed via a browser plug-in. This plug-in is invoked through the use of a Silverlight control, which can be defined on a web page through the use of standard JavaScript. Here is a sample of how to invoke an instance of a Silverlight control.

<head>
   <script type='text/javascript' src='CreateSilverlight.js'>
   </script>
   <script type='text/javascript' src='Silverlight.js'></script>
   ...
   </head>

   <body>
   ...
   <div id="silverlightHost">
      <script type='text/javascript'>
         // Reference the HTML element that hosts the Silverlight
         // content
         var htmlElement = document.getElementById("silverlightHost");

         // Create the Silverlight control
         Sys.Silverlight.createObject
         (
             // The Source property value, which is essentially
             // the XAML to load
             "CorporateLogo.xaml",
             // The "DIV" element that hosts the Silverlight control
             htmlElement,
             // The unique identifier of the Silverlight control
             // instance
             "silverlight1",
             // Begin constructing the control properties
             {
                // Width of the area containing the Silverlight
                // content
                Width:'50',
                // Height of the area containing the Silverlight
                // content
                Height:'50',
                inplaceInstallPrompt:false,
                // The bg color of the area surrounding the control
                background:'white',
                // Determine whether or not to display the control
                // in windowless mode
                isWindowless:'false',
                // Define the maximum frame rate
                framerate:'30',
                // Define which version of the control to use
                version:'0.9'
             },
             {
                // The event handler to call when the control is
                // loaded
                onLoad:null
             },
             null
         );


      </script>
   </div>
   ...


This is a small sample to display how easily Silverlight and HTML integrate with each other. This integration makes it simple to access and manipulate XAML code through an old, familiar friend, JavaScript. The next step involves constructing an ASP.NET user control to host the corporate logo.

The ASP.NET User Control

User controls generally are created when there is a need for reusable content. A corporate logo is an item that could conceivably be used numerous times throughout the course of an application. Additionally, if the need arises to use a control across applications, the user control’s sibling, the custom control, may be a more appropriate alternative. Reusability is recursively responsible.

The ASP.NET markup code for the corporate logo user control is defined below. In this specific instance, the code-behind has been intentionally omitted. However, that is because there is no procedural code to mention. At the end of this article, you will find a zip file containing the source code for this example. Please examine the code for yourself.

<%@ Control Language="C#" AutoEventWireup="true"
 CodeBehind="CorporateLogo.ascx.cs"
 Inherits="SilverlightUserControl.CorporateLogo" %<

<div id=<%= ""silverlightHost" + this.ID + """ %>>

   <script type="text/javascript" src="js/CreateSilverlight.js">
   </script>
   <script type="text/javascript" src="js/Silverlight.js"></script>

   <script type="text/javascript">
        // Reference the HTML element that hosts the Silverlight
        // content
        var htmlElement =
           document.getElementById(<%= ""silverlightHost" +
                                    this.ID + """ %>);
        
        // Create the Silverlight control
        Sys.Silverlight.createObject
        (
            "CorporateLogo.xaml",
            htmlElement,
            <%= ""silverlight" + this.ID + """  %>,
            {
                width:'50',
                height:'50',
                inplaceInstallPrompt:false,
                background:'white',
                isWindowless:'false',
                framerate:'30',
                version:'0.9'
            },
            {
                onLoad:null
            },
            null
        );
   </script>
</div>

The key item in this code snippet is the utilization of the value of the user control’s “ID” property. The “ID” property of the user control is utilized in:

  • Assigning the “id” attribute of the hosting DIV element
  • Referencing the hosting DIV element within the instantiation of the Silverlight control
  • Defining the ID of the Silverlight control

This is important because it ensures unique references of the Silverlight content. To illustrate why this is needed, envision creating a web page that requires the use of the corporate logo multiple times. Without the unique names, there would be no way to distinguish between the various instances of the logo.

Conclusion

At this point, a very basic user control that utilizes Silverlight has been constructed. This user control demonstrated how to integrate Silverlight content with a web application. It also demonstrated how one can leverage an existing skillset to harness the power of a new technology.

Silverlight provides new avenues for building lasting connections with users. It’s important to grow these connections with minimal effort. With Silverlight, it’s easy to strengthen your brand leveraging your existing web applications.

Download the Code

Download the zip file that contains all the code for this article here.

About the Author

Chad Campbell (MCSD, MCTS) is a solutions developer for mid- to large-sized organizations. He is a thought leader with Crowe Chizek in Indianapolis, Indiana. Chad specializes in Web-based solutions, Reach him at cacampbell@crowechizek.com.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories