Share via

Using Inline XAML as the XAML Source

  • Article

Instead of setting the initial Microsoft Silverlight content by using a discrete file that is referenced by a Uniform Resource Identifier (URI), you can specify an area of inline HTML content that contains your XAML. To use this technique, you must enclose the XAML in a special <SCRIPT> block and specify "text/xaml" as the type attribute. The XML document type declaration, <?xml version="1.0"?>, precedes the XAML content. The XAML content must be uniquely identified so that it can be referenced by the source initialization parameter of the Silverlight plug-in. The source parameter uses the prefix "#" followed by the id value in the <SCRIPT> tag to identify the XAML content. The XAML content can also define events that reference event handlers on the HTML page.

The following HTML example shows how to create inline XAML content. In this case, the HTML page contains both JavaScript and XAML content.

HTML 
<html>
<head>
  <title>Display Date</title>
  <script type="text/javascript" src="CreateSilverlight.js"></script>
  <script type="text/javascript" src="Silverlight.js"></script>
  <!-- Define Loaded event handler for TextBlock. -->
  <script type="text/javascript">
    function setDate(sender, eventArgs)
    {
      sender.text = Date();
    }
  </script>
</head>
<body bgcolor="Teal">
<!-- Define XAML content. -->
<script type="text/xaml" id="xamlContent"><?xml version="1.0"?>
  <Canvas
    xmlns="https://schemas.microsoft.com/client/2007"
    Background="Wheat">
    <TextBlock
      Canvas.Left="20"
      FontSize="24"
      Loaded="setDate" />
  </Canvas>
</script>
<div id="pluginHost" >
  <script type="text/javascript">
    var parentElement = document.getElementById("pluginHost");
    createSilverlightEx();
  </script>
</div>
</body>
</html>

Note   The <SCRIPT> tag that contains the inline XAML content must precede the HTML element that contains the Silverlight plug-in, which references the inline XAML for its source initialization.

The following JavaScript example shows how to reference the inline XAML content in the user-defined CreateSilverlightEx method in CreateSilverlight.js, which then calls the CreateObjectEx helper function in Silverlight.js. When you use CreateObjectEx, parameter values that are not defined are set to their default values.

JavaScript 
function createSilverlightEx()
{  
    Silverlight.createObjectEx({
        source: '#xamlContent',         // Source property value, referencing an ID in the HTML DOM.
        parentElement:parentElement,    // DOM reference to hosting DIV tag.
        id:'myPlugin',                  // Unique plug-in ID value.
        properties:{                    // Plug-in properties.
            width:'360',                // Width of rectangular region of plug-in, in pixels.
            height:'60',                // Height of rectangular region of plug-in, in pixels.
            background:'oldlace',       // Background color of plug-in.
            version:'1.0'},             // Plug-in version.
        events:{
            onLoad:null}});             // OnLoad property value -- event handler function name.
}

The following illustration shows the page from the previous HTML example. When this page is displayed, the Silverlight plug-in is loaded and the Loaded event for the TextBlock object is fired, which causes the TextBlock to display the current date and time.

Display output for inline XAML content example

Display output for inline XAML content example

See Also

Silverlight Object Models and Scripting to the Silverlight Plug-in
Instantiating a Silverlight Plug-in (Using CreateSilverlight.js and Silverlight.js)
Constructing Objects at Run Time
Source
Overviews and How-to Topics