SourceElement Property

[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

Specifies the XAML content to render.

HTML
<OBJECT/EMBED SourceElement="xamlContent" .../>
Scripting

xamlContent = wpfeObject.sourceElement

wpfeObject.sourceElement = xamlContent

Property Value

fileName

Loads a string containing XAML content into the WPF/E control.

This property is read/write. The default value is null.

Remarks

You can create inline XAML content that is contained within an HTML document element by enclosing the content within a SCRIPT tag. The XAML content must be uniquely identified, so it can be referenced by the SourceElement property of the WPF/E control. The XAML content can also define events that reference event handlers in the HTML page. The following HTML example shows how to create and reference 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="aghost.js"></script>
  <!-- Define Loaded event handler for TextBlock. -->
  <script type="text/javascript">
    function setDate(sender)
    {
      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">
    <TextBlock Canvas.Left="20" FontSize="24" Loaded="javascript:setDate" />
  </Canvas>
</script>
<div id="controlHost">
  <script type="text/javascript">
    new agHost(
               "controlHost",    // DIV tag id.
               "myControl",      // WPF/E control id.
               "360",            // Width of rectangular region of WPF/E control in pixels.
               "60",             // Height of rectangular region of WPF/E control in pixels.
               "Wheat",          // Background color of rectangular region of WPF/E control.
               "xamlContent");   // SourceElement property value.
                                 // All other property values are set to their default values.
  </script>
</div>
</body>
</html>

Notice that only the first six parameters of the agHost constructor are defined. The remaining four parameter values for the Source, WindowlessMode, MaxFrameRate, and OnError properties are set to their default values.

When the page in the previous HTML example displays, the WPF/E control is loaded, and the Loaded event for the TextBlock is fired, causing the TextBlock to display the current date and time.

Display output for inline XAML content example

Order of Precedence in Loading XAML Content

You can load XAML content into a WPF/E control using three different properties: Source, SourceElement, and SourceString. The WPF/E control establishes the order of precedence for each property definition to determine what XAML content should be loaded. The SourceString property takes the highest precedence, followed by the Source property, and then the SourceElement property. For example, if the Source property is defined, then the SourceElement property value is ignored.

Applies To

WPF/E Control

See Also

Using a WPF/E Control, Source, SourceString