Feed Icon  


  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics


Open Source Projects



The Hong Button

Posted in Avanade | WPF/E at Wednesday, February 7, 2007 10:41 AM Pacific Standard Time

Two collegues of mine at Avanade, Hong Tan and Greg Ferguson, did a demo of WPF for the students at UCI. For the demo they took the Kevin Button and modified it with pictures of Hong. They also created a javascript only version of the button to see how it compared to the WPF version. I took it a step further and created a WPF/E version of the Hong Button.

I made use of some of the new features in the Feb CTP like the downloader object, resizing, and  ActualWidth and ActualHeight properties. I also borrowed some of the code from the WPFEPad sample which has also been updated to use these features. However, this is a much simpler example than WPFEPad, so if you're interested in learning about the downloader object check out the javascript.

The reason for the download object in this case was that each of the images is around 34k. While that isn't very big, if you don't download them prior to running the aplet (what do we call a WPF/E application?) then you get a delay when you mouse over the polygons. I also found that if I just switched the Source of the main Image in the MouseEnter event that it would run slowly as well. So I ended up creating an array of states that each has an associate image. I then set the opacity to 1 for the active image and 0 for the inactive image. This seems to work pretty well and is pretty fast. For the reflection I just set the Source of the image to the Source of the active image.

One thing is for sure, the more WPF/E work I do, the better my javascript skills get. In digging through the WPFEPad example I found that pretty much all the code was done using javascript objects. So I followed that same design pattern and I think it makes the code much easier to use. Hopefully it is easy to read as well.  

Thursday, February 8, 2007 3:07:55 AM (Pacific Standard Time, UTC-08:00)
Nice work! It doesn't fill the browser window in Firefox like you want, however; I think that you might need to use absolute height and width rather than percentages.
Saturday, February 10, 2007 11:43:04 AM (Pacific Standard Time, UTC-08:00)
Nice job Hong. How about making it resizable? ;)
Comments are closed.