Wahlin on .NET
Silverlight XAML Primer 6: Using Inline XAML with Silverlight
Dan shows you the code you need to embed XAML code directly into a page, plus the problems this might cause with Firefox and how to work around it.
XAML provides a declarative way to define objects and shapes that can be used in a Silverlight application. The latest articles in my
Silverlight series have focused on various XAML elements and attributes that can be used to create shapes, define text and work with gradients. There are still many more topics to cover, but I wanted to take a short break from XAML specifics and discuss another option in Silverlight that relates to XAML.
The majority of Silverlight applications that you'll see will reference an external XAML file using a URL. This is done by using the createObjectEx() method (or createObject()), as shown in Listing 1.
Although storing XAML in a separate file is generally recommended, there may be situations where you'd like to embed XAML code directly into a page to simplify an application, make it more maintainable for the future, or dynamically embed XAML based on specific application rules. Silverlight provides support for referencing XAML that's defined "inline" within a page and it's quite simple to take advantage of when needed.
Listing 2 shows a complete Web page that defines XAML inline and references it using createObjectEx().
As you look through the code in Listing 2, note that the XAML is embedded within a <script> tag that has an ID attribute and a specialized type attribute set to a value of "text/xaml." The XAML also includes the XML declaration as the first line of code:
<?xml version="1.0"?>
Also, note that no carriage return is included between the <script> tag and the XML declaration. The source parameter passed to the createObjectEx() method identifies the XAML to use with the # character followed by the ID of the <script> tag. At runtime, the Silverlight control will locate the <script> tag and load the XAML dynamically.
While the inline XAML approach works well and allows for some interesting scenarios
when dynamic XAML needs to be embedded in a page, there's a potential "gotcha"
with this approach. When a DOCTYPE definition (such as XHTML 1.0 Transitional)
is included at the top of a page with inline XAML, Firefox may not render the
Silverlight content properly (more information can be found here).
I don't experience this problem because I have the default auto-update feature
built into Silverlight turned on and the first service release fixes the issue.
It's possible that some users may turn that setting off, though, which is why
I mention it.
If you do happen to experience this problem, you can typically resolve it by removing the DOCTYPE definition from the page -- although that may not be something most Web developers would feel good doing. Another potential solution that allows the DOCTYPE definition to stay in place is to move the inline XAML inside of a JavaScript variable which is then assigned to the Silverlight control during its load event. A nice explanation of this potential workaround can be found here.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.