Erik Reitan's ASP.NET WebLog

This FAQ provides answers to questions about Silverlight XAP and ASP.NET. What does XAP mean? Why is XAP important? How does XAP work? How can I create a .xap file in Visual Studio? And, several other questions and answers.

(This information relates to Silverlight 2 Beta 2)

What does XAP mean?

XAP (pronounced ZAP) is the file extension for a Silverlight-based application package (.xap). This file contains the compressed assemblies and resources of a Silverlight 2 application.

 

What is a .xap file?

A .xap file is a Silverlight-based application package (.xap) that is generated when the Silverlight project is built.

 

Why is XAP important?

Tools, such as Visual Studio 2008 with the Microsoft Silverlight Tools Beta 2 for Visual Studio 2008, allow you to create Silverlight applications that are heavily client based using managed code. You can use managed code, such as C# or Visual Basic, and benefit by using the tools that you are used to working with. Also, the client code for the application (JavaScript) is generated for you.

 

How does XAP work?

Once you have created the .xap file (explained below), the Silverlight 2 plug-in downloads the file and runs it in a separate work space.

 

How do I use a .xap file?

A .xap file is used to contain and transfer the assemblies and resources of a managed code application. This managed code application must be run within the Silverlight 2 browser plug-in.

 

Where can I find the Silverlight 2 Beta 2 plug-in?

http://www.microsoft.com/silverlight/resources/install.aspx?v=2.0

 

What are the Compatible Operating Systems and Browsers for the Silverlight 2 plug-in?

Compatible Operating Systems and Browsers

 

How can I view the contents of a .xap file?

To view the contents of a .xap file you can rename the extension of the .xap file to .zip. Then view the .zip file using any standard .zip utility.

 

What are the files contained in the .xap file?

A basic xap file will have an assembly related to specific code for the application, an application manifest file and any additional assemblies need to run the application. At a minimum, two files are needed, the application manifest file and the application assembly.

For example:

AppManifest.xaml

MyPianoV2.dll

 

What is contained in the AppManifest.xaml file?

The AppManifest.xaml file contains the deployment details needed to run the application.

Basic example:

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="MyPianoV2" EntryPointType="MyPianoV2.App" RuntimeVersion="2.0.30523.4">

  <Deployment.Parts>

    <AssemblyPart x:Name="MyPianoV2" Source="MyPianoV2.dll" />

  </Deployment.Parts>

</Deployment>

For more information, see Katrien De Graeve blog post titled Silverlight 2: structure of the new .XAP file (Silverlight packaged application).

 

How can I view the contents of the project related assembly?

You can use any dll inspection utility. Here’s an example of the contents of myPianoV2.dll:

 

 

What tools support creating .xap files?

·         Visual Studio 2008 using the Microsoft Silverlight Tools Beta 2 for Visual Studio 2008.

·         Expression Blend 2.5 June 2008 Preview

·         Chiron.exe – Located in the Tools folder of your Silverlight Tools Beta 2 for Visual Studio 2008 installation. For more information see, Dynamic Languages in Silverlight 2.

 

I’m unable to display the contents of the .xap file when I run the application in a Web page within the browser?

Check the following:

·         Make sure you are using the Silverlight 2 Beta 2 plug-in.

·         Make sure you have the XAP mime type set for IIS (see below).

·         Check to be sure you included your resources, such as graphics, with your Silverlight Application (see below).

·         Make sure the .xap file is contained in the ClientBin folder of your Web application.

·         Check the Silverlight Tools page for additional troubleshooting details.

 

What is the XAP mime type?

The .xap mime type is:

application/x-silverlight

For more information, see Michael Schwarz blog post and Microsoft Help and Support.

 

How can I create a .xap file in Visual Studio?

1.       Install the following:

·         Visual Studio 2008.

·         The .NET Framework version 3.5.

·         Microsoft Silverlight Tools Beta 2 for Visual Studio 2008.

·         Silverlight version 2 Beta 2 plug-in.

 

2.       Follow the steps in the following walkthrough to create a .xap file:
Walkthrough: Integrating XAML into an ASP.NET Web Site Using Managed Code

 

What managed programming languages can I use to create a Silverlight 2 application?

C#, Visual Basic

 

What dynamic programming languages can I use to create a Silverlight 2 application?

IronPython, IronRuby, and Managed JScript

For more information, see Programming Silverlight with Dynamic Languages and Dynamic Languages in Silverlight 2.

 

How do I run the Silverlight 2 application (including the .xap file) with the Silverlight 2 plug-in?

You can use the ASP.NET Silverlight Server Control to reference your .xap file. Specifically, you use the Source property to reference the XAP application package. The Version must be set as well.

 

Code contained in an .aspx file:

 

Is there an example of a Silverlight 2 Beta 2 .xap application available?

Yes.

Code (C# & VB) that shows how to include a .xap file in a Web page.

Example that shows a running Silverlight 2 Beta 2 application. Note: You will need to install the current runtime plug-in, unless you already have it installed. After installing, close all browser windows and click the Example link.

 

How do I include resources with my Silverlight 2 application?

The example above shows one way to include resources in a Silverlight 2 application. However, Katrien De Graeve has a blog entry titled Different ways for loading images and files in Silverlight 2 applications that explains how to include resources in more detail.

 

What is the XmlXapResolver class?

The XmlXapResolver class is used to resolve resources that are contained in the Silverlight application’s XAP package.

 

What about the XACT Project File Format (.xap)? Is this the same file type as a Silverlight .xap file?

This file type is not related to Silverlight.

The Xbox Audio Creation Tool Project File format (.xap), is read and written by the XACT authoring tool (xact.exe), is utilized by the command-line build environment (xactbld.exe), and contains all of the instructions necessary to generate XACT content. It is a complete description of all XACT wave banks, sound banks, and global settings. For more information see, XACT Project File Format (.xap).

 

Can you point me to additional information?

Yes. Here are a number of links that you may find interesting and helpful.

ASP.NET Controls for Silverlight – ASP.NET Documentation that includes code and running examples.

System.Web.UI.SilverlightControls Namespace – ASP.NET Documentation - managed reference.

Sys.UI.Silverlight (client) Namespace – ASP.NET Documentation – client reference

Silverlight FAQ

Why Silverlight?

Silverlight Resources

Silverlight 2 Beta 2 and Silverlight Streaming

Scott Guthrie’s - Silverlight 2 Beta2 Released

 

What is Silverlight?

Silverlight is a new Web presentation technology that is created to run on a variety of platforms. It enables the creation of rich, visually stunning and interactive experiences that can run everywhere: within browsers and on multiple devices and desktop operating systems (such as the Apple Macintosh). In consistency with WPF (Windows Presentation Foundation), the presentation technology in Microsoft .NET Framework 3.0 (the Windows programming infrastructure), XAML (eXtensible Application Markup Language) is the foundation of the Silverlight presentation capability. For more details, see Getting Started with Silverlight.

 

What is the difference between Silverlight 1.0 and Silverlight 2.0?

Silverlight 1.0 is a cross-browser, cross-platform plug-in allowing rich media experiences and interactive applications for the Web. Silverlight 2.0 extends the 1.0 plug-in by also including a light-weight .NET framework. This light-weight .NET framework supports the C# and Visual Basic programming languages.

 

Why was Silverlight 1.1 changed to Silverlight 2.0?

Previously, Microsoft had been referring to the .NET-enabled Silverlight release as "Silverlight V1.1".  After stepping back and looking at all the new features in it, they realized that calling it a point release doesn't reflect the true nature of it. Consequently, they decided to change the name and refer to it as "Silverlight V2.0" going forward. For more details, see Scott Gu’s blog.

What platforms does the Silverlight 1.0 Plug-in support?

The runtime is available for Microsoft Windows and Mac OS X, with Linux support under development via the third-party Moonlight runtime.

 

How do I control the Silverlight 1.0 Plug-in?

You control the Silverlight 1.0 Plugin using the JavaScript programming language. Specifically, see the Client Reference section of the Microsoft AJAX Library.

 

What is the Silverlight client namespace?

Sys.UI.Silverlight. For preview information about the Silverlight client namespace, see the ASP.NET 3.5 Extensions Preview.

 

Can I completely control the Silverlight Plug-in using client script?

Yes. For more information, see the section title Using Client Script with the MediaPlayer Control of the topic titled ASP.NET MediaPlayer Server Control.

 

Where can I find out more about the JavaScript syntax and capabilities?

The ASP.NET web site details the Microsoft AJAX Library and has a Client Reference section that is helpful. For more information about AJAX, see the ASP.NET AJAX Roadmap.

 

Are there server side controls for Silverlight?

Yes. These are also in development based on the time of this blog post. For preview information about the Silverlight server namespace and controls, see the ASP.NET 3.5 Extensions Preview.

 

What are the Silverlight ASP.NET Controls?

System.Web.UI.SilverlightControls.MediaPlayer

This control provides a XAML-based player that runs media (movie or audio) in an ASP.NET Web page. The player can be represented through a number of pre-defined skins. The Media server control inherits from the Sys.Web.UI.SilverlightControls.Silverlight control. For more information see, the ASP.NET 3.5 Extensions Preview.

System.Web.UI.SilverlightControls.Silverlight

This control provides a way to integrate Silverlight in an ASP.NET Web page. This control inherits from System.Web.UI.Controls.WebControl, and implements System.Web.UI.IScriptControl. The Silverlight server control uses XAML in combination with the Silverlight plug-in and the JavaScript Sys.UI.Silverlight.Control class. Unlike the MediaPlayer server control, the Silverlight server control is generic and is not designed only to manage media files. For more information see, the ASP.NET 3.5 Extensions Preview.

 

*** Of course, the above information contains preview details. Details may change.

 

What is the difference between the MediaPlayer server control and the Silverlight server control?

The MediaPlayer control inherits from the Silverlight control. The MediaPlayer control offers ways to play media in a skin (frame with controls). The skin can be modified. It is XAML.

 

What DLL are the Silverlight server controls contained in?

System.Web.Extensions.dll. Note the latest version at the time of this blog post is version 3.6.

 

How do I use the ASP.NET MediaPlayer server control?

To use the MediaPlayer server control, you reference a media source file and select a built-in skin.

The following example shows the declarative markup for a MediaPlayer server control with property settings.

<asp:MediaPlayer runat="server" ID="Media1"

   ScaleMode="Stretch"

   AutoPlay="true"

   MediaSource="MyVideoFile.wmv"

   PluginBackColor="blue"

   MediaSkin="Professional"

   Height="240"

   Width="320" />

The MediaPlayer control creates the Sys.UI.Silverlight.MediaPlayer client script class (based on the model used in the ASP.NET AJAX Extensions) that provides a JavaScript programming model to control the client player. By default, the Silverlight client player is the Silverlight 1.0 browser plug-in. For more information, see ASP.NET MediaPlayer Server Control.

 

What does the MediaPlayer server control use as its source?

The MediaPlayer control supports a variety of media file types, including .wmv, .wma and .mp3.

 

What is a MediaSkin file?

The MediaSkin is the frame for the media. It is XAML based. If you want to change the appearance of the MediaPlayer control's rendered skin, you can create your own XAML markup in a .xaml file. You can then reference the .xaml file by setting the MediaSkin property of the MediaPlayer control.

 

How do I use the ASP.NET Silverlight server control?

The following example shows the markup for a Silverlight server control that defines a simple calculator in XAML. The logic for interacting with the XAML is defined in a separate JavaScript class. The Silverlight server control references the file that contains the XAML markup (Calculator.xaml). You can also see how to reference the client-script library (Calculator.js) for the calculator code, and how to reference the JavaScript class (Custom.Calculator).

<asp:ScriptManager ID="ScriptManager1" runat="server">

  <Scripts>

    <asp:ScriptReference Name="SilverlightControl.js" />

    <asp:ScriptReference Path="calculator.js" />

  </Scripts>

</asp:ScriptManager>

 

<asp:Silverlight runat="server" ID="Silverlight1"

    Height="340"

    Width="320"

    Source="calculator.xaml"

    ClientType="Custom.Calculator"

    OnClientPluginError="onXamlError">

In its basic form, the Silverlight server control provides a JavaScript type that includes members such as the pluginLoaded event and the pluginError event. The Silverlight server control references a XAML file through the Source property. The code for interacting with the XAML can be in a managed-code assembly or in a client JavaScript library (.js file).

 

What does the Silverlight server control use as its source (the information it renders)?

XAML.

 

What is XAML?

XAML simplifies creating a UI for the .NET Framework programming model. You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files, joined to the markup through partial class definitions. The ability to mix code with markup in XAML is important because XML by itself is declarative, and does not really suggest a model for flow control. An XML based declarative language is very intuitive for creating interfaces ranging from prototype to production, especially for people with a background in web design and technologies. Unlike most other markup languages, XAML directly represents the instantiation of managed objects. This general design principle enables simplified code and debugging access for objects that are created in XAML. For more information, see XAML Overview.

What tools can I use to help me create XAML files?

Microsoft Expression Blend. For more information, see Silverlight QuickStart

Using Microsoft Expression Blend, Expression Blend and Expression Blend and Design – Team Blog.

 

 

Let me know if this information is helpful. I'll add aditional details.

 

Erik Reitan

Programming Writer - ASP.NET User Education

ASP.NET AJAX makes working with client objects and client events much easier. The code below allows you to choose the type of event and the "test" object to act upon. I pulled a sub-set of client events from the W3Schools.com site (included below). Also, the code I'm working with began as an AJAX sample I created for the ajax.asp.com/doc site. Although now, this code is much more dynamic. 

I included a number of events that you can select from the UI:

Events
keyup
keydown
keypress
focus
blur
change
click
dblclick
mousedown
mousemove
mouseover
mouseout
mouseup
select

I think the most interesting aspect of the client events involve the charCode verses the keyCode. The keyCode field is raised by the keyUp or keyDown event. The charCode field is raised by the keyPress event. The keyUp and keyDown events are raised for every key, which includes modifier keys such as ALT, CTRL, and SHIFT. The keyPress event is not raised for these single modifier keys. Try out the code below. You can select the type of event and the object to interact with. Once you have made your selection, interact with the "Test" object to see the event details.

Here's the code:

<%@ Page Language="C#" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

 

</script>

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head id="Head1" runat="server">

    <title>Example</title>

    <style type="text/css">

    #UpdatePanel1 {

      width:300px; height:100px;

     }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"/>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">

            <ContentTemplate>

                   <p></p>

                   <asp:Panel ID="Panel2" runat="server" GroupingText="Select Event & Object">

                   <table>

                   <tr>

                   <td>

                   <asp:Label ID="Label3" runat="server" Text="Event Type: "></asp:Label>

                   </td>

                   <td>

                   <asp:DropDownList ID="DropDownList3" runat="server">

                        <asp:ListItem>keyup</asp:ListItem>

                        <asp:ListItem>keydown</asp:ListItem>

                        <asp:ListItem>keypress</asp:ListItem>

                        <asp:ListItem>focus</asp:ListItem>

                        <asp:ListItem>blur</asp:ListItem>

                        <asp:ListItem>change</asp:ListItem>

                        <asp:ListItem>click</asp:ListItem>

                        <asp:ListItem>dblclick</asp:ListItem>

                        <asp:ListItem>mousedown</asp:ListItem>

                        <asp:ListItem>mousemove</asp:ListItem>

                        <asp:ListItem>mouseover</asp:ListItem>

                        <asp:ListItem>mouseout</asp:ListItem>

                        <asp:ListItem>mouseup</asp:ListItem>

                        <asp:ListItem>select</asp:ListItem>

                   </asp:DropDownList>

                    </td>

                    </tr>

                    <tr>

                    <td>

                   <asp:Label ID="Label5" runat="server" Text="Test Object: "></asp:Label>

                    </td>

                    <td>

                   <asp:DropDownList ID="DropDownList2" runat="server">

                        <asp:ListItem>TextBox1</asp:ListItem>

                        <asp:ListItem>Button1</asp:ListItem>

                        <asp:ListItem>LinkButton1</asp:ListItem>

                        <asp:ListItem>DropDownList1</asp:ListItem>

                        <asp:ListItem>CheckBox1</asp:ListItem>

                        <asp:ListItem>Calendar1</asp:ListItem>

                   </asp:DropDownList>

                   </td>

                   </tr>

                   </table>

                   </asp:Panel>

 

                   <p></p>

                    <asp:Panel ID="Panel1a" runat="server" GroupingText="Interact with Test Object">

                        <br />

                        <asp:TextBox ID="TextBox1" runat="server" Text="" ></asp:TextBox>

                        <asp:Button ID="Button1" runat="server" Text="Button" style="display:none" />

                        <asp:LinkButton ID="LinkButton1" runat="server" style="display:none">LinkButton</asp:LinkButton>

                        <asp:DropDownList ID="DropDownList1" runat="server" style="display:none">

                            <asp:ListItem>Test1</asp:ListItem>

                            <asp:ListItem>Test2</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CheckBox ID="CheckBox1" runat="server" />

                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

                    </asp:Panel>

                   <p></p>

                   <asp:Panel ID="Panel1" runat="server" GroupingText="Event Details">

                   <asp:Label ID="Label2" runat="server"></asp:Label>

                   </asp:Panel>

            </ContentTemplate>

        </asp:UpdatePanel>

    </form>

</body>

 

    <script type="text/javascript">

    updateEventHandling();

    // On change of DropDownList3, set handler

    $addHandler($get("DropDownList3"), "change", updateEventHandling);

    // On change of dropdownlist2, set handler

    $addHandler($get("DropDownList2"), "change", updateEventHandling);

    var eventVal;

    var myArray = ['altKey', 'button', 'charCode', 'clientX', 'clientY',

                   'ctrlKey', 'offsetX', 'offsetY', 'screenX', 'screenY',

                   'shiftKey', 'target.id', 'type', 'keyCode'];

 

    function updateEventHandling() {

      // Clear handlers and hide all "Test" objects

      var objectList = $get("DropDownList2");

      var elementIDVal;

      for (i=0;i<objectList.length;i++) {

        elementIDVal = objectList.options[i].text;

        $clearHandlers($get(elementIDVal));