Designer Silverlight

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

Over at Project Rosetta they have the post I’ve been waiting for: How to use mathematics to enhance user experiences.

They basically walk step by step through how we can use mathematics to create easing equations and pseudo-3D effects. They then use these principles to create the following application. Click and drag on a name to spin the interface.

Awesome.

I apologize for my extended sabbatical here… I’ve recently gotten married, which has thrown a bit of a wrench in my blogging commitment.

I’ll start posting again with some regularity in about three weeks, at which point I will also  start working on my first line-of-business Silverlight project. Until then…

I swear… I’ll get back to the tutorials any day now!

 By in the meantime, I’m doing some form redesign and I wanted to praise to the heavesn Luke Wroblewski, whose many blog posts on form usability is some of the best, most practical stuff I’ve ever seen.

Stuff I’m reading and using right now:

• Guide for aligning input fields and labels - Left align? Right align? Top align? Get some guidance here.
• Best Practices for Web Form Design - a PDF on “the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.”

UPDATE: It turns out that Luke was at MIX… a tragedy that I’m discovering this just now. You can see his panel “The Business Value of Design” or read more about it at his website.

I wanted to take a moment to apologize to everyone to whom I promised more Wii goodness on my blog. I couldn’t get internet access from my hotel last night (despite a 45 minute conversation with a tech support guy). And, in a somewhat ironic turn of events, the internet access here at MIX08 is pretty miserable.

 As in… I have trouble even pulling my own blog up half the time.

 So I’ve decided to wait until I get back to Salt Lake City before I try to finish all my posts.

Put me on your RSS feed… I’ll be going nuts on the blog over the next week putting up all the WPF/Wiimote stuff, catching up on my normal WPF tutorials and starting to dive into Silverlight.

And, because I know that my wonderful fiance is reading this (as well as picking me up from the airport)… I’ll see you this evening, lovely.

In a development certain to inspire renewed confidence in the company that has shown us technological marvel after marvel, Apple has filed a patent elucidating the innovative use of fingertips to drive interaction between people and electronic devices.

“It’s something we feel that Apple is uniquely positioned to bring to the table, given our overwhelming superiority with all technology… at least as percieved by our more rabid devotees” said Apple CEO Steve Jobs. “This patent will help us corner the market on interactive innovation or, as I like to call it, Appleactive iMacopodovation. TM.”

Under the patent filing, Apple has been granted the exclusive right to develop applications responding to input stemming from the distal phalanges. The company has not been forthcoming with specifics of any application development this may open for them, but the excitement seemed barely containable.

Steve Jobs shows the latest innovation from Apple… fingertips

Read the rest of this entry »