Feed Icon  

Contact

  • 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

Tags

Open Source Projects

Archives

Ads

Previous Page Page 2 of 2 in the WPFE category(RSS)

The Hong Button

Posted in Avanade | WPF/E at Wednesday, 07 February 2007 10:41 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.  

WPF/E Feb CTP Updates

Posted in WPF/E at Friday, 02 February 2007 09:21 Pacific Standard Time

Check out What's New in the WPF/E February CTP (via Mike Harsh). There is quite a bit of new stuff there including keyboard support, cursor support, fullscreen support (no opacity though), a downloader object, and more. I just finished reading the documentation on the downloader object and it sounds like it will be very useful.

Plus the online SDK has been updated as well as the Quickstarts (via m jacobs). It's going to be a fun weekend. :)

WPF/E Cursor Support

Posted in WPF/E at Thursday, 01 February 2007 03:07 Pacific Standard Time

I read about the Feb CTP cursor support over in the WPF/E Google group and had to figure it out. I found this post about the Cursor support in WPF and it turns out you can now use the same syntax in WPF/E.

How to set the mouse cursor in one easy step: set the Cursor property. For example, this markup:

<Button Cursor="Help">Help</Button>

… sets the cursor to be the “Help” cursor, when the mouse is over the button.

Here is a quick sample that shows off setting the cursor to "None".

WPF/Expired

Posted in WPF/E at Wednesday, 31 January 2007 09:49 Pacific Standard Time

Just got this when I went to view a WPF/E enabled webpage (trying to figure out layering stuff and was going to view Mike Taulty's example).

I haven't found the download yet, but I'm looking.

Update: Shawn Wildermuth beat me to posting the question in the WPF/E forums (that guy is always a step ahead of me :) and here is the Microsoft response:

Yes, we are aware that this message has appeared. This is a result of a bug in our timebombing code (only affects Windows OS). You'll need to reset your clock to continue using WPF/E. We are working on getting an update out as soon as possible.

Ouch! I hope they fix this soon since it is going to crap out a couple of my sites.

Update2: Another post in the WPF/E forums annouces the release of the Feb CTP of WPF/E. Users can download it here, developers need to update their aghost.js file here.

Earlier today, you may have noticed your “WPF/E” December Community Technology Preview (CTP) control expired.  No worries though- we’ve just posted the February CTP for Windows and Mac to Microsoft's download center and updated the samples on the Channel 9 Playground to work with the new CTP.  Note that to get your samples working with the February CTP, you’ll need to change out the agHost.js file with the new one found here. Tomorrow we’ll update the website with details on what’s new in this release, and an updated SDK and samples will be available soon too.

So far I noticed that it has broken a few of my animations, but other than everything seems to be working. It will be interesting to see what was fixed.

The WPF/E Gear Keeps Turning

Posted in WPF/E at Thursday, 25 January 2007 09:19 Pacific Standard Time

First the SDK team created an article about generating reflections in WPF/E. Then today I read [via Mike Harsh] about Michael Schwarz extending the example to include an animation.  I also read in Mike's post about the WPF/E google group (joined!) and in the group I read Dave Campbell's post about extending the example further to roll the gear across the screen. I couldn't help myself and I took it one step further and gave the rolling motion a little twist so that it looks like the wheel accelerates and hits a wall.

This is done using a SplineDoubleKeyFrame, which allows you change how the keyframe is interpreted. I had no idea how this worked until I came across this post by Karsten where he demonstrates creating bouncing balls in WPF. I borrowed his SplineDoubleKeyFrame but when I applied it to the gear it started fast and then went slow and I wanted it to do the opposite. I didn't understand how the SplineKey worked but came across another post by Karsten where he gives you the code for the Bezier Time which is a WPF app that he wrote to better under stand the effects of the SplineKey. Unfortunately the app was written with one of the beta versions and no longer worked, but I was able to get it running after some rework (although one of the animations is broken still). Using that tool I was able to figure out how to invert the curve and get the effect that I wanted.

The SplineDoubleKeyFrame is definately the way to get the dog ears effect going, now I need to go read up on beziers and splines. :)

Download Gear.xaml

WPF/E + ASP.NET AJAX, Better Together

Posted in ASP.Net/Web Services | Avanade | WPF/E at Thursday, 25 January 2007 04:39 Pacific Standard Time

One of my side projects at work has been a social website for the SoCal solution developers. I decided the site would be a great chance to learn more about WPF/E as well as ASP.NET AJAX so I've been making heavy use of both on the site. One of the last version 1.0 features that I wanted to finish was the login page which was pretty ugly (until today). I was hoping to use a pure WPF/E solution for the login itself, but WPF/E doesn't support things like textboxes yet, so I had to use plain old HTML as well. I also tried to make use of dog ears in the animations and I think that I succeeded.

You can give it a try and see the animations in action (but you shouldn't be able to log in :). I'm planning on creating a demo version of the site that can be used for demos that won't have real people's info in it, but for now you'll just have to get back on the invalid login example. I built the buttons in notepad but I followed Lee's demonstration on how to create animated buttons in WPF and just tweaked it to use in WPF/E. I didn't complete the button down animations yet, but the mouseover animations work great.

For the dog ears effect of the text flying in and out I used my DoubleAnimationUsingKeyFrames technique from my previous post and just added a little bit of bounce to the animation. I think it works. For the AJAXish wait icon I downloaded an icon from this site, converted it to a PNG file, and then added a RotateTransform with an animation (using the CenterX and CenterY properties to make it spin).

Inside the site I've also used a lot of ASP.NET AJAX and WPF/E, but for now I'm going to keep that under wraps. But I will make a demo site soon. Let me know what you think of the login.

WPF/E CSModule Released

Posted in ASP.Net/Web Services | WPF/E at Thursday, 18 January 2007 04:27 Pacific Standard Time

I just posted my WPF/E CSModule that I created to display WPF/E content on Community Server blogs. You can download the module and the source code here. It will allow you to display multiple WPF/E items in a single post and puts links on the posts when they are viewed in a feed reader. The source code includes everything except my tests. You can view examples of the module in action here and here.

Dog Ears in WPF/E

Posted in WPF/E at Thursday, 18 January 2007 02:34 Pacific Standard Time

While working on some WPF/E stuff for a side project of mine, I came across this post by Karsten Januszewski (Note: Karsten's blog is a must read). I find it interesting that I seem to learn a lot about what you can do in WPF/E mostly by reading people's Xaml. I didn't event know that the Storyboard element had a Completed attribute or that there was such a thing as a TriggerActionCollection.

Anyhow, I was playing around with the code posted there and I was actually trying to acheive something like the cool animations that you will find in the Kevin's Zap Scroller. The zap scroller has a animation that flows and is very cool looking. It is the dog ears experience model as Kathy explains:

In the real world, we have physics. We have inertia. Things bounce and stretch and squash. We have follow through. Imagine a dog with long floppy ears sprinting for a frisbee. Now picture the dog coming to a screeching halt in front of the disc. What happens to the ears? They keep going. Then they "bounce" back. And it's a big part of what separates a good animator from an amateur.  

I knew what she was talking about because had already watched all the iPhone demos based on the advice of Walt who notes that while you watch those videos:

Then keep this is mind.

  • Every single UI trick
  • Each animation
  • Every single blended window
  • How they merge video, animation and 2D graphics
  • Every single feature in the user interface on the iPhone can be created today in WPF. 

WPF gives you the tools to build application that look and feel like these screenshots.

What are you waiting for?

Now I agree that we can build all those things in WPF, however, I've been struggling with the dog ears effect in WPF/E. It is probably just because I don't know enough about animations and physics, but that didn't stop me from trying. One of the things that I think will be needed to achieve the effect is Key Frames. Key Frames simplify things a lot when you're trying to move an object around and need to use different speeds, etc. So I started with the animation found at the beginning of this post where Hans (via Karsten) is moving a block around on the screen using multiple animations with javascript waits inbetween (see the post above for the code and xaml). However, we can achieve the same thing simply using Key Frames. So instead of three Storyboards in a TriggerActionCollection we get this:

 <Storyboard>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rectangle1" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:9" RepeatBehavior="Forever">
      <DoubleAnimationUsingKeyFrames.KeyFrames>
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:1" />
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:3" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:4" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:6" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:7" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:9" />
      </DoubleAnimationUsingKeyFrames.KeyFrames>
  </DoubleAnimationUsingKeyFrames>
 </Storyboard>

This will produce the following WPF/E animation (again, only on the site since my add-in doesn't work in the feeds):

Note how jerky the animation is. The square starts and stops instantly. Now we can get a little better just by adding in some more key frames that cause it to start and stop slower. This is a long, long way from an iPhone type dog-ear effect, but by using key frames we can start to move in that direction.

The xaml for this just adds in a few extra key frames and this gives it a little better animation. That is as far as I can take it today, but maybe you can take it farther and create something really cool by adding more key frames. Here is the final xaml.

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rectangle1" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:9" RepeatBehavior="Forever">
      <DoubleAnimationUsingKeyFrames.KeyFrames>
          <LinearDoubleKeyFrame Value="10" KeyTime="0:0:0.1" />
          <LinearDoubleKeyFrame Value="390" KeyTime="0:0:1" />
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:1.1" />
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:3" />
          <LinearDoubleKeyFrame Value="390" KeyTime="0:0:3.1" />
          <LinearDoubleKeyFrame Value="210" KeyTime="0:0:4" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:4.1" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:6" />
          <LinearDoubleKeyFrame Value="190" KeyTime="0:0:6.1" />
          <LinearDoubleKeyFrame Value="10" KeyTime="0:0:7" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:7.1" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:9" />
      </DoubleAnimationUsingKeyFrames.KeyFrames>
  </DoubleAnimationUsingKeyFrames>

Update: I upgraded my CSModule so that it will display multiple WPF/E files in a single post (before you only saw the red squae moving, now you should see a blue square as well).

WPF/E Reflections Tip

Posted in WPF/E at Wednesday, 17 January 2007 07:30 Pacific Standard Time

If you're doing WPF/E development, you should check out the WPF/E Developer Content Blog. On that blog there is a great post that explains how to add cool looking reflections using WPF/E. I've been doing a lot of WPF/E reflections lately and just wanted to a one tip which has helped me alot. Instead of adding the reflection to an Image, wrap your image (or whatever you're displaying) in another Canvas and then add a third canvas for your reflection. You can apply the scale transform and opacity mask to the third canvas and get the cool effect. The reason to do this is that you can add whatever you want to the top canvas and if you duplicate it in the bottom canvas you will get a full blown reflection. For instance see the below WPF/E (sorry, embedded WPF/E only shows up on the site, not the feed.)

Note: I'm displaying this inline in the post using a new CSModule that I wrote. If you're interested in it let me know and I'll document and release it.

This is a simple tip, but it has saved me a lot of time when I'm creating a reflection on a bunch of stuff....

Update: I upgraded my CSModule to include a link to a WPF/E loader page so that you can just click that if you're viewing my blog from a feed reader.

 Update2: Doh! I forgot to add one line of code that did the actual replacement in the feeds. Now it is really working. :)

My First WPF/E App

Posted in ASP.Net/Web Services | Avanade | WPF | WPF/E at Thursday, 14 December 2006 07:27 Pacific Standard Time

I've always thought that Flash was cool. When I was in college I purchased a copy of Macromedia studio at the academic price and tried to create some Flash animations for a website. However, I'm not a designer and the learning curve was too much for me at the time, so Flash didn't stick with me.

A couple of projects back I spent a lot of time with WPF since the client portion of the application was going to be built with WPF. Armed with a basic knowledge of WPF, I thought I would give WPF/E a try. One of the big advantages of WPF/E is that if you like what someone else has done you can just take a look at their XAML. So to get started on my WPF/E project I took a look at the WPF/E Egg Timer (via Tim) and the WPF Blog's Header. You can download the XAML and the JavaScript for both to see how they work. I also read through this article on getting started with WPF/E which includes IIS configuration information.

One of the projects that I've been working on in my spare time is a social website for the Avanade solution developers in Southern California. So far I don't have much to show except a cool url and now a very simple WPF/E animation. You can check it out at http://wsup.la.

It is just a place holder for now, but it was still fun to create. In addition to the links above, I also used:

Since WPF/E is so easy to create (and edit) I'm guessing we will be seeing a lot of it in the near future.

Previous Page Page 2 of 2 in the WPFE category(RSS)