{"id":623,"date":"2010-09-09T12:00:40","date_gmt":"2010-09-09T10:00:40","guid":{"rendered":"http:\/\/www.pleus.net\/blog\/?p=623"},"modified":"2011-01-26T19:01:10","modified_gmt":"2011-01-26T18:01:10","slug":"inline-silverlight","status":"publish","type":"post","link":"https:\/\/www.pleus.net\/blog\/?p=623","title":{"rendered":"Create Silverlight Apps with Notepad"},"content":{"rendered":"<p>Did you know that you can write simple Silverlight applications using just a text editor without using an IDE or compiler?<br \/>\nAlthough it is recommended to use silverlight.js to start your silverlight application in a robust way, you don&#8217;t even need that. Just create a html file with a text editor of your choice and embed the XAML code.<\/p>\n<p>The absolute minimum is this:<\/p>\n<pre class=\"brush:xml\">\r\n<script type=\"text\/xaml\" id=\"xamlContent\">\r\n    <!-- XAML begin -->\r\n    <Grid xmlns=\"http:\/\/schemas.microsoft.com\/client\/2007\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\r\n        <TextBlock Text=\"This is Silverlight\"\/>\r\n    <\/Grid>\r\n    <!-- XAML end -->\r\n<\/script>\r\n<object id=\"silverlightControl\" type=\"application\/x-silverlight-2\"\r\n\t       height=\"100%\" width=\"100%\">\r\n\t       <param name=\"Source\" value=\"#xamlContent\" \/>\r\n\t    <\/object>\r\n<\/pre>\n<p>This is a plain html file. The Silverlight plugin is hosted using the object tag. The XAML content is not stored in a xap file, but in a local script of type text\/xaml. Inside this script block any XAML can be placed.<br \/>\nThe script can also use embedded storyboards to automatically triggers animations.<br \/>\nA more complex example which creates a rotating rectangle with text and a logo is shown here:<\/p>\n<pre class=\"brush:xml\">\r\n<script type=\"text\/xaml\" id=\"xamlContent\">\r\n<!-- XAML begin -->\r\n<Border x:Name=\"Bo\" xmlns=\"http:\/\/schemas.microsoft.com\/client\/2007\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\" BorderBrush=\"Black\" BorderThickness=\"5\" Height=\"200\" Width=\"300\" Margin=\"20\">\r\n\t<Border.Projection>\r\n\t\t<PlaneProjection\/>\r\n\t<\/Border.Projection>\r\n    <Grid x:Name=\"Frame\" Background=\"SteelBlue\">\r\n\t\t<Grid.Triggers>\r\n\t\t\t<EventTrigger RoutedEvent=\"Grid.Loaded\">\r\n\t\t\t\t<BeginStoryboard>\r\n\t\t\t\t\t<Storyboard>\r\n\t\t\t\t\t\t<DoubleAnimation RepeatBehavior=\"Forever\" AutoReverse=\"true\" Duration=\"00:00:05\" To=\"180\" Storyboard.TargetProperty=\"(UIElement.Projection).(PlaneProjection.RotationY)\" Storyboard.TargetName=\"Bo\"\/>\r\n\t\t\t\t\t\t<ColorAnimationUsingKeyFrames RepeatBehavior=\"Forever\" AutoReverse=\"true\" Storyboard.TargetProperty=\"(Grid.Background).(SolidColorBrush.Color)\" Storyboard.TargetName=\"Frame\">\r\n\t\t\t\t\t\t\t<EasingColorKeyFrame KeyTime=\"0:0:0\" Value=\"Steelblue\"\/>\r\n\t\t\t\t\t\t\t<EasingColorKeyFrame KeyTime=\"0:0:5\" Value=\"Red\"\/>\r\n\t\t\t\t\t\t<\/ColorAnimationUsingKeyFrames>\r\n\t\t\t\t\t\t<ObjectAnimationUsingKeyFrames RepeatBehavior=\"Forever\" AutoReverse=\"true\" Duration=\"00:00:05\" Storyboard.TargetProperty=\"(TextBlock.Text)\" Storyboard.TargetName=\"Label\">\r\n\t\t\t\t\t\t\t<DiscreteObjectKeyFrame KeyTime=\"0:0:2.5\" Value=\"... Silverlight!\"\/>\r\n\t\t\t\t\t\t<\/ObjectAnimationUsingKeyFrames>\r\n\t\t\t\t\t\t<DoubleAnimationUsingKeyFrames RepeatBehavior=\"Forever\" AutoReverse=\"true\" Duration=\"00:00:05\" Storyboard.TargetProperty=\"(UIElement.Projection).(PlaneProjection.RotationY)\" Storyboard.TargetName=\"Label\">\r\n\t\t\t\t\t\t\t<EasingDoubleKeyFrame KeyTime=\"0:0:2.5\" Value=\"0\"\/>\r\n\t\t\t\t\t\t\t<EasingDoubleKeyFrame KeyTime=\"0:0:2.51\" Value=\"180\"\/>\r\n\t\t\t\t\t\t<\/DoubleAnimationUsingKeyFrames>\r\n\t\t\t\t\t<\/Storyboard>\r\n\t\t\t\t<\/BeginStoryboard>\r\n\t\t\t<\/EventTrigger>\r\n\t\t<\/Grid.Triggers>\r\n\t\t<Grid.Projection>\r\n\t\t\t<PlaneProjection\/>\r\n\t\t<\/Grid.Projection>\r\n        <Image Source=\"pclogo.jpg\" VerticalAlignment=\"Top\" Margin=\"10\"\/>\r\n\t\t<TextBlock x:Name=\"Label\" FontSize=\"28\" Text=\"The power of ...\" Foreground=\"White\"\r\n        \tHorizontalAlignment=\"Center\"  VerticalAlignment=\"Center\">\r\n          \t<TextBlock.Projection>\r\n          \t\t<PlaneProjection\/>\r\n          \t<\/TextBlock.Projection>\r\n\t\t<\/TextBlock>\r\n    <\/Grid>\r\n<\/Border>\r\n<!-- XAML end -->    \r\n<\/script>\r\n\r\n<!-- Silverlight plugin -->\r\n<object id=\"silverlightControl\" type=\"application\/x-silverlight-2\"\r\n\t       height=\"100%\" width=\"100%\">\r\n\t       <param name=\"Source\" value=\"#xamlContent\" \/>\r\n\t    <\/object>\r\n<\/pre>\n<p>The script comprises of the visual elements Border, Grid, TextBlock and Image and four Storyboards which control the animation.<br \/>\nInline XAML can be used to create nice looking splashscreens or single file demos.<br \/>\nTry it. Just copy the file above to a html file and open it. Provided that you have the Silverlight plugin installed you can see the animation.<\/p>\n<p>Screenshots:<br \/>\n<a href=\"http:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-636\" title=\"splash\" src=\"http:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash.png\" alt=\"\" width=\"257\" height=\"247\" srcset=\"https:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash.png 257w, https:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash-150x144.png 150w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a> <a href=\"http:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-637\" title=\"splash2\" src=\"http:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash2.png\" alt=\"\" width=\"251\" height=\"251\" srcset=\"https:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash2.png 251w, https:\/\/www.pleus.net\/blog\/wp-content\/uploads\/2010\/09\/splash2-150x150.png 150w\" sizes=\"auto, (max-width: 251px) 100vw, 251px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.pleus.net\/articles\/inlinexaml\/inlinexaml.htm\" target=\"_blank\">Live demo<\/a><\/p>\n<p>If you want to let Silverlight interact with Javacript, just add another script block at the top of the page:<\/p>\n<pre class=\"brush:xml\">\r\n<script type=\"text\/javascript\">\r\n  function nav(sender, args)\r\n  {\r\n    alert(\"You clicked!\");\r\n  }\r\n<\/script>\r\n<\/pre>\n<p>In order to call it, add the event handler to the Grid in XAML like this:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;Grid x:Name=\"Frame\" Background=\"SteelBlue\" Cursor=\"Hand\" MouseLeftButtonDown=\"nav\"&gt; \r\n...\r\n<\/pre>\n<p>That&#8217;s it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that you can write simple Silverlight applications using just a text editor without using an IDE or compiler? Although it is recommended to use silverlight.js to start your silverlight application in a robust way, you don&#8217;t even need that. Just create a html file with a text editor of your choice and &hellip; <a href=\"https:\/\/www.pleus.net\/blog\/?p=623\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Create Silverlight Apps with Notepad<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12],"tags":[78,31],"class_list":["post-623","post","type-post","status-publish","format-standard","hentry","category-ria","category-silverlight","tag-silverlight","tag-xaml"],"_links":{"self":[{"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=623"}],"version-history":[{"count":74,"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/623\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/623\/revisions\/770"}],"wp:attachment":[{"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pleus.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}