Designer WPF

In the intertest of the fact that my professional focus has shifted from WPF to Silverlight, I decided to move this blog and rename it.

Everything that was here is now at:

http://www.designersilverlight.com

I made the migration using this fantastic post on how to move a Wordpress blog to a new domain. So, update your RSS feeds and I’ll see you over there.

UPDATE: The presentation is online:

I gave a presentation on data visualization at Ignite Salt Lake last night, and I thought it went pretty well. (I wasn’t hiding my face and sneaking out of the theater afterward.)

Here are the slides from the night with my notes.

I Once Was Blind: Building an Information Visualization That Means Something

I’ll post video as soon as it becomes available.

Below are links to the visualizations that I referenced:

Slide 3 (overview): Visualization of the Stimulus Bill

Slide 5 (Ask a question, tell a story): Charles Minard’s info vis of Napoleon’s march

Slide 9 (Size Visualization Example): Edgar Allen Poe’s “The Raven” visualized with Wordle

Slide 11 (Color Visualization Example): Map of the Market – stock market visualization

Slide 13 (Location Visualization Example): Map of flights in the US in a 24 hour period. This actually uses color to indicate altitude (darker is higher, lighter is lower, but I didn’t have time to go into that in my talk.

Slide 15 (Network Visualization Example): My Facebook friends as graphed by Nexus Graphs

Slide 17 (Time Visualization Example): The Baby Name Voyager – an information visualization on when people name their babies what

Slides 18 – 20 (How Much Is a Trillion Dollars?): Visualization of a Trillion Dollars

Places to get data

• Amazon Web Services Data Sets – Including the human genome, DNA sequences, chemical databases, census information, DOT databases on transportation (aviation, highway, bike, maritime, etc)
• New York Times developer site: the NYT has easy APIs for articles, best sellers, campaign finance, user comments, congress, movie reviews, and the New York State Legislature
• Yahoo Developer Network – APIs for finance, traffic, weather, Flickr, Del.icio.us, and many others
• Twitter API documentation
• Bureau of Labor Statistics – Information on all sorts of economic statistics for the US
• FEC Data – public database for all political giving. WARNING: Very poorly kept, standards are obviously not a big deal to these guys

Visualizations I didn’t use, but that are still cool

Twitter tags during the Super Bowl

Google Heat Map of where users look when they get a Google search result (scroll down a bit)

Videos taken in and around Salt Lake City

Twitter network browser – this one is more fun to play with than it is useful

I will have no time to write real blog posts (I’m actually writing this during Robby Ingebretsen’s fantastic session: “Design Fundamentals for Developers”), but I will be updating on Twitter like a maniac. You can see my twitter feed here.

I’ll try to tweet something from every session I attend.

When are we going to get rid of Daylight Savings Time? It makes no sense at all.

Besides, then I’ll be able to sound like Grandpa Simpson when I’m older. “When I was your age, we had these great American traditions. We changed the time around just cause we wanted to and we put people with no dramatic experience on TV and called it ‘reality’. Oh, yeah, and we had TV… it was like a computer except you couldn’t really do anything except choose between the four things that were on at that exact moment. And the world didn’t revolve around you… if you missed the beginning of the show, tough beans!”

Mike Swanson has updated his Adobe Illustrator-to- XAML plug-in.

It now supports WPF and Silverlight conversions in addition to making the files smaller by getting rid of unneccessary precision. I tagged it with delicious, but this is important enough to earn its own post.

Devin over at devinsblog had a great idea after discovering that there is a Google Docs Twitter list of iPhone developers with over 500 iPhone developers on it. (How many tech buzzwords can I fit in a single sentence?)

So he set up a similar list for Silverlight/WPF developers. Everyone should sign up for it… it helps foster a nice sense of community.

By the way… my twitter is matthiasshapiro if anyone is intersted. Also, you should follow devinsblog if you’re not already. He puts up some good stuff.

In case there is any interest out there… Apress is selling their “Pro Silverlight 2 in C# 2008″ as an eBook for a measly $10.

A great deal that ends at midnight. Hurry.

Oh, and vote for me in the MIX 10K Challenge. I’m going to be a broken record about it for the next ten days.

I’ve been really quiet lately, largely because I’ve been working on updating my Silverlight projects so that they run again (after RCW killed my compatibility).

Updated Mac View Scroller for Silverlight

Updated Zooming Buttons

I’ve updated and uploaded all the project code for these files as well. I’m working on getting the Silverlight Color Picker back online, but I’ve been making some serious overhauls to it in the name of improvements.

Also soaking up my time, I’ve been playing around with Android development and I’ve started a new blog called Designer Android. If you’re interested in mobile development in general or Android development in particular, it might be worth your time.

I’m in the middle of trying to update my life to Silverlight RC0. Starting in a week or so, I’ll be trying to update my samples to RC0 and I’ll be creating new Silverlight samples in RC0.

I’m putting the color picker control on hold until after PDC so that everyone is on the same Silverlight page.

Thank you for your patience.

Download code for this sample (updated for RCW)

I was reading Mike Snow’s blog and he had a recent Silverlight tutorial on creating a Zooming toolbar. I looked at it and said to myself, “I think I can do that without code in Blend!” So here’s a tutorial on exactly that.

End product :

Big bonuses to this XAML-only method include:

• Much smoother animation
• Midway animation (if you fly over a button, it doesn’t need to animate all the way up before it starts to animate back down)
• Really low overhead
• Can be done and maintained entirely by a designer in Blend without any code

1) create a new Silverlight project in either Visual Studio 2008 or Blend 2.5.

2) In Blend, add a new folder for our images by right-clicking on the project and selecting “Add New Folder”

3) Pull in our images by right-clicking on our new folder and selecting “Add Existing Item…” Navigate to the images you want to use and select “OK” to bring them into the project.

4) Create the button to which you want to add the image and then double-click it in the Obejcts and Timeline pane so that it has a yellow outline around it.

5) Now, go to the image you want to insert (in the Project panel), right click on it and select “Insert”

OK… so now we have a button with an image in it. Now it’s time to make the sucker zoom.

6) Right click on the button and select “Edit Control Parts (Template) -> Edit a Copy…”

Name your custom Template and hit OK

7) In the “States” pane, you see a set of “CommonStates” (Normal, MouseOver, Pressed, and Disabled). Click on the MouseOver state and a red box will surround your composition, indicating that any changes made will be changes to the “Mouse Over” state, not to the default control.

Recording state:

8] Click on the highest level item in the template (in my case, it is a “Grid”) and go to the “Transform” section in the “Properties” pane and select the “Scale” transformation tab. Change the X and Y scales to “1.5″

If you run the project now, you’ll notice that we get a cool zoom in effect on the mouse over, but our zoom out when the mouse leaves the button is basically a snap back to the original size. Let’s fix that now.

9) Click on the the arrow icon in the MouseOver state in the States pane and select the “MouseOver -> Normal”

In the “Transition Duration” box, type “.2″

10) Extra Designer Happiness Bonus Step! – If you’d like to have a zoom effect that isn’t strictly linear, open up the timeline view with the button on the right hand of the state recording box (seen below).

Click and drag the keyframe (the light gray oval below) to the point you want it. I put mine at .3 seconds.

With the keyframe selected, you should see an “Easing” pane on the right. The default easing is linear (aka. no easing), but you can change the easing curve by just dragging the yellow dots. Here is the easing curve I’ve found works pretty well for my apps.

That’s it. Now you can just assign this template to a button and you’ll have this zooming functionality all set up.rcw_zooming_button