Click here to Skip to main content
15,881,173 members
Articles / Desktop Programming / XAML

Silverlight 1.0 Full JavaScript Intellisense

Rate me:
Please Sign up or sign in to vote.
3.81/5 (16 votes)
21 Dec 2007Ms-PL11 min read 31.9K   141   17  
An article about Silverlight 1.0 full JavaScript Intellisense
<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>MarkerReached Event</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/e_mediaelement_markerreached.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>&nbsp;Click <a href=\"../../index.html?page=source%2freference%2fe_mediaelement_markerreached.htm\">here</a> to show toolbars of the Web Online Help System: <a href=\"../../index.html?page=source%2freference%2fe_mediaelement_markerreached.htm\">show toolbars</a><br>&nbsp;</td></tr></table><br> "); 
</script>
<!-- !chm2web! -->

<span id="sdkbannersection"></span>
<div class="tableSection"><span id="sdkbannersection"></span>
<table class="buttonbarshade" cellspacing="0">
<tr>
<td>&nbsp;</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_mediaelement_markerreached_event"></a>MarkerReached
Event</h1>

<div id="mainSection">
<div id="mainBody">
<p>Occurs when a timeline marker is encountered during media
playback.</p>

<div id="syntaxblock">
<table class="auto_syntaxtable" id="syntaxtable" style=
"width: 90%; background: #CCCCCC; border: none;">
<tr id="xamlSyntaxBlock">
<th class="syntaxblocklanguage" nowrap="nowrap" style=
"width: 150px; background: #EEEEEE; vertical-align: top;">XAML</th>
<td class="syntaxblockcode" style="background:white;">
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;">
&lt;<i>object</i>&nbsp;<b>MarkerReached</b>="<i>eventhandlerFunction</i>"
.../&gt;</div>
</td>
</tr>

<tr id="scriptingSyntaxBlock">
<th class="syntaxblocklanguage" nowrap="nowrap" style=
"width: 150px; background: #EEEEEE; vertical-align: top;">
Scripting</th>
<td class="syntaxblockcode" style="background:white;">
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;">[<i>token</i> =
]<i>object</i>.<b>addEventListener("markerReached"</b>,
<i>eventhandlerFunction</i>)</div>
</td>
</tr>
</table>
</div>

<div id="parametersection">
<h4>addEventListener Parameters</h4>

<div class="tableSection">
<table class="parametertable" id="table1">
<tr>
<td class="parametername"><i>token</i>
</td>
<td class="parameterdesc"><b>Integer</b>
<p>A token that is returned from the function, which you can
optionally retain as a variable. If you intend to call <a href=
"m_uielement_removeeventlistener.htm">RemoveEventListener</a> to
remove the handler, you will need this token.</p>
</td>
</tr>

<tr>
<td class="parametername"><i>eventhandlerFunction</i>
</td>
<td class="parameterdesc"><b>Object</b>
<p>The name of your event handler function as it is defined in
script. When used as an <i>addEventListener</i> parameter, quotes
around the function name are not required. See Remarks.</p>
</td>
</tr>
</table>
</div>

<h4>Event Handler Parameters</h4>

<div class="tableSection">
<table class="parametertable" id="table1">
<tr>
<td class="parametername"><i>sender</i>
</td>
<td class="parameterdesc"><b>Object</b>
<p>The <a href="o_mediaelement.htm">MediaElement</a> that invoked
the event.</p>
</td>
</tr>

<tr>
<td class="parametername"><i>markerEventArgs</i>
</td>
<td class="parameterdesc"><b>Object</b>
<p><i>markerEventArgs</i>.<b>Marker</b> gets the <a href=
"o_timelinemarker.htm">TimelineMarker</a> that triggered this
event.</p>
</td>
</tr>
</table>
</div>
</div>
<span id="remarkssection"></span>
<h4><span id="remarkssection">Remarks</span>
</h4>

<p>You can also add handlers in script using a quoted string for
the event handler name:</p>

<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;">
object.addEventListener("markerReached",
"eventhandlerFunction")</div>
This syntax also returns a token; however, the token is not an
absolute requirement for removing the handler, in cases where the
handler was added by using a quoted string. For details, see
<a href=
"m_uielement_removeeventlistener.htm">RemoveEventListener</a>.

<p>This event is not raised when the <b>MediaElement</b> seeks past
a timeline marker.</p>

<p>This event is raised by markers specified within an ASX
file.</p>

<p>The following example creates a <b>MediaElement</b> object and
responds to its <b>MarkerReached</b> event. Each time a timeline
marker is reached, the example displays the timeline marker's
<a href="p_timelinemarker_time.htm">Time</a>, <a href=
"p_timelinemarker_type.htm">Type</a>, and <a href=
"p_timelinemarker_text.htm">Text</a> values.</p>

<div class="snippetdistributor_codesnippet" id=
"media_overview_snip#MediaMarkersSimpleWholePage">
<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;">

&lt;Canvas 
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="300" Height="300"&gt;
    
  &lt;MediaElement x:Name="media" 
    Canvas.Top="50"
    MediaOpened="onMediaOpened"
    MarkerReached="onMarkerReached" Source="thebutterflyandthebear.wmv"
    Width="300" Height="200" /&gt;
    
  
  &lt;Canvas Canvas.Left="10" Canvas.Top="5"&gt;


    &lt;TextBlock 
      FontSize="12" Foreground="DarkGray"&gt;Time:&lt;/TextBlock&gt;
      
    &lt;TextBlock x:Name="timeTextBlock"
      Canvas.Left="40"
      FontSize="12" /&gt;

    &lt;TextBlock Canvas.Top="12"
      FontSize="12" Foreground="DarkGray"&gt;Type:&lt;/TextBlock&gt;
      
    &lt;TextBlock x:Name="typeTextBlock"
      Canvas.Left="40" Canvas.Top="12"
      FontSize="12" /&gt;

    &lt;TextBlock 
      Canvas.Top="24"
      FontSize="12" Foreground="DarkGray"&gt;Value:&lt;/TextBlock&gt;      
    
    &lt;TextBlock x:Name="valueTextBlock"
      Canvas.Left="40" Canvas.Top="24"
      FontSize="12" /&gt;

  
  &lt;/Canvas&gt;

  &lt;!-- Stops media playback.--&gt;    
  &lt;Canvas MouseLeftButtonDown="media_stop" 
    Canvas.Left="10" Canvas.Top="265"&gt;
    &lt;Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5"&gt;
      &lt;Rectangle.Fill&gt;
        &lt;RadialGradientBrush GradientOrigin="0.75,0.25"&gt;
          &lt;GradientStop Color="Orange" Offset="0.0" /&gt;
          &lt;GradientStop Color="Red" Offset="1.0" /&gt;        
        &lt;/RadialGradientBrush&gt;
      &lt;/Rectangle.Fill&gt;       
    &lt;/Rectangle&gt;
    &lt;TextBlock Canvas.Left="5" Canvas.Top="5"&gt;stop&lt;/TextBlock&gt; 
  &lt;/Canvas&gt;
  
  &lt;!-- Pauses media playback. --&gt;
  &lt;Canvas MouseLeftButtonDown="media_pause" 
     Canvas.Left="70" Canvas.Top="265"&gt;
    &lt;Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5"&gt;
      &lt;Rectangle.Fill&gt;
        &lt;RadialGradientBrush GradientOrigin="0.75,0.25"&gt;
          &lt;GradientStop Color="Yellow" Offset="0.0" /&gt;
          &lt;GradientStop Color="Orange" Offset="1.0" /&gt;        
        &lt;/RadialGradientBrush&gt;
      &lt;/Rectangle.Fill&gt;       
    &lt;/Rectangle&gt;
    &lt;TextBlock Canvas.Left="5" Canvas.Top="5"&gt;pause&lt;/TextBlock&gt; 
  &lt;/Canvas&gt;
  
  &lt;!-- Begins media playback. --&gt;
  &lt;Canvas MouseLeftButtonDown="media_begin" 
    Canvas.Left="130" Canvas.Top="265"&gt;
    &lt;Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="30" Width="55"&gt;
      &lt;Rectangle.Fill&gt;
        &lt;RadialGradientBrush GradientOrigin="0.75,0.25"&gt;
          &lt;GradientStop Color="LimeGreen" Offset="0.0" /&gt;
          &lt;GradientStop Color="Green" Offset="1.0" /&gt;        
        &lt;/RadialGradientBrush&gt;
      &lt;/Rectangle.Fill&gt;
    &lt;/Rectangle&gt;
    &lt;TextBlock Canvas.Left="5" Canvas.Top="5"&gt;play&lt;/TextBlock&gt; 
  &lt;/Canvas&gt;
     
&lt;/Canvas&gt;

</pre>
</td>
</tr>
</table>
</div>
</div>

<div class="snippetdistributor_codesnippet" id=
"media_overview_snip#MediaMarkersSimpleCodeBehindWholePage">
<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 media_stop(sender, args) {
    sender.findName("media").stop();
}

function media_pause(sender, args) {
    sender.findName("media").pause();
    alert(sender.findName("media").name);
}

function media_begin(sender, args) {
    sender.findName("media").play();
    
}


function onMarkerReached(sender, markerEventArgs)
{

  sender.findName("timeTextBlock").Text =
        markerEventArgs.marker.time.seconds.toString(); 
        
  sender.findName("typeTextBlock").Text = 
       markerEventArgs.marker.type;     
        
  sender.findName("valueTextBlock").Text = 
       markerEventArgs.marker.text;
  
}

</pre>
</td>
</tr>
</table>
</div>
</div>
<span id="appliestosection"></span>
<h4><span id="appliestosection">Applies To</span>
</h4>

<p><a href="o_mediaelement.htm">MediaElement</a>
</p>
<span id="seealsosection"></span>
<h4><span id="seealsosection">See Also</span>
</h4>

<p><a href="../conceptual/silverlight_events.htm">Silverlight
Events</a>, <span id="seealsosection0"><a href=
"o_timelinemarker.htm"><span class=
"style1">TimelineMarker</span></a>,</span> <a href=
"../conceptual/c_silverlight_media_overview.htm">Media
Overview</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>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
JustinAngel.Net, Senior .Net consultant
Israel Israel
Justin-Josef Angel is a C# Microsoft Most Valuable professional, a Senior .Net consultant in Israel with 4 years of .Net experience and has 8 years of Web experience.

Justin's been working this past year on two Enterprise sized Silverlight projects with his customers. During that time he's gained a real-insight into Silverlight's inner workings and how to integrate Silverlight into the real world of software development. Additionally, During that time he's developed a few well-known projects like the "Silverlight 1.0 Javascript Intellisense", "Silverlight 1.1 Hebrew & Arabic Languages support" and a few others you might know.

Justin is also a seasoned presenter with an impressive track-record of talking in front of thousands of people in Israel.

Justin owns the first .Net blog written in Hebrew - http://www.JustinAngel.Net .
And he also owns an additional blog with mixed Hebrew & English content - http://blogs.Microsoft.co.il/blogs/JustinAngel.

A full list of his articles (all 100+ of them) can be found at: http://www.JustinAngel.Net/#index




Comments and Discussions