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

Misc - New Layout

I came to the decision that I didn't like the appearance of my blog. Thus, I decided to move forward with a redesign. In selecting a design, I wanted to make the following improvements that I felt were lacking from the previous version.

• Improved Readibility - The font is now larger, more distinct, and clearer
• Focus on Content - WPF and WPF/E can more easily standout as the focus of a blog post now
• Community Involement - Links are now available to those sites that are directly related to this blog's content. Including blogs that link to this site and other resources. In addition, I registered for feedburner to help guauge reader interest level. So if you are already a subscriber, I would appreciate it if you update your rss feed url through the "Subscription" link on the right side of the page.
• Flexibility - I would like to incrementally include WPF/E content into this blog.
• Navigation - Personally, I ran into difficulties finding content on my own blog. The use of the hierarchy control has simplified this process.

I hope you like the new design. I hope to have some new .NET related content posted soon.

WPF/E - MIX Bling

UPDATE - 05.05.2007: The content of this post is no longer valid with the 1.0 beta release of Silverlight. The updated post and source code can be found here.

Hola! I'm getting pumped for Mix and I haven't seen a lot of bling out on the web yet. So I decided to add my 2 cents to the mix (no pun intended).

I've posted the code and this can be easily extended to implement some functionality with the buttons to make this a full blown media player. In fact, this component was created to host a 320x240 video. Originally, I wanted to display this component horizontally instead of vertically, which is why the borders are a little messed up. The source code available for download is actually the horizontal version so the borders of the device look better. Enjoy!

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

WPF/E - How to Create a Media Player

[Spoiler Alert] - This content will be presented at the Kentucky .NET User Group on March 8th, 2007 [/Spoiler Alert]

During the March 8th, 2007 Kentucky .NET User Group meeting I will be presenting an overview of WPF/E. In addition to the overview, I decided it would be helpful to provide a walkthrough of creating a media player to familiarize individuals with the platform.

While I was practicing presenting, I decided to record my presentation and try my hand at my first webcast. If you decide to watch the webcast, I would recommend waiting for the video to be 10% downloaded before clicking the "play" button. I apologize for the inconveniance, however, my presentation has a time limit and I was trying to focus on a lot of the core features of WPF/E. I will try to blog on an intelligent download/playback handler sometime in the near future. Please let me know if you have any questions.

Project Information
Presentation:	here
Duration:	44:23
Source Code:	here
Requirements:	WPF/E February 2007 CTP

WPF/E - How to dynamically load a XAML File

UPDATE - 05.05.2007: This content of this post is no longer valid with the 1.0 beta release of Silverlight. The updated post and source code can be found here.

Recently on the WPF/E forum someone was asking about how to dynamically load a XAML file. This post will explain how to accomplish this.

One of the great features of WPF/E is the fact that it is consistent with an established web architecture. At a high-level overview, within a webpage, a WPF/E component is hosted within an HTML element and you can use JavaScript to interact with the XAML content.

When working with XAML within the web architecture, it is important to remember both the Document Object Model (DOM) and the WPF/E Object Model.

Now let's get into the details of how to solve the problem of dynamically loading a XAML file. This really cool part is that we can do this in three easy steps.

1. Reference the WPF/E control via the Document Object Model (DOM).
   var wpfeControl = document.getElementById("wpfeControlID");
    
2. Use the "Source" property of the WPF/E control to specify a XAML file.
   wpfeControl.Source = "pathToXamlFile.xaml";
    
3. Reload the content of the WPF/E control with the contents of XAML file referenced by the "Source" property.
   wpfeControl.Reload();

For larger xaml files, it's generally recommended to use the Downloader object to enhance the user's experience. Here is a sample that loads a different .xaml file based upon the selected item. In addition the code for this sample is posted below. Thanks alot!

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

WPF/E - Movie Slider Puzzle (Take 2)!

UPDATE - 05.05.2007 - The content of this post is no longer valid with the 1.0 beta release of Silverlight. The updated post and source code can be found here.

I decided that I wanted to play with the following WPF/E elements/features:

• MediaElement
• Clip
• Drag and Drop functionality
• The Downloader object

In the process I created a slider puzzle whose pieces are based upon a video! A sample of the project and the source code is available below. Please be patient as it may take a couple of minutes to download the video. You will know that the video is loaded when the playback buttons are positioned below the play surface. The video provides the following functionality:

• Play/Pause
• Stop
• Re-scatter the pieces
• Order the pieces in case you grow impatient :)

The project works by taking the video and measuring 9 pieces. Then, the video is loaded 9 separate times, one for each piece, which is defined as a Canvas. This is necessary because you can't actually cut up a video. This reveals the power of the "Clip" property. Each piece contains a clip that is the size of the piece. After the clip is in place, some good old-fashioned mathmatical calculations are used to define how to offset the position of the video within the canvas. If you look in the code, you'll notice that we use negative values to define the Canvas.Left and Canvas.Top proerties of the MediaElement. This positioning, in conjunction with the previously defined Clip, define what part of the video is visible to the user.

I look forward to your comments. This example can be improved upon, but I'm pretty excited about it. Enjoy!

Project Information
Source Code:	here
WPF/E Runtime:	Febuary 2007 CTP

WPF/E - The Matrix Reloaded

Bryant has taken the Matrix example and really polished it up. You can see the new and improved version here.

Great work Bryant!

WPF/E - How to Animate your Name!

Hey Readers...

During my undergraduate career I studied computer science. I was looking to expand my knowledge into working with some technologies that were closer to the user experience. Because of this, I took a Flash class in another department. One of the required projects was to create a basic animation that would animate our name. At that time, the movie "The Matrix" was pretty big, so I used that as the premise for the animation. I'm sure you've all seen it.

I decided to take that animation and re-create it using WPF/E. My main focus was I wanted to see how efficient the JavaScript was while attempting to "animate" (please note, I'm not using the WPF/E Animation, rather animation via JavaScript) several items. The code for this project is available here. It would definately have been more savvy to let the JavaScript generate the textblocks. However, I wanted to see how the technology would perform with the manipulating each textblock individually. I was very happy with the result.

If you have any questions about the code, please feel free to post a comment. In addition, I have some ideas for some other types of controls I would like to post over the next couple of weeks, so stay tuned! Now, here is the little name animator. Enjoy!



NOTE: This code was written with the WPF/E Febuary 2007 CTP

WPF/E - How use drag and drop

One very important feature of rich internet applications is the ability to implement drag-n-drop. Lorin from the WPF/E Developer Content Team has posted a great walkthrough of how to implement drag-n-drop within WPF/E. In addition, there is a demo application.

Personally, one of the cool features that I noticed was, if you drag and drop the sunglasses on the dog, you can still see the dogs eyes. I really appreciated the fact that the sunglasses utilized other WPF content instead of just using a bitmap. It demonstrates how powerful the platform is.

WPF/E - Febuary CTP & SDK Released!

Microsoft has released the latest WPF/E CTP. You can download the Windows version from here and the Mac version from here.

You may download the SDK from here. In addition, the online reference for the SDK may be found from here.

MSDN Forums - Achievement(s) Unlocked

Hello!

One of my goals for this blog and the community for 2007 was to be more active in the forums. At the end of the first month of 2007, I noticed that I managed to land in the top 10 on both the WPF and WPF/E forums! Keep the questions coming!




P.S. I believe they are getting ready to release the next WPF/E CTP. I tested viewing this post and the following error appeared. I'll put a post up when its out.

WPF/E - A basic WPF/E User Control

UPDATE - 05.05.2007 - The content of this post is no longer valid with the 1.0 beta release of Silverlight. The updated post and source code can be found here.

Recently, I wanted to learn about WPF/E so I created an ASP.NET User Control that takes the images from a specified directory and rotates through them and displays their reflection. I will admit, this posting is a bit light on pure information, however, I still wanted to share what I learned and the code I wrote. If you have any questions, please post a comment and I will be glad to answer them. (you can get the source code here):

I am not saying this is the best how-to on this type of thing, in fact, there are several improvements that can be made to the implementation. Rather, I created this as a proof-of-concept for myself, so I thought I would share what I learned along the way.

• I was pretty impressed with the ease in using this technology. If you are familiar with JavaScript, you are going to find it easy to work with WPF/E. A long time ago, I learned ActionScript. It's mediocre, but personally, I would rather work with a widely used language such as JavaScript when developing. I'm very thankful the WPF/E team decided to use JavaScript instead of trying to develop some other new scripting language.
• I really appreciated the fact that because WPF/E is in open text platform (it uses xml and JavaScript), the installation requirements fall on the client side. This was great because my hosting service doesn't have .NET 3.0 components installed, yet I was still able to deploy this sample.
• I actually used the Microsoft Expression Blend Beta 1 for the graphics implementation. I was extremely pleased to see that I had to make ZERO changes to the xaml in order to get it to work within WPF/E. Very slick.
• I had some difficulty deploying the application because the .xaml MIME type was not registered correctly on the hosting server. I do not own the server so I could not see what had happened. Shawn Wildermuth pointed out that sometimes you can have success deploying an application by using the .xml extension in place of .xaml. This is useful if you are having difficulty in getting .xaml registered as a mime-type. This little tip allowed me to get the WPF/E control you are seeing above deployed.

I plan on presenting on WPF/E in the Louisville, KY and Indiana geographies over the next couple of months. So if you're in the area and interested in this technology, please view the user group websites for more information.

once again, the source code is here if you would like it.

P.S. I just made the cut-off for my one-a-week posting goal by 27 minutes :)

WPF - What's the difference between XBAPs and WPF/E Applications?

I was recently trying to determine what the differences are between XBAPs and WPF/E applications. At first glance, they are both browser based solutions, so I was wondering about what the potential catch was. If you (the reader) have/know of any more please let me know and I will gladly update this posting. At this point, this is a list of some of the core items I've found:

• WPF/E Applications
  • Are cross-platform ready (Mac OS X and Windows)
  • Do not require the client to have the .NET 3.0 runtime. Instead, WPF/E applications run within a browser plugin.
  • Do not support code-behind
  • Rely on JavaScript


• XBAPs
  • Require the client to have the .NET 3.0 runtime components installed.
  • Are not cross-platform enabled. They will only run on Windows machines.
  • Support code-behind
  • Must run within IE (or use the IETab plugin for Firefox)

In my personal opinion, In general, I intend to use the technologies in the following environments:

WPF	XBAPs	WPF/E
Desktop solutions	Intranet Applications	Internet Applications
	Organization specific gadgets	General purpose gadgets

In general, WPF/E provides a more portable solution while currently sacrificing some of the functionality that XBAPs provide. In addition, XBAPs provide a slightly better developer experience simply because debugging JavaScript code can be somewhat tedious in comparison to debugging some code-behind pages.

How do you intend to use these technologies? I look forward to your comments.

Misc - Major Discovery!

According to the Superhero Personality Quiz I am Spider-Man!

Spider-Man 80% Superman 65% Hulk 60% Batman 50% Robin 50% The Flash 45% Green Lantern 45% Iron Man 45%

You are intelligent, witty, a bit geeky and have great power and responsibility.

I won't count this as my post per week :)

WPF - How to distinguish a Grid from a Table

Recently, while perusing the WPF reference documentation, I noticed that WPF provides both a Grid and a Table control. I was very interested in comparing and contrasting the two as initially, I believed the two were almost synonymous. However, neither control provides the complete functionality of the other. This posting will help you learn how to distinguish between a Grid and a Table. Alot of this information is available from the Grid definition page on MSDN.

A Grid provides the following features over the Table:

• Element can be inserted by row and column indexes.
• Content can be layered within a single cell.
• Children can be relatively positioned to an upper-left corner of a cell

A Table provides the following features over the Grid:

• Built-in support for paging
• Built-in support for table headers
• Built-in support for table footers.

Essentially, a Grid is used for Layout and a Table is used Data. If you know of other differences, please post them in the comments and I will be glad to update this post.