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> ...