<html dir="ltr" xmlns:mshelp="http://msdn.microsoft.com/mshelp"
xmlns:silverlightsdk="http://msdn.microsoft.com/silverlight" xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="online documentation, web online help, web help, chm2web" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="chm2web Standard 2.7 (unicode)" />
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<title>Source Property (Silverlight Plugin)</title>
<link rel="stylesheet" href="../../default.css" type="text/css" />
<script type="text/JavaScript" src="../../files/supply.js"></script>
<script type="text/JavaScript">
chmtop.c2wtopf.pageid = "reference/p_silverlightcontrol_source.htm";
</script>
</head>
<body topmargin="0"><script type="text/JavaScript">
if (window.name != "content")
document.write(" <table width=\"100%\" bgcolor=\"#e1e1e1\"cellspacing=\"2\" cellpadding=\"0\" style=\"border-collapse: collapse; font-family: sans-serif; font-size: 14px; color: #000000; text-decoration: none; \"> <tr> <td align=\"center\" style=\"border-bottom: 2px solid gray\" > <br> Click <a href=\"../../index.html?page=source%2freference%2fp_silverlightcontrol_source.htm\">here</a> to show toolbars of the Web Online Help System: <a href=\"../../index.html?page=source%2freference%2fp_silverlightcontrol_source.htm\">show toolbars</a><br> </td></tr></table><br> ");
</script>
<!-- !chm2web! -->
<span id="sdkbannersection"></span>
<div class="tableSection"><span id="sdkbannersection"></span>
<table class="buttonbarshade" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
</div>
<div class="tableSection"><span id="sdkbannersection"></span>
<table class="buttonbartable" cellspacing="0">
<tr id="hdr">
<td class="runninghead" nowrap="nowrap"><img src=
"../common/logo.png" height="21" alt="Silverlight SDK" />
</td>
</tr>
</table>
</div>
<p><span class="betaboilerplate"><font color="gray" pointsize="8.5"
face="Verdana">[This topic is pre-release documentation and is
subject to change in future releases. Blank topics are included as
placeholders.]</font></span>
</p>
<h1><a name=
"silverlight_silverlightcontrol_source_property"></a>Source
Property (Silverlight Plugin)</h1>
<div id="mainSection">
<div id="mainBody">
<p>Specifies the XAML content to render.</p>
<div id="syntaxblock">
<table class="auto_syntaxtable" id="syntaxtable" style=
"width: 90%; background: #CCCCCC; border: none;">
<tr id="scriptingSyntaxBlock">
<th class="syntaxblocklanguage" nowrap="nowrap" style=
"width: 150px; background: #EEEEEE; vertical-align: top;">Scripting
(Instantiation)</th>
<td class="syntaxblockcode" style="background:white;">
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;"><a href=
"../conceptual/using_helper_files.htm">Silverlight.CreateObject</a>('<i>sourceReference</i>')</div>
<p>-or-</p>
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;"><a href=
"../conceptual/using_helper_files.htm">Silverlight.CreateObjectEx</a>({source:'<i>sourceReference</i>'})</div>
</td>
</tr>
<tr id="scriptingSyntaxBlock">
<th class="syntaxblocklanguage" nowrap="nowrap" style=
"width: 150px; background: #EEEEEE; vertical-align: top;">Scripting
(Runtime)</th>
<td class="syntaxblockcode" style="background:white;">
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;">
<i>sourceReference</i> =
<i>silverlightObject</i>.<b>source</b><br />
<i>silverlightObject</i>.<b>source</b> =
<i>[#]sourceReference</i></div>
</td>
</tr>
</table>
</div>
<h4>Property Value</h4>
<p><i>sourceReference</i>
</p>
<p>Loads the contents of a XAML file or XAML scripting tag into the
Silverlight plugin.</p>
<p>This property is read/write. The default value is null.</p>
<h4>Remarks</h4>
<p>For more information on using JavaScript helper files for
initializing and creating Silverlight plugins on a Web page, see
<a href="../conceptual/using_helper_files.htm">Using
CreateSilverlight.js and Silverlight.js</a>.</p>
<p>The following JavaScript example of a modified
CreateSilverlight.js file shows how to load a XAML file by setting
the <b>source</b> initialization parameter to the name of the XAML
file, "HelloWorld.xaml":</p>
<div>
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 95%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">JavaScript</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
function createSilverlight()
{
Sys.Silverlight.createObject(
"HelloWorld.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"myControl", // Unique plugin id value.
{ // Plugin properties.
width:'1024', // Width of rectangular region of plugin in pixels.
height:'530', // Height of rectangular region of plugin in pixels.
inplaceInstallPrompt:true, // Determines whether to display install prompt if invalid version detected.
background:'OldLace', // Background color of plugin.
isWindowless:'true', // Determines whether to display plugin in Windowless mode.
framerate:'30', // MaxFrameRate property value.
version:'0.9' // Plugin version to use.
},
{
onError:null, // OnError property value -- event handler function name.
onLoad:onLoad // OnLoad property value -- event handler function name.
},
null); // Context value -- event handler function name.
}
</pre>
</td>
</tr>
</table>
</div>
<br />
<p>Notice that when the <b>Source</b> property or <b>source</b>
parameter value refers to a file reference, it is set to the
directory location of the XAML file relative to the HTML file.</p>
<p>The following XAML example shows the XAML content that
corresponds to the file referenced by the <b>Source</b> property
value in the previous HTML example.</p>
<div class="snippetdistributor_codesnippet" id=
"using_controls_snip#UsingControlsLoadingXaml">
<div style="width: 99%;">
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 99%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">XAML</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
<!-- HelloWorld.xaml -->
<Canvas
xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock
Foreground="Maroon" FontFamily="Verdana" FontSize="24" FontWeight="Bold"
Text="Hello, world" />
</Canvas>
</pre>
</td>
</tr>
</table>
</div>
</div>
<h4><a name="#Creating_Inline_XAML">Creating and Referencing Inline
XAML</a>
</h4>
<p>You can create inline XAML content that is contained within an
HTML document element by using a script tag that specifies
"text/xaml" as the type attribute. Notice that the XML document
type declaration, <font face="Courier New"><?xml
version="1.0"?></font>, precedes the XAML content. The XAML
content must be uniquely identified, so it can be referenced by the
<b>source</b> initialization parameter of the Silverlight plugin.
The prefix '#' is used to identify a <b>source</b> parameter value
that references XAML content by its scripting tag identifier.</p>
<p>The XAML content can also define events that reference event
handlers in 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:</p>
<div class="snippetdistributor_codesnippet" id=
"inline_xaml_snip#LoadingInlineXaml">
<div style="width: 99%;">
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 99%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">HTML</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
<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="http://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>
</pre>
</td>
</tr>
</table>
</div>
</div>
<p class="note"><b>Note:</b> The script tag containing
the inline XAML content must precede the HTML element that contains
the Silverlight plugin.</p>
<p>The following JavaScript example shows how to reference the
inline XAML content in the user-defined <b>CreateSilverlightEx</b>
method in CreateSilverlight.js. In this case, parameter values that
are null or not defined are set to their default values.</p>
<div class="snippetdistributor_codesnippet" id=
"inline_xaml_snip#ReferencingInlineXaml">
<div style="width: 99%;">
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 99%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">JavaScript</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
function createSilverlightEx()
{
Sys.Silverlight.createObjectEx({
source: '#xamlContent', // Source property value.
parentElement:parentElement, // DOM reference to hosting DIV tag.
id:'myControl', // Unique plugin id value.
properties:{ // Plugin properties.
width:'360', // Width of rectangular region of plugin in pixels.
height:'60', // Height of rectangular region of plugin in pixels.
background:'oldlace', // Background color of plugin.
version:'0.9'}, // Plugin version.
events:{
onLoad:null}}); // OnLoad property value -- event handler function name.
}
</pre>
</td>
</tr>
</table>
</div>
</div>
<br />
<p>When the page in the previous HTML example displays, the
Silverlight plugin is loaded, and the <a href=
"e_uielement_loaded.htm">Loaded</a> event for the <a href=
"o_textblock.htm">TextBlock</a> object is fired, causing the
<b>TextBlock</b> to display the current date and time.</p>
<p><img border="0" src="../conceptual/images/inlinexaml.png" width=
"386" height="97" />
</p>
<p><b>Display output for inline XAML content example</b>
</p>
<h4><a name="#Loading_XAML_at_Run_Time">Loading XAML Using the
Source Property at Run Time</a>
</h4>
<p>You can also use the <a href=
"p_silverlightcontrol_source.htm">Source</a> property to load XAML
content after the Silverlight plugin has been created. When you
reload XAML content, the existing XAML content is the plugin is no
longer valid. The following JavaScript example shows an event
handler function that reloads the XAML content.</p>
<div class="snippetdistributor_codesnippet">
<div style="width: 99%;">
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 99%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">JavaScript</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
// Event handling function for reloading the XAML content on the page.
function reloadContent(plugin)
{
// Define the XAML content.
plugin.source = "HelloWorld.xaml";
}
</pre>
</td>
</tr>
</table>
</div>
</div>
<p class="note"><b>Note:</b> The XAML content renders
immediately when setting the <b>Source</b> property.</p>
<h4>Applies To</h4>
<p><a href="o_silverlightcontrol.htm">Silverlight Plugin</a>
</p>
<h4>See Also</h4>
<p><a href="../conceptual/silverlight_controls.htm">Using a
Silverlight Plugin</a>, <a href=
"../conceptual/using_helper_files.htm">Using CreateSilverlight.js
and Silverlight.js</a></p>
</div>
</div>
<script type="text/JavaScript">
var fe = FindFrame("toc", top);
if ((fe != null) && (chmtop.c2wtopf.jstree != null)) {
if (chmtop.c2wtopf.FITEMS[chmtop.c2wtopf.pagenum] != chmtop.c2wtopf.pageid)
chmtop.c2wtopf.jstree.OpenTreeNode("source/" + chmtop.c2wtopf.pageid);
}
</script>
<!-- CHM2WEB -->
<!-- DO NOT DELETE OR MODIFY THIS CODE WITHOUT
WRITTEN PERMISSION OF A!K RESEARCH LABS -->
<table width="100%" cellspacing="0" cellpadding="0"
style="margin-top: 0pt; border-collapse: collapse;">
<tr> <td align="right" style="background-color:white; border-top: 1px solid gray;">
<a href="http://chm2web.aklabs.com" target="_blank" style="font-family: sans-serif; font-size: 11px; text-decoration: none;"><font color="gray">Converted from CHM to HTML with <b>chm2web Standard 2.7 (unicode)</b></font></a>
</td></tr></table>
<!-- /CHM2WEB -->
</body>
</html>