Blog: Posts http://phillyxaml.org/blog/Lists/Posts/Working.aspx RSS feed for the Posts list. Wed, 08 Sep 2010 00:47:18 GMT Windows SharePoint Services V3 RSS Generator 60 Blog: Posts /blog/_layouts/images/homepage.gif http://phillyxaml.org/blog/Lists/Posts/Working.aspx Silverlight Conceals HTML Elements on a Page http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=22 Body:
So I've read about it (and was therefore lucky enough to quickly identify the issue) and knew how to fix it when it happened, but hadn't actually seen it applicable to an application yet.
 
So here it is. I have a Silverlight application that makes up a component in a web page. Probably saying "Wow"... So far no surprise. The main web application however, which is SharePoint (SL is hosted in a web part), uses jQuery and jQuery UI to display custom help in a modal dialog. When that modal dialog is displayed, the Silverlight plugin instance conceals some of the HTML output on the screen, ie the modal dialog, regardless of Z-Order, and furthermore is not dimmed/disabled as part of the modal dialog being shown.
 
The image below demonstrates the issue. In this image, and the one that follows, the area designated by the green boundary is the Silverlight application. The area designated in purple is the jQuery modal dialog that is being concealed.
 
Modal dialog is concealed by Silverlight
 
Its also worth noting that the Silverlight application itself remains fully interactive while the "modal" dialog is being shown. This is because the Silverlight application is always set to take highest Z-Order by default, rendering after the HTML has already been rendered to the page, in a sense floating the plugin instance above the page.
 
I have read and verified that this issue will apply to all HTML-based controls on a page. The majority of issues reported seem to be around dropdowns disappearing behind Silverlight controls, which have their own designated real estate on the page, normally hiding the issue. Not ideally what we want in these situations.
 
Luckily, the fix is very simple. When we initialize our Silverlight control, we need to set the Windowless attribute equal to true. This will cause the Silverlight application to be rendered in the correct Z-Order with a slight, but virtually unnoticeable performance hit. This will allow our dialog to be rendered after, and therefore on top of our Silverlight control. Additionally, since the control is already rendered to the page, and not floating above the page, so to speak, the browser can handle disabling access to the application by disabling the page, greying it out, etc.
 
Since the recommended method for adding Silverlight to a page is to use an <object> tag with nested <param> tags, that is what we will cover here. To add our Silverlight instance, we probably have something like this markup generated by Visual Studio by default (with the exception of the initParams parameter shown for example):
 
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/someXapFile.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40624.0" />
          <param name="autoUpgrade" value="true" />
          <param name="initparams" value="AccessMode=Local,User=John Angelini" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
               <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
All we have to do is pass in another param like so and we should be golden:
 
<param name="windowless" value="true"/>
 
The result, Voila! We have a Silverlight application that is baked into the page, displays behind the modal dialog, and most importantly, is no longer interactive, allowing our modal dialog to actually be a modal dialog.
 
Correctly displaying the modal dialog in front of the Silverlight application
Category: Best Practices;Tips & Tricks;Silverlight
Published: 3/4/2010 2:22 PM
]]> Philly XAML Best Practices;Tips & Tricks;Silverlight Thu, 04 Mar 2010 18:34:08 GMT http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=22 Silverlight 4 is Here! http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=24 Body:
The Silverlight 4 RTW is here and available at http://www.silverlight.net. Make sure to grab the Silverlight 4 Tools for Visual Studio 2010, The Silverlight 4 Toolkit and Expression Blend 4 RC while youre there to experience the entire development experience. The RTM version of Blend will be released in the upcoming months, but for now the RC works quite well and is pretty stable. More to come as it is available. Just got all the bits installed and am ready to play.
Category: Best Practices;Expression Blend;Tips & Tricks;Silverlight
Published: 4/15/2010 11:07 PM
]]> Philly XAML Best Practices;Expression Blend;Tips & Tricks;Silverlight Fri, 16 Apr 2010 03:11:41 GMT http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=24 Video: How to Build a Silverlight Media Player That You Can Use in Any Website http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=31 Body:
This post is the first video post on the site, and covers how to build a Silverlight Media Player that you can use in any web page whether it be static HTML, ASP, ASP.NET, SharePoint, PHP, whatever. More specifically, it shows how I built the media player you will use if you choose to watch this video tutorial!
 
My particular implementation uses SharePoint (MOSS 2007), where I am hosting the script file, master page, CSS stylesheet, and the player .xap file file as well as all of my WMV media files. After all, is this not what SharePoint was designed for? I do however use a third-party Silverlight media player control, provided by ComponentOne, but in a subsequent post I will describe how this can be easily modified to use the Smooth Streaming Media Player from the Silverlight Media Framework. This way, this can be an entirely free solution to create for your own websites.
 
We are really just creating a wrapper for an existing media player control. We are NOT writing any kind of playback functionality, full-screen capabilities, volume control, or even providing any kind of UI, short of our one single third-party control that occupies our entire default grid. After watching the video or downloading the code, it should be pretty easy to modify this shell to fit your particular player needs.
 
So, how does it work? Basically, we are going to use jQuery and some very simple markup to easily add media to blog posts, articles, whatever, wherever, whenever. Our script takes 2 attributes of a div tag we add to our page as a placeholder, and dynamically generates the correct object and param tags for displaying a single Silverlight player file, initialized with whatever Title and WMV file URL we pass it. It then uses jQuery to insert some templated markup right into the DOM as the content of the placeholder div we added.
 
One of the limitations I encountered with my personal solution, was that SharePoint strips out object and param tags from content fields that use the HTML Editor... so no matter what I did, I could not add my player to a page as markup in a content field. From a Content Editor Web Part, I could add the correct tags, but not as content in an HTML field.
 
With this solution, I can easily add a div tag with valid attributes that wont be stripped out, and when the page loads it takes that info in $(document).ready() and inserts instances of the player pointing to the correct Video URL wherever a div with a certain class is found! Minimal markup, powerful reuse!
 
In my implementation, the script is embedded in my master page and works on all pages in the SharePoint Site that use that master page. Because its only javascript, jQuery, Silverlight and CSS, it will work anywhere where we have the ability to execute the javascript calls!
 
Now, I vaguely remember someone mentioning a video in here somewhere?
Category: Best Practices;Demo Applications;Media;Tips & Tricks;Silverlight
Published: 4/23/2010 8:59 PM
]]> Philly XAML Best Practices;Demo Applications;Media;Tips & Tricks;Silverlight Thu, 22 Apr 2010 20:10:32 GMT http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=31 Silverlight 4 Training Kit as Windows Media Player Playlist http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=33 Body:
I did something I would like to share and figure this is the best way to do it. I took an email regarding the Silverlight 4 Training Kit and used it to download the local version of the kit. I found out quickly that the links to the videos in the kit still use web-based targets for the video file, so basically the kit wraps everything into one bundle EXCEPT for the actual videos, which are served out by Channel 9.
 
So here is what I did… I took the kit and wrote a small utility that pulled all the video.xml files out of the kit and parsed each one to get the valid URL for the relative video file. I then took that data and dynamically constructed a Windows Media Player WPL Playlist file which is simply a continuously playing list of the video files in the correct order. This way I can start at the beginning and watch it continuously without having to manually navigate to each file as I need it.
 
Anyway, here is the playlist file, for anyone interested. I think this is something people will find highly valuable as I did. The descriptive content in the kit is nice and all, but a little tedious for those who just want to work their way through it. Just thought I would share. This way people can have one item (the playlist) to track, and additionally, the playlist is very easy to distribute and launch by either dropping it in the playlist folder ([%userprofile%]\music\playlists) to be picked up by Windows Media Player or simply double clicked to play it. Also works on Windows Media Player 9 and above, which about 99% of people have by now so it is virtually universal.
 
Content of the playlist file is as follows:
<?wpl version="1.0"?>
<smil>
    <head>
        <meta name="Generator" content="Microsoft Windows Media Player -- 12.0.7600.16415"/>
        <meta name="ItemCount" content="2"/>
        <author/>
        <title>Silverlight 4 Training Kit</title>
    </head>
    <body>
        <seq>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule1-SL4LOB_01_01_Introduction/Silverlight4-SL4BusinessModule1-SL4LOB_01_01_Introduction_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule2-SL4LOB_02_01_RIAServices/Silverlight4-SL4BusinessModule2-SL4LOB_02_01_RIAServices_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule2-SL4LOB_02_02_EditingEntities/Silverlight4-SL4BusinessModule2-SL4LOB_02_02_EditingEntities_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule2-SL4LOB_02_03_ShowingEvents/Silverlight4-SL4BusinessModule2-SL4LOB_02_03_ShowingEvents_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule3-SL4LOB_03_01_Authentication/Silverlight4-SL4BusinessModule3-SL4LOB_03_01_Authentication_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule3-SL4LOB_03_02_MVVM/Silverlight4-SL4BusinessModule3-SL4LOB_03_02_MVVM_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule3-SL4LOB_03_03_Validation/Silverlight4-SL4BusinessModule3-SL4LOB_03_03_Validation_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule3-SL4LOB_03_04_ImplicitStyles/Silverlight4-SL4BusinessModule3-SL4LOB_03_04_ImplicitStyles_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule3-SL4LOB_03_05_RichTextBox/Silverlight4-SL4BusinessModule3-SL4LOB_03_05_RichTextBox_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule4-SL4LOB_04_01_Webcam/Silverlight4-SL4BusinessModule4-SL4LOB_04_01_Webcam_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule4-SL4LOB_04_02_Drop/Silverlight4-SL4BusinessModule4-SL4LOB_04_02_Drop_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule5-SL4LOB_05_01_Grouping/Silverlight4-SL4BusinessModule5-SL4LOB_05_01_Grouping_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule5-SL4LOB_05_02_FluidUI/Silverlight4-SL4BusinessModule5-SL4LOB_05_02_FluidUI_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule5-SL4LOB_05_03_RightMouseClick/Silverlight4-SL4BusinessModule5-SL4LOB_05_03_RightMouseClick_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule6-SL4LOB_06_01_Printing/Silverlight4-SL4BusinessModule6-SL4LOB_06_01_Printing_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule6-SL4LOB_06_02_MultipagePrinting/Silverlight4-SL4BusinessModule6-SL4LOB_06_02_MultipagePrinting_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule7-SL4LOB_07_01_OOB/Silverlight4-SL4BusinessModule7-SL4LOB_07_01_OOB_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule7-SL4LOB_07_02_Toasts/Silverlight4-SL4BusinessModule7-SL4LOB_07_02_Toasts_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule7-SL4LOB_07_03_WindowPlacement/Silverlight4-SL4BusinessModule7-SL4LOB_07_03_WindowPlacement_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule7-SL4LOB_07_04_ElevatedTrust/Silverlight4-SL4BusinessModule7-SL4LOB_07_04_ElevatedTrust_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule8-SL4LOB_08_01_CustomChrome/Silverlight4-SL4BusinessModule8-SL4LOB_08_01_CustomChrome_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule8-SL4LOB_08_02_WindowClosingEvent/Silverlight4-SL4BusinessModule8-SL4LOB_08_02_WindowClosingEvent_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule8-SL4LOB_08_03_OOBSilentInstall/Silverlight4-SL4BusinessModule8-SL4LOB_08_03_OOBSilentInstall_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule8-SL4LOB_08_04_XapSigning/Silverlight4-SL4BusinessModule8-SL4LOB_08_04_XapSigning_kit.wmv"/>
            <media src="http://ecn.channel9.msdn.com/o9/learn/videos/Silverlight4-SL4BusinessModule8-SL4LOB_08_05_MEF/Silverlight4-SL4BusinessModule8-SL4LOB_08_05_MEF_kit.wmv"/>
        </seq>
    </body>
</smil>
Category: Best Practices;Tips & Tricks
Published: 5/6/2010 10:28 AM
]]> Philly XAML Best Practices;Tips & Tricks Thu, 06 May 2010 14:37:26 GMT http://phillyxaml.org/blog/Lists/Posts/ViewPost.aspx?ID=33