Kevin Williams .NET and Stuff : Silverlighthttp://www.dotnetmafia.com/blogs/kevin/archive/tags/Silverlight/default.aspxTags: SilverlightenCommunityServer 2007.1 (Build: 20917.1142)Streaming Video - Silverlight, Sitecore, and Windows Media Serviceshttp://www.dotnetmafia.com/blogs/kevin/archive/2010/03/04/streaming-video-silverlight-sitecore-and-windows-media-services.aspxThu, 04 Mar 2010 23:51:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:2912Kevin0<p>For quite a while now, I’ve been wanting a simple video streaming solution that I could recommend to clients for whom progressive video downloads won’t cut it and who don’t want to pay to use a CDN like Edgecast or UVault or Limelight. Clients who don’t need to serve a ton of video on their site, and would be able to host it themselves if it were easy and integrated with their WebCMS.</p><p>I’ve started working on just such a solution. Right now, I’m using <a href="http://www.microsoft.com/windows/windowsmedia/forpros/serve/prodinfo2008.aspx">Windows Media Services 2008</a> (an optional component of Windows 2008 Server - Standard and Enterprise editions) to host and stream the videos, Sitecore to manage uploading and publishing of new videos and related content, and a Silverlight video player I found called <a href="http://www.silverlight-blog.it/ontheroad/videoplayer/">Minoplayer</a>. This requires that videos be encoded to WMV format, but I’m already thinking about ways to support Flash video for people who don’t want to use Silverlight (lighttpd’s mod_flv_streaming module looks promising). And of course, HTML5’s &lt;video&gt; element looks interesting too (although codec support problems may make it more difficult to implement).</p><p>You can see an early example of the end result of my work here - <a href="http://www.kevinwilliams.name:8001/Kologarn.aspx">http://www.kevinwilliams.name:8001/Kologarn.aspx</a></p><p>(be kind to my server - I’m asking a lot from it running Sitecore, SQL Server, Media Services, and a bunch of other stuff on crappy old hardware)</p><p>I will post details of my Media Services installation and configuration experience, some information about the Sitecore solution, etc in the next few days.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=2912" width="1" height="1">SitecoreSilverlightWindows Media ServicesUsing WebService Data With Silverlighthttp://www.dotnetmafia.com/blogs/kevin/archive/2008/03/23/using-webservice-data-with-silverlight.aspxMon, 24 Mar 2008 04:58:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:541Kevin0<p>Now, I want to do something a bit more dynamic.&nbsp; How about we call a web service, get some dynamic data back, and render something based on that data?&nbsp; In this post, I will build a simple example in order to clearly illustrate the concepts.&nbsp; But at the end, I will post an example of something a bit more useful to show what can be done!</p>
<p>First off, let&#39;s define a simple web service.&nbsp; I used VS2008&#39;s New Item wizard and selected &quot;Web Service&quot; from the dialog.&nbsp; Then, I replaced HelloWorld() with my own GetData() method.&nbsp; Here&#39;s what the code behind for MyService.asmx looks like:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;">[<span style="COLOR:#2b91af;">WebService</span>(Namespace = <span style="COLOR:#a31515;">&quot;http://tempuri.org/&quot;</span>)]</p>
<p style="MARGIN:0px;">[<span style="COLOR:#2b91af;">WebServiceBinding</span>(ConformsTo = <span style="COLOR:#2b91af;">WsiProfiles</span>.BasicProfile1_1)]</p>
<p style="MARGIN:0px;">[<span style="COLOR:#2b91af;">ToolboxItem</span>(<span style="COLOR:blue;">false</span>)]</p>
<p style="MARGIN:0px;"><span style="COLOR:green;">// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. </span></p>
<p style="MARGIN:0px;">[System.Web.Script.Services.<span style="COLOR:#2b91af;">ScriptService</span>]</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">public</span> <span style="COLOR:blue;">class</span> <span style="COLOR:#2b91af;">MyService</span> : System.Web.Services.<span style="COLOR:#2b91af;">WebService</span></p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; [<span style="COLOR:#2b91af;">WebMethod</span>]</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; [<span style="COLOR:#2b91af;">ScriptMethod</span>]</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">public</span> <span style="COLOR:blue;">string</span>[] GetData()</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; {</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">string</span>[] data = <span style="COLOR:blue;">new</span>[] { <span style="COLOR:#a31515;">&quot;first data&quot;</span>, <span style="COLOR:#a31515;">&quot;second data&quot;</span>, <span style="COLOR:#a31515;">&quot;third data&quot;</span> };</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">return</span> data;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; }</p>
<p style="MARGIN:0px;">}</p></div>
<p>Note I also have uncommented the ScriptService attribute on my class and added a ScriptMethod attribute to my method.&nbsp; Calling web services from Javascript is a whole lot easier using ASP.NET AJAX.&nbsp; You&#39;ll need to have the <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&amp;displaylang=en" target="_blank">ASP.NET AJAX 1.0 Extensions</a> installed for this to work, but it&#39;s worth it.&nbsp; Oh, I&#39;m also using the new array initialization syntax from C# 3.0 in case you&#39;ve never seen it before.&nbsp; A real world application would probably query a database or something.</p>
<p>In order to call the web service from Javascript, ASP.NET AJAX requires us to place a ScriptManager on the page with a ServiceReference pointing to the .asmx.&nbsp; Here&#39;s what mine looks like:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">asp</span><span style="COLOR:blue;">:</span><span style="COLOR:#a31515;">ScriptManager</span> <span style="COLOR:red;">ID</span><span style="COLOR:blue;">=&quot;ScriptManager1&quot;</span> <span style="COLOR:red;">runat</span><span style="COLOR:blue;">=&quot;server&quot;&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Services</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">asp</span><span style="COLOR:blue;">:</span><span style="COLOR:#a31515;">ServiceReference</span> <span style="COLOR:red;">Path</span><span style="COLOR:blue;">=&quot;~/MyService.asmx&quot;</span> <span style="COLOR:blue;">/&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Services</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">asp</span><span style="COLOR:blue;">:</span><span style="COLOR:#a31515;">ScriptManager</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>Thankfully, VS2008&#39;s web application project template already set up my web.config to use ASP.NET AJAX.&nbsp; If you are not using VS2008, you may need to follow the directions at <a href="http://asp.net/AJAX/Documentation/Live/ConfiguringASPNETAJAX.aspx" target="_blank">http://asp.net/AJAX/Documentation/Live/ConfiguringASPNETAJAX.aspx</a> to ensure your web.config is set up properly.</p>
<p>At this point, I can call my web service from Javascript and react to whatever data comes back.&nbsp; The question is - what should it do?&nbsp; For this post, I think I&#39;ll just put up a Silverlight TextBlock and rotate through the web service data when the user clicks on the text.&nbsp; Here&#39;s the XAML:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Canvas</span><span style="COLOR:red;"> xmlns</span><span style="COLOR:blue;">=&quot;http://schemas.microsoft.com/client/2007&quot;</span><span style="COLOR:red;"> xmlns</span><span style="COLOR:blue;">:</span><span style="COLOR:red;">x</span><span style="COLOR:blue;">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">TextBlock</span><span style="COLOR:red;"> x</span><span style="COLOR:blue;">:</span><span style="COLOR:red;">Name</span><span style="COLOR:blue;">=&quot;MyTextBlock&quot;</span><span style="COLOR:red;"> FontSize</span><span style="COLOR:blue;">=&quot;10&quot;</span><span style="COLOR:red;"> FontFamily</span><span style="COLOR:blue;">=&quot;Arial&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;10&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;10&quot;</span><span style="COLOR:red;"> Loaded</span><span style="COLOR:blue;">=&quot;MyTextBlockLoaded&quot;</span><span style="COLOR:red;"> MouseLeftButtonDown</span><span style="COLOR:blue;">=&quot;MyTextBlockClick&quot; /&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Canvas</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>First, I will retrieve the data from the web service once the text block has loaded by using the Loaded event.&nbsp; Let me show you the Javascript and then I will explain it...</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">var</span> index;</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">var</span> data;</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">function</span> MyTextBlockLoaded( sender, args )</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; MyService.GetData( GetDataSuccess, GetDataFailed );</p>
<p style="MARGIN:0px;">}</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">function</span> GetDataSuccess( result )</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; data = result;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; index = 0;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; UpdateTextBlock();</p>
<p style="MARGIN:0px;">}</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">function</span> GetDataFailed()</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; alert( <span style="COLOR:#a31515;">&#39;Call to MyService.GetData() failed!&#39;</span> );</p>
<p style="MARGIN:0px;">}</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">function</span> UpdateTextBlock()</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">var</span> textblock = document.getElementById( <span style="COLOR:#a31515;">&#39;&lt;%= Silverlight1.ControlId %&gt;&#39;</span> ).content.findName( <span style="COLOR:#a31515;">&#39;MyTextBlock&#39;</span> );</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; textblock.Text = data[index];</p>
<p style="MARGIN:0px;">}</p></div>
<p>First I declare a variable to hold the current index into the data array and a variable to hold the data itself.&nbsp; The implementation of the MyTextBlockLoaded() event handler is calling the web service using the proxy built by ASP.NET AJAX.&nbsp; Note that because this is an asynchronous call, you have to pass in event handlers for both success and failure - that is where my GetDataSuccess() and GetDataFailed() functions come from.&nbsp; On success, I store the data, set the initial index to 0, and call the function to set the text in the TextBlock.&nbsp; Note I&#39;m using document.getElementById() to find the Silverlight viewer.&nbsp; I&#39;m using some inline server-side script to get the Id of the Silverlight viewer from my control (covered in a previous post) to pass to getElementById().&nbsp; The viewer object has a content property upon which I can call findName() (also covered in a previous blog post) to get a reference to the TextBlock.</p>
<p>The last thing to do is handle the MouseLeftButtonDown event on the TextBlock so that the text changes when the user clicks on it.&nbsp; Here&#39;s that Javascript function:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">function</span> MyTextBlockClick( sender, args )</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">if</span> ( index &gt;= data.length-1 )</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; {</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; index = 0;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; }</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">else</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; {</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; index = index + 1;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; }</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; UpdateTextBlock();</p>
<p style="MARGIN:0px;">}</p></div>
<p>Here, I increment the index and when the index reaches the end of the list, I reset it to 0 to go back to the beginning.&nbsp; Then I call UpdateTextBlock() to display the new text.</p>
<p>You can see this example in action at <a href="http://www.killeverything.com/zak/Silverlight1/WebService1.aspx" target="_blank">http://www.killeverything.com/zak/Silverlight1/WebService1.aspx</a>.</p>
<p>At the beginning of this post, I promised to show a more useful example.&nbsp; How about a Silverlight app that displays headlines from an RSS feed and lets you click through to the articles?&nbsp; If you&#39;ve been reading my Silverlight posts, there shouldn&#39;t be anything too new going on here.&nbsp; I have just combined several of the concepts I&#39;ve been learning and blogging about into a single Silverlight app.&nbsp; You can see it running here: <a href="http://www.killeverything.com/zak/Silverlight1/WebService2.aspx" target="_blank">http://www.killeverything.com/zak/Silverlight1/WebService2.aspx</a> and the code for both the simple example and the RSS headline viewer are attached to this post.&nbsp; If you&#39;re a .NET head, you might want to look at the source for the web service where I used LINQ to XML to make parsing the RSS feed easy as cake.&nbsp; Oh, and I want to point out the clipping I had to add to the TextBlock.&nbsp; Support for MaxHeight and MaxWidth may be coming in Silverlight 2.0, but clipping is how it&#39;s done for now...</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=541" width="1" height="1">SilverlightASP.NETWeb ServicesLINQ to XMLMy Silverlight Controlhttp://www.dotnetmafia.com/blogs/kevin/archive/2008/03/23/my-silverlight-control.aspxSun, 23 Mar 2008 17:00:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:540Kevin0<p>Putting a Silverlight viewer on a web page is a lot of work.&nbsp; You have to import the Silverlight.js file (and make sure it&#39;s deployed to the web server), create a div to contain the viewer, and write some Javascript code to call Silverlight.createObject().&nbsp; To me, this is just begging for an ASP.NET control - so I whipped up one of my own.</p>
<p>So what do I want my control to do for me?&nbsp; Let&#39;s start at the top with the Silverlight.js file.&nbsp; I want this to be an embedded resource so that I don&#39;t always have to remember to copy it in to a new project.&nbsp; If you&#39;re not familiar with this technique, it&#39;s been around since .NET 2.0 - keep up! :)&nbsp; You just throw the Silverlight.js file into your project and set it&#39;s build action to &quot;Embedded Resource&quot;.&nbsp; Here&#39;s a screenshot:</p>
<p><a href="http://www.killeverything.com/zak/blogimages/MySilverlightControl_A8A6/image.png"><img style="BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px;" height="225" alt="image" src="http://www.killeverything.com/zak/blogimages/MySilverlightControl_A8A6/image_thumb.png" width="244" border="0" /></a> </p>
<p>Add it to your project&#39;s AssemblyInfo.cs like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:green;">// Embeded Resources</span></p>
<p style="MARGIN:0px;">[<span style="COLOR:blue;">assembly</span>: System.Web.UI.<span style="COLOR:#2b91af;">WebResource</span>(<span style="COLOR:#a31515;">&quot;knw.Silverlight.Silverlight.js&quot;</span>, <span style="COLOR:#a31515;">&quot;application/x-javascript&quot;</span>)]</p></div>
<p>Then my control&#39;s code tells the page where to find it like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;">Page.ClientScript.RegisterClientScriptInclude(<span style="COLOR:#a31515;">&quot;Silverlight.js&quot;</span>, Page.ClientScript.GetWebResourceUrl(<span style="COLOR:blue;">this</span>.GetType(), <span style="COLOR:#a31515;">&quot;knw.Silverlight.Silverlight.js&quot;</span>));</p></div>
<p><a href="http://www.codeproject.com/KB/aspnet/MyWebResourceProj.aspx" target="_blank">Here</a> is a link to an article on Code Project that explains the technique in a bit more detail.</p>
<p>Next, I want my control to render the container div for the Silverlight viewer.&nbsp; This is pretty straightforward - I just override Render() and use the HtmlTextWriter that&#39;s passed in.&nbsp; Here&#39;s what it looks like:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">protected</span> <span style="COLOR:blue;">override</span> <span style="COLOR:blue;">void</span> Render(<span style="COLOR:#2b91af;">HtmlTextWriter</span> writer)</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">base</span>.Render(writer);</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; writer.AddAttribute(<span style="COLOR:#a31515;">&quot;id&quot;</span>, ID + <span style="COLOR:#a31515;">&quot;Div&quot;</span>);</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; writer.RenderBeginTag(<span style="COLOR:#2b91af;">HtmlTextWriterTag</span>.Div);</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; writer.RenderEndTag();</p>
<p style="MARGIN:0px;">}</p></div>
<p>Note I&#39;m just concatenating &quot;Div&quot; onto the existing ID of my control when building the div&#39;s id, but that should make it unique.</p>
<p>The only thing that&#39;s left is the call to Silverlight.createObject().&nbsp; There are a few variables in this call that I thought could be exposed as properties of my control.&nbsp; Specifically, the path to the Xaml document, the height and width of the viewer, and the background color.&nbsp; I&#39;m using C# 3.0, so I took advantage of another language feature - automatic properties.&nbsp; Here&#39;s what that code looks like:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">public</span> <span style="COLOR:blue;">string</span> Xaml { <span style="COLOR:blue;">get</span>; <span style="COLOR:blue;">set</span>; }</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">public</span> <span style="COLOR:blue;">int</span> Height { <span style="COLOR:blue;">get</span>; <span style="COLOR:blue;">set</span>; }</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">public</span> <span style="COLOR:blue;">int</span> Width { <span style="COLOR:blue;">get</span>; <span style="COLOR:blue;">set</span>; }</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">public</span> <span style="COLOR:#2b91af;">Color</span> BackgroundColor { <span style="COLOR:blue;">get</span>; <span style="COLOR:blue;">set</span>; }</p></div>
<p>Lastly, I need to build the actual javascript to create the Silverlight viewer and register it with the page to run as a startup script.&nbsp; Like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">string</span> createObjectScript = <span style="COLOR:blue;">string</span>.Format(<span style="COLOR:#a31515;">&quot;&lt;script&gt;Silverlight.createObject( \&quot;{0}\&quot;, document.getElementById( \&quot;{1}Div\&quot; ), \&quot;{2}Ctrl\&quot;, {{ width:&#39;{3}&#39;, height:&#39;{4}&#39;, inplaceInstallPrompt:false,background:&#39;{5}&#39;, isWindowless:&#39;false&#39;, framerate:&#39;24&#39;, version:&#39;1.0&#39; }},{{ onError:null,onLoad:null }},null );&lt;/script&gt;&quot;</span>, Xaml, ID, ID, Width, Height, <span style="COLOR:#2b91af;">ColorTranslator</span>.ToHtml(BackgroundColor) );</p>
<p style="MARGIN:0px;">&nbsp;</p>
<p style="MARGIN:0px;">Page.ClientScript.RegisterStartupScript( <span style="COLOR:blue;">this</span>.GetType(), ID + <span style="COLOR:#a31515;">&quot;Create&quot;</span>, createObjectScript );</p></div>
<p>At first glance, that code looks pretty confusing.&nbsp; All it&#39;s actually doing is using string.Format() to build the call to Silverlight.createObject().&nbsp; {0} is the path to the Xaml, {1} is the ID of the control + &quot;Div&quot; (the id of container div), {2} is the ID of the control + &quot;Ctrl&quot; (a unique id for the viewer itself), {3} is the width, {4} is the height, and {5} is the background color (converted from a System.Drawing.Color using the System.Drawing.ColorTranslator class).&nbsp; Oh yeah, and you have to escape curly braces when using string.Format() by doubling them.</p>
<p>Ok, that was a lot of work - what has it bought me?&nbsp; Well, now when I want to use Silverlight on an .aspx page, all I have to do is add a reference to my DLL, register it at the top of the .aspx page, and put the control on the .aspx page somewhere.&nbsp; Which looks like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">knw</span><span style="COLOR:blue;">:</span><span style="COLOR:#a31515;">Silverlight</span> <span style="COLOR:red;">id</span><span style="COLOR:blue;">=&quot;Silverlight1&quot;</span> <span style="COLOR:red;">runat</span><span style="COLOR:blue;">=&quot;server&quot;</span> <span style="COLOR:red;">Xaml</span><span style="COLOR:blue;">=&quot;MySilverlight.xaml&quot;</span> <span style="COLOR:red;">BackgroundColor</span><span style="COLOR:blue;">=&quot;Gray&quot;</span> <span style="COLOR:red;">Height</span><span style="COLOR:blue;">=&quot;200&quot;</span> <span style="COLOR:red;">Width</span><span style="COLOR:blue;">=&quot;200&quot;</span> <span style="COLOR:blue;">/&gt;</span></p></div>
<p>I will attach the code for both the control and an example of using it to this post.&nbsp; I&#39;ll be using this control in future Silverlight posts here - plus, I do intend to extend it to do more in the future (as I learn more about Silverlight).&nbsp; So, I&#39;ll try to post updates here from time to time.&nbsp; I hope it&#39;s useful to someone! :)</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=540" width="1" height="1">SilverlightASP.NETSilverlight - Simple Animationhttp://www.dotnetmafia.com/blogs/kevin/archive/2008/03/23/silverlight-simple-animation.aspxSun, 23 Mar 2008 07:12:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:539Kevin0<p>Seems I&#39;ve fallen way behind on my Silverlight blogging as of late.&nbsp; A few weeks ago, I managed to get some simple animation working.&nbsp; So, I guess I should blog about it.</p>
<p>Animation is done by transforming your object.&nbsp; Each graphic element has a RenderTransform property to which you can assign a Transform object to modify your element in some way.&nbsp; The different types of Transform objects include RotateTransform, SkewTransform, ScaleTransform, and TranslateTransform.&nbsp; Let&#39;s look at an example.</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Ellipse</span><span style="COLOR:red;"> MouseLeftButtonDown</span><span style="COLOR:blue;">=&quot;EllipseClick&quot;</span><span style="COLOR:red;"> Height</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> Width</span><span style="COLOR:blue;">=&quot;100&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> Fill</span><span style="COLOR:blue;">=&quot;Black&quot;&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Ellipse.RenderTransform</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">RotateTransform</span><span style="COLOR:red;"> x</span><span style="COLOR:blue;">:</span><span style="COLOR:red;">Name</span><span style="COLOR:blue;">=&quot;EllipseXForm&quot;</span><span style="COLOR:red;"> Angle</span><span style="COLOR:blue;">=&quot;90&quot; /&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Ellipse.RenderTransform</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Ellipse</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>This example is pretty boring - it just renders a 50 pixel high and 100 pixel wide ellipse, rotated 90 degrees (so that it instead appears 100 pixels high and 50 pixels wide).&nbsp; However, it illustrates the effect that a RotateTransform will have on an object.&nbsp; Also note that I have named the transform (the x:Name attribute).&nbsp; The purpose of that will soon become apparent.</p>
<p>Animations are defined within objects called Storyboards.&nbsp; Basically, a Storyboard defines a timeline of changes that should occur to properties of objects.&nbsp; For my example, I want to change the Angle property of the RotateTransform object over time (so that the Ellipse rotates slowly as we watch).&nbsp; Here is the Storyboard I have defined:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Canvas.Resources</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Storyboard</span><span style="COLOR:red;"> x</span><span style="COLOR:blue;">:</span><span style="COLOR:red;">Name</span><span style="COLOR:blue;">=&quot;EllipseStoryboard&quot;&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">DoubleAnimation</span><span style="COLOR:red;"> Storyboard.TargetName</span><span style="COLOR:blue;">=&quot;EllipseXForm&quot;</span><span style="COLOR:red;"> Storyboard.TargetProperty</span><span style="COLOR:blue;">=&quot;Angle&quot;</span><span style="COLOR:red;"> To</span><span style="COLOR:blue;">=&quot;0&quot;</span><span style="COLOR:red;"> Duration</span><span style="COLOR:blue;">=&quot;00:00:05&quot; /&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Storyboard</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Canvas.Resources</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>For this example, I have used a DoubleAnimation.&nbsp; This is because the property I want to change (&quot;Angle&quot;) is of type double.&nbsp; There are many other animation objects available such as DecimalAnimation, Int32Animation, and ColorAnimation.&nbsp; The Storyboard.Targetname attribute tells the animation which object it is changing (here&#39;s where I use the name I gave my transform earlier) and Storyboard.TargetProperty indicates what property will be changed.&nbsp; The To attribute is the value the animation should end with and the Duration should be self-explanatory.&nbsp; Note again, I have named my Storyboard so that I can reference it later.&nbsp; Oh yeah, and the Storyboard is a resource, so it&#39;s defined inside the &lt;Canvas.Resources /&gt; element.</p>
<p>I&#39;m going to need something to trigger the animation to begin.&nbsp; I&#39;ve chosen to do it using a mouse click on the ellipse.&nbsp; So, I will need to add a MouseLeftButtonDown handler to the Ellipse.&nbsp; Now it looks like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Ellipse</span><span style="COLOR:red;"> MouseLeftButtonDown</span><span style="COLOR:blue;">=&quot;EllipseClick&quot;</span><span style="COLOR:red;"> Height</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> Width</span><span style="COLOR:blue;">=&quot;100&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> Fill</span><span style="COLOR:blue;">=&quot;Black&quot;&gt;...</span></p></div>
<p>And I need an EllipseClick() function defined in Javascript, so here&#39;s what I came up with:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">script</span> <span style="COLOR:red;">type</span><span style="COLOR:blue;">=&quot;text/javascript&quot;&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">function</span> EllipseClick( sender, args )</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; {</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sender.findName(<span style="COLOR:#a31515;">&quot;EllipseStoryboard&quot;</span>).Begin();</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; }</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">script</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>I placed this directly in my .aspx file for this example.&nbsp; I don&#39;t think I&#39;ve blogged about findName() before, but Silverlight elements define this method and it allows you to get a reference to any other Silverlight element by name.&nbsp; Here, I am using it to get the &quot;EllipseStoryboard&quot; Storyboard and executing it&#39;s Begin() method.</p>
<p>You can see this example in action at <a href="http://www.killeverything.com/zak/Silverlight1/EllipseRotate1.aspx" target="_blank">http://www.killeverything.com/zak/Silverlight1/EllipseRotate1.aspx</a></p>
<p>It&#39;s not quite what I wanted, though.&nbsp; The rotation is happening around the top left corner of the ellipse instead of the center.&nbsp; Luckily, this was easy to fix - the RotateTransform has CenterX and CenterY properties that allow you to define the point around which the object rotates.&nbsp; Knowing that the ellipse is 100 wide and 50 tall, this is what I changed the transform to look like:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">RotateTransform</span><span style="COLOR:red;"> x</span><span style="COLOR:blue;">:</span><span style="COLOR:red;">Name</span><span style="COLOR:blue;">=&quot;EllipseXForm&quot;</span><span style="COLOR:red;"> Angle</span><span style="COLOR:blue;">=&quot;90&quot;</span><span style="COLOR:red;"> CenterX</span><span style="COLOR:blue;">=&quot;50&quot;</span><span style="COLOR:red;"> CenterY</span><span style="COLOR:blue;">=&quot;25&quot; /&gt;</span></p></div>
<p>You can see the finished example at <a href="http://www.killeverything.com/zak/Silverlight1/EllipseRotate2.aspx" target="_blank">http://www.killeverything.com/zak/Silverlight1/EllipseRotate2.aspx</a></p>
<p>I&#39;ve also attached a ZIP with the files needed for these examples in case you want to play with them yourself.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=539" width="1" height="1">XAMLSilverlightSilverlight Day 2http://www.dotnetmafia.com/blogs/kevin/archive/2008/02/22/silverlight-day-2.aspxSat, 23 Feb 2008 02:53:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:515Kevin0http://www.dotnetmafia.com/blogs/kevin/rsscomments.aspx?PostID=515http://www.dotnetmafia.com/blogs/kevin/archive/2008/02/22/silverlight-day-2.aspx#comments<p>Today&#39;s goal is to display an image and react to a mouse click in some way.&nbsp; I actually started by reading the QuickStart that gets installed along with the Silverlight SDK.&nbsp; You can also find it at <a title="http://silverlight.net/quickstarts/silverlight10/default.aspx" href="http://silverlight.net/quickstarts/silverlight10/default.aspx">http://silverlight.net/quickstarts/silverlight10/default.aspx</a> if you still don&#39;t have the SDK installed (and why don&#39;t you?&nbsp; Huh?)</p>
<p>It looks like all I need to display an image is an object set to fill with an ImageBrush.&nbsp; Something like this should work:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Ellipse</span><span style="COLOR:red;"> Height</span><span style="COLOR:blue;">=&quot;100&quot;</span><span style="COLOR:red;"> Width</span><span style="COLOR:blue;">=&quot;200&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;10&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;10&quot;&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Ellipse.Fill</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">ImageBrush</span><span style="COLOR:red;"> ImageSource</span><span style="COLOR:blue;">=&quot;lolcat_quadcore.jpg&quot; /&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Ellipse.Fill</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Ellipse</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>Bingo, that did the trick.&nbsp; It looks like this:</p>
<p><a href="http://www.killeverything.com/zak/blogimages/SilverlightDay2_125AC/image.png"><img height="116" alt="lolcat ellipse" src="http://www.killeverything.com/zak/blogimages/SilverlightDay2_125AC/image_thumb.png" width="216" border="0" /></a> </p>
<p>Oh wait, I just found the Image object - no brush needed if you do it like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Image</span><span style="COLOR:red;"> Source</span><span style="COLOR:blue;">=&quot;lolcat_quadcore.jpg&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;120&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;10&quot;</span><span style="COLOR:red;"> Height</span><span style="COLOR:blue;">=&quot;100&quot; /&gt;</span></p></div>
<p>Which looks like this:</p>
<p><a href="http://www.killeverything.com/zak/blogimages/SilverlightDay2_125AC/image_3.png"><img style="BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px;" height="113" alt="lolcat image" src="http://www.killeverything.com/zak/blogimages/SilverlightDay2_125AC/image_thumb_3.png" width="137" border="0" /></a> </p>
<p>Note that in the first case, the image was automatically stretched to fit the dimensions of the ellipse and in the second, I only specified a height - so the image was automatically scaled proportionally.&nbsp; Cool!</p>
<p>Now, processing mouse clicks.&nbsp; This appears to be amazingly easy as well.&nbsp; First, you need to declare the event handler in the XAML mark-up like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Image</span><span style="COLOR:red;"> Source</span><span style="COLOR:blue;">=&quot;lolcat_quadcore.jpg&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;120&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;10&quot;</span><span style="COLOR:red;"> Height</span><span style="COLOR:blue;">=&quot;100&quot;</span><span style="COLOR:red;"> MouseLeftButtonDown</span><span style="COLOR:blue;">=&quot;ChangeLolcat&quot; /&gt;</span></p></div>
<p>Then you just need a javascript function to handle the event - mine looks like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:courier new;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">function</span> ChangeLolcat( sender, args )</p>
<p style="MARGIN:0px;">{</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">if</span> ( sender.Source == <span style="COLOR:#a31515;">&quot;lolcat_quadcore.jpg&quot;</span> )</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sender.Source = <span style="COLOR:#a31515;">&quot;lolcat_schroedinger.jpg&quot;</span>;</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">else</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sender.Source = <span style="COLOR:#a31515;">&quot;lolcat_quadcore.jpg&quot;</span>;</p>
<p style="MARGIN:0px;">}</p></div>
<p>In this case, because the MouseLeftButtonDown event is on the Image object, that&#39;s the object that gets passed in to the javascript function as &quot;sender&quot;.&nbsp; I am simply changing the Source property from how it was defined in the XAML in response to the mouse click.&nbsp; And it works! (sorry I can&#39;t show you - I don&#39;t have a good place to host .NET code at the moment)&nbsp; I think I&#39;m going to like working with Silverlight.</p>
<p>In case you want to download the code for this project and try it out yourself, I will ZIP it up and attach it to this blog post.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=515" width="1" height="1">XAMLSilverlightlolcatsSilverlight Day 1http://www.dotnetmafia.com/blogs/kevin/archive/2008/02/20/silverlight-day-1.aspxThu, 21 Feb 2008 01:16:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:506Kevin1http://www.dotnetmafia.com/blogs/kevin/rsscomments.aspx?PostID=506http://www.dotnetmafia.com/blogs/kevin/archive/2008/02/20/silverlight-day-1.aspx#comments<p>So I finally set out to do something with Silverlight... I set a simple goal for myself tonight - I just wanted to see &quot;Hello World&quot;.&nbsp; That should be easy, right?</p>
<p>First, I downloaded the Silverlight 1.0 SDK from <a href="http://www.microsoft.com/silverlight">http://www.microsoft.com/silverlight</a>&nbsp;and installed it.</p>
<p>Second, I created a new web site in Visual Studio.</p>
<p>Third, I grabbed a copy of Silverlight.js and added it to the web site.&nbsp; For me, it was in C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js.</p>
<p>I added a link to Silverlight.js in the HTML head of default.aspx.&nbsp; Like this:</p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:Courier New;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">script</span> <span style="COLOR:red;">type</span><span style="COLOR:blue;">=&quot;text/javascript&quot;</span> <span style="COLOR:red;">src</span><span style="COLOR:blue;">=&quot;Silverlight.js&quot;&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">script</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>Next, I added a div in the HTML body of default.aspx and gave it an id.&nbsp; It doesn&#39;t need the runat=server attribute, just an id (it will only be reference from Javascript).&nbsp; Like this:</p>
<p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:Courier New;"><pre style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">div</span> <span style="COLOR:red;">id</span><span style="COLOR:blue;">=&quot;MySilverlightDiv&quot;&gt;</span></pre><pre style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">div</span><span style="COLOR:blue;">&gt;</span></pre></div>
<p>Next, I created a XAML file.&nbsp; I know next to nothing about XAML yet, so I just used Google to &quot;borrow&quot; someone else&#39;s example code for now.&nbsp; My XAML file is called MySilverlight.xaml and looks like this:</p>
<p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:Courier New;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">Canvas</span><span style="COLOR:red;"> xmlns</span><span style="COLOR:blue;">=&quot;http://schemas.microsoft.com/client/2007&quot;</span><span style="COLOR:red;"> xmlns</span><span style="COLOR:blue;">:</span><span style="COLOR:red;">x</span><span style="COLOR:blue;">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">TextBlock</span><span style="COLOR:red;"> FontSize</span><span style="COLOR:blue;">=&quot;40&quot;</span><span style="COLOR:red;"> FontFamily</span><span style="COLOR:blue;">=&quot;Arial&quot;</span><span style="COLOR:red;"> Canvas.Top</span><span style="COLOR:blue;">=&quot;20&quot;</span><span style="COLOR:red;"> Canvas.Left</span><span style="COLOR:blue;">=&quot;20&quot;&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Hello World!</span></p>
<p style="MARGIN:0px;"><span style="COLOR:#a31515;">&nbsp;&nbsp;&nbsp; </span><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">TextBlock</span><span style="COLOR:blue;">&gt;</span></p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">Canvas</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>Last thing I did was add the javascript to my HTML file to actually create the Silverlight object in my div:</p>
<p>
<div style="FONT-SIZE:10pt;BACKGROUND:white;COLOR:black;FONT-FAMILY:Courier New;">
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;</span><span style="COLOR:#a31515;">script</span> <span style="COLOR:red;">type</span><span style="COLOR:blue;">=&quot;text/javascript&quot;&gt;</span></p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; Silverlight.createObject(</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="COLOR:#a31515;">&quot;MySilverlight.xaml&quot;</span>, </p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; document.getElementById( <span style="COLOR:#a31515;">&quot;MySilverlightDiv&quot;</span>),</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="COLOR:#a31515;">&quot;MySilverlightControl&quot;</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; { width:<span style="COLOR:#a31515;">&#39;400&#39;</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; height:<span style="COLOR:#a31515;">&#39;200&#39;</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; inplaceInstallPrompt:<span style="COLOR:blue;">false</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; background:<span style="COLOR:#a31515;">&#39;#DDDDDD&#39;</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; isWindowless:<span style="COLOR:#a31515;">&#39;false&#39;</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; framerate:<span style="COLOR:#a31515;">&#39;24&#39;</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; version:<span style="COLOR:#a31515;">&#39;1.0&#39;</span> },</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; { onError:<span style="COLOR:blue;">null</span>,</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; onLoad:<span style="COLOR:blue;">null</span> },</p>
<p style="MARGIN:0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="COLOR:blue;">null</span> );</p>
<p style="MARGIN:0px;"><span style="COLOR:blue;">&lt;/</span><span style="COLOR:#a31515;">script</span><span style="COLOR:blue;">&gt;</span></p></div>
<p>That&#39;s the filename of my XAML file, the Id of my div, a unique&nbsp;Id for the Silverlight control itself, and some various parameters for Silverlight that I do not yet fully understand.</p>
<p>That&#39;s it.&nbsp; I hit my web site with a browser and there was my awesome Hello World!</p>
<p>Hopefully tomorrow I will have time to research XAML some more and do something a bit more interesting with Silverlight.&nbsp; I hope to extend this simple starter project and continue writing about it here, so if you&#39;re interested - copy/paste the code above and come back tomorrow! :)</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=506" width="1" height="1">XAMLSilverlight