Silverlight 1.1 - Slide Deck

If you thought I was done posting content this week after the video walkthrough, you were wrong :)! I presented on Silverlight at the Indianapolis .NET Developers Association monthly meeting on June 16, 2007. I created a Point Point slide deck (complete with notes) that provides a high-level overview of Silverlight.

In addition, I also provided a walkthrough of creating a media player using Silverlight 1.1 during the meeting.

Feel free to use the content of the slidedeck, I only ask that if you use it, you please post a comment explaining what works and what didn't work with your presentation.

Personally, I feel this is a pretty solid overview especially given the time constraints of the presentation. Enjoy!

Silverlight 1.1 - How to Create a Media Player

During the June 16th, 2007 Indianapolis .NET Developers Association monthly meeting, I will be presenting an overview of Silverlight. In addition to the overview, I thought it might be helpful to provide a walkthrough of creating a media player using Silverlight 1.1 (the one with the .NET Framework).

In order to prepare for the presentation and provide the content to individuals after the meeting, I decided to create this webcast. Enjoy!

I apologize for the quality of the video, I'm still trying to get the webcast thing down. I wanted everything to be large enough so everyone could read the code. If anyone has some suggestions in terms of how to create a better webcast with Windows Media Encoder, please let me know. I look forward to your feedback and comments on this presentation.

Project Information
Presentation:	here
Duration:	30:58
Source Code:	here
Requirements:	Silverlight 1.1 Alpha

Silverlight and Halo 2

Last month, some of us played the Halo 3 beta and discussed Silverlight, I have some exciting news. I would like to party up again on Tuesday, June 19th at 9 p.m. EST to play Halo 2 and discuss Silverlight in between games. If you have an interest, please post a comment with your XBox Live gamertag and e-mail address. All comments on this blog are moderated, so I will NOT post the comment that contains your gamertag and e-mail address. I will then e-mail you giving you my XBox Live gamertag.

Also, if there is a topic you would like to discuss, please bring it along. Personally, I would like to discuss the following:

• atypical controls that you think may be cool. By atypical, I am referring to controls beyond button, textbox, dropDownList, etc.
• Silverlight Streaming

Also, next week I will be posting a webcast on Silverlight 1.1 so stay tuned for some real content :)

'07 Summer Tour

Hello,

June is going to be an exciting and busy month. I'm going to be presenting at a wide variety of events and if you're in the midwest geography, feel free to stop in and say "hey!".

Date	Location	Event	Topic
05.22.07	Indianapolis	DevCares	Visual Studio "Orcas" and LINQ
06.01.07	--	Internal	Silverlight
06.08.07	Louisville	DevCares	Microsoft Expression
06.14.07	Indianapolis	Indy .NET Assoc.	A Bit of Fun with Microsoft Silverlight
06.26.07	Indianapolis	DevCares	Microsoft Expression

It's going to be a busy month :)

Silverlight and SharePoint Integration Contest

Michael Gannotti has posted a contest on Silverlight and SharePoint Integration.

Definately check it out, first prize is pretty impressive. Thanks goes to Corne Van Dyk for pointing this out.

Silverlight - Book

Greetings,

I am currently working on a book aimed at Silverlight 1.1. I am seeking comments from you regarding any of the following:

• What are somethings you really like in your technical books?
• What are somethings you really dislike in your technical books?
• Are there any items you would really like to see in this book?

I will be posting a variety of code samples, thoughts, and other mumblings throughout this authoring endeavor.

Thanks!
Chad

Silverlight and Halo 3

If you are excited about the Halo 3 beta and would like to discuss Silverlight, I have some exciting news. I would like to party up on Tuesday evening at 9 p.m. EST to play Halo 3 and discuss Silverlight while the games are loading. If you have an interest, please post a comment with your XBox Live gamertag and e-mail address. All comments on this blog are moderated, so I will NOT post the comment that contains your gamertag and e-mail address. I will then e-mail you giving you my XBox Live gamertag.

Silverlight - Upgrading from WPF/E

Hello!

I was in the process of working on a project when I noticed some fairly significant changes from what I was used to. All-in-all, I like the changes. However, I only liked them once I found some documentation explaining the changes :)

If you have been working with the CTPs prior to the 1.0 beta release of Silverlight, I would really recommend reading the following articles prior to your development endeavor.

• What's New in Silverlight (1.0 Beta and 1.1 Alpha)?
• Bryant Likes has listed additional items.

Both of these are very valuable reads! Enjoy.

Silverlight - Samples updated from WPF/E

Hey Readers!

I have completed updating all of the samples that have been on this blog from WPF/E to be compliant with Silverlight 1.0 Beta. Here is a list of the updated samples

• Enter the Matrix (a popular one amongst the kids)
• Movie Slider Puzzle
• An ASP.NET User Control using Silverlight
• MIX 07 Bling

The GeoPhoto control is being converted from user control to something more valuable. I hope to have it completed very soon. Please watch this blog for more information.

Additionally, if you are interested in ASP.NET user controls using Silverlight, I have written an article for Developer.com that walks through the process of a creating a very basic user control.

Silverlight - Enter the Matrix

This example is an updated version of an earlier post. For information regarding this item, please review my previous post.

Project Information
Source Code:	here
Developed For:	Silverlight 1.0 Beta

Silverlight - Movie Slider Puzzle

This is example is an updated version of an earlier post. For information regarding this item, please review my previous post.

Project Information
Source Code:	here
Developed For:	Silverlight 1.0 Beta

Silverlight - A Basic Silverlight User Control

I recently wrote an article on creating a basic ASP.NET User control using Silverlight. The article has been published on Developer.com and is available here.

However, this example is an updated version of an earlier post. For information regarding this control, I would recommend reviewing my article.

Project Information
Source Code:	here
Developed For:	Silverlight 1.0 Beta

Silverlight - MIX Bling

This example is an updated version of an earlier post. For information regarding this control, please review my previous post.

Project Information
Source Code:	here
Developed For:	Silverlight 1.0 Beta

Silverlight - How to Dynamically Load a XAML File

This example is an updated version of an earlier post. With the release of the 1.0 Beta of Silverlight, dynamically loading a XAML file is easier. Now you only have to set the "Source" property of a SilverlightControl object. For information on how it used to be done, please review my previous post.

Here is a sample that dynamically loads XAML files based upon the selected shape.

Project Information
Source Code:	here
Developed For:	Silverlight 1.0 Beta

Silverlight - 1.0 Beta and Community Site Launced

• Community Site - http://silverlight.net/Default.aspx
• Download - http://www.microsoft.com/silverlight/install.aspx
• SDK - http://msdn.microsoft.com/vstudio/eula.aspx?id=a40f3ffc-2657-02ec-7d67-7a79b4eac832

LOTS of changes

Silverlight - Client Side Invasion! [in a good way]

Hello,

I haven't posted anything in a while and I wanted to write a quick message pointing out some items I've recently learned/figured out/been working on.

• The SourceString property of the "WPF/E" object provides some VERY cool possibilities. Over the last couple of weeks, I've been working on creating an online wizard that will then generate a small JavaScript snippet that people can copy and paste to display some Silverlight content on their webpage/blog. This is really cool because it allows individuals that may not be very technical, yet know how to display a YouTube video on their webpage/blog the ability to use Silverlight content in the same fashion. This will make more sense once the wizard is posted. I have a working prototype, however I'm not making it publicly available just yet. I'm hoping that during the MIX 07 conversation, a new Silverlight CTP will be announced/released [crossing fingers]. There is currently one item that I'm looking forward to.
• I've been writing an article for CodeGuru.com related to authoring ASP.NET user controls that host Silverlight content. This article should be published within the next week and I will write a message on this blog once it is published.

Silverlight it is!

WPF/E has been renamed to "Silverlight"

http://news.com.com/Microsoft+sheds+light+on+Flash+rival/2100-1012_3-6176022.html?tag=nefd.lede

WPF/E - How To Put VirtualEarth Content Above WPF/E Content

During the implementation of the GeoPhoto User Control I ran into a problem I had not anticipated. Please allow me to setup the problem.

A WPF/E control is rendered as an ActiveX Control, which happens to also be considered a windowed control. Within IE 5.5+, HTML content cannot be layered above windowed controls in a straight forward approach. You may have seen this in some DHTML style menus on the web. You may have noticed a menu "hiding" behind a drop down list, though you would expect the menu to be above the list. Because the drop down list is an example of a windowed control, the menu is rendered under, or behind, the drop down list.

Occasionally, you may want to present HTML content, such as integrating Virtual Earth content, on top of your WPF/E content. The previously described problem, may cause some frustration. However, don't worry, here's how to get around the problem.

• Place your HTML content within a DIV element.
• Define the height and width of the DIV element. This is recommendation to ensure that everything is working properly.
• Define the top and left positions of the DIV element.
• Create an IFRAME element that is the same height and width of the DIV element.
• Position the IFRAME element at the same location of your DIV element.

This works because as of Internet Explorer 5.5, IFRAME elements are no longer windowed controls. Crafty.

WPF/E - GeoPhoto - A User Control With Fun in Mind

UPDATE - 05.06.2007 - The content of this post is no longer valid with the 1.0 beta release of Silverlight.

Greetings,

One of my hobbies is Geocaching. Because of this, I decided to keep a blog regarding my caching adventures. I wanted this blog to be very heavily focused on pictures and location to help readers connect with the locations. This seemed like a perfect opportunity to create a reusable component that would allow me to load location specific images. The control displays images and if the "swap" icon is selected, a Virtual Earth map of the location of the photo is displayed. Hence the birth of GeoPhoto.

On the WPF/E side of the ball, this component is interesting because it demonstrates some very powerful, and valuable, techniques including:

• Displaying HTML content ON TOP OF WPF/E content. I have not seen this implemented elsewhere. Everything else I have seen involves displaying WPF/E content on top of HTML content
• Exposing ASP.NET user control properties to client (JavaScript) code
• A fairly smooth slider "control".
• Converting data from an XML file into JavaScript objects that are used throughout the application.
• Creating a TRUE User Control in that you can actually use it several times on the same page.

This control reads the image: source, latitude, and longitude values from an xml file. The xml file location is actually exposed as a property of the user control. This control allows you to do the following:

• Define the source of a picture and it's latitude, longitude
• Define a latitude and longitude for a group of pictures
• Define picture groups for multiple locations.

Please bear in mind, this control can be expanded upon to be more robust. This was primarily designed to be used for a specific case, and then I expanded it to be a bit more reusable, then I decided to share it through my blog. I hope you find it useful. There are several items that can definately be improved upon. One item is I would like to utilize the Downloader object more. Another one of these items is the fact that the control currently doesn't work in Firefox. I believe there is a bug in the Feb CTP that does not allow the SourceElement of a WPF/E control to be accessed when attempted through Firefox. I have posted a question on the forum regarding this. I hope to find some time to remedy this, and if so, I will definately make a post about it (so make sure you use the RSS subscription :)).

Over the next couple of weeks, leading up to MIX '07, I intend to write some more detailed posts regarding some of the points listed above. These posts will be based on the GeoPhoto control, and now is as good as time as any to make this control available. I look forward to your comments.

Project Information
Source Code:	here
Requirements:	WPF/E February 2007 CTP

WPF/E - How to get the id of the hosting WPF/E control

UPDATE - 05.06.2007 - The content of this post is no longer valid with the 1.0 beta release of Silverlight.

The February 2007 CTP of the WPF/E SDK provides the "GetHost" method which enables ANY UIElement to get the hosting WPF/E control of the object. Unfortunately, there is not a property or method that exposes the ID of the WPF/E control (as of the Feb 2007 CTP). In the event you are attempting to create a reusable component, you will probably want the ID of the control so that you can reuse all of the JavaScript you have laboriously authored :)

After reviewing the items available through the WPF/E control API, I settled on an approach that seems usable. I used the SourceElement property when I declared my WPF/E control. Click the button below to display the WPF/E control information.

The key item to notice is that these are two seperate instances of the same xaml file. The source code for this implementation is available at the end of this post.

I simply declared the WPF/E control in the HTML as follows:

<div id="wpfeControl1Host">
  <script type="text/javascript">
    new agHost
    (
      "wpfeControl1Host", // hostElementID (HTML element to put WPF/E control into)
      "wpfeControl1", // ID of the WPF/E ActiveX control we create
      "400", // Width
      "400", // Height
      "white", // Background color
      "wpfeControl1", // SourceElement (name of script tag containing xaml)
      "plugin.xaml", // Source file
      "false", // IsWindowless
      "30", // MaxFrameRate
      null // OnError handler
    );
  </script>
</div>

Notice the relationship between the "ID of the WPF/E ActiveX control", the "SourceElement" property, and the
id of the containing "Div" element. The relationships are as follows:

• The "SourceElement" is set to the ID of the WPF/E ActiveXControl
• The "hostElementID" is set to the "SourceElement" + a unique number to identify the instance
• The "id" of the "div" tag is set to the "hostElementID". I point this out simply because if you are using this as a checklist you can just go down the list.

This naming structure is implemented to give us the flexibility of obtaining BOTH the id of the WPF/E ActiveX control and the id of the hosting element from the JavaScript. Now that we have setup the relationships we can obtain the various
IDs.

Using the "WPF/E JavaScript Application" Visual Studio 2005 Template asa basis, simply replace the "handleMouseUp" function
with the following:

function handleMouseUp(sender, eventArgs)
{
  var gradientStop1 = sender.findName("gradientStop1");
  var gradientStop2 = sender.findName("gradientStop2");
  gradientStop1.offset = 1;
  gradientStop2.offset = .403;

  // Obtain a reference to the WPF/E control
  var wpfeControl = sender.GetHost();
  var displayString = new String();

  // Display the ID of the ActiveX (WPF/E) control
  displayString += "The ID of the ActiveXControl is " + wpfeControl.SourceElement + "\n\n";

  // Display the ID of the HTML element that is hosting the control
  var hostingElementID = wpfeControl.SourceElement + "Host";
  displayString += "The ID of the Hosting HTML element is " +   hostingElementID + "\n\n";

  // Display the HTML of the "control" for the sake of proof
  if (document.all)
  {
    var hostingElement = document.getElementById(hostingElementID);
    displayString += "The HTML of the \"control\"\n";
    displayString += "-------------------------------------------";
    displayString += hostingElement.outerHTML;
  }
  alert(displayString);
}

I settled upon this approach primarily because it worked :). However, I was originally led down the path because of the comment in the HTML file that states "// SourceElement (name of script tag containing xaml)". I think the confusion is because of there seems to be a discrepency between this comment and the contents of the information within the SDK for the "SourceElement" property. I look forward to your comments.

Project Information
Source Code:	here
Requirements:	WPF/E February 2007 CTP