Download code for this sample

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.

I’ve been too quiet lately and I need to dump some links so I don’t forget about them:

• SVLite Effects from Cellbi – Amazing work with Silverlight… play around with their Carousel project in particular. Awesome.
• Silverlight.FX – From Nikhil Kothari, a very useful FX library with about a dozen kinds of transitions and effects. Download library here. View samples here.
• Silverlight Slider Solutions – From Tim Heuer, if you’re having trouble with the Silverlight slider, this is probably a good place for you.
• Project Rosetta – Familiar with Flash but looking to get into Silverlight? This is your place. It just started up, but design god Rick Barraza is a part of the group so it promises great things.
• Getting all your controls to have the same width in an Items Control – there really is no good way of summarizing what Josh Smith is doing here, but he’s using the fabulous Grid.IsSharedSizeScope property, which is not well known but is fantastically useful for aligning items (especially in WPF forms).
• Dragging, Docking and Expanding Panels in Silverlight Part 1, Part 2, Part 3 – Martin Grayson has a great series of posts on some more advanced interactions possible with Silverlight.

My previous post is the first one that I’ve used Windows Live Writer to create. I changed from the default WordPress blog post composer because Live Writer gives me the following features:

• I don’t have to upload my images file-by-file… I just use OneNote to screen grab and then copy and paste from OneNote into Live Writer and Live Writer just uploads everything to my site. My posts are pretty image heavy, so I probably saved about 30 minutes of time with this feature alone.
• The Paste from Visual Studio plug-in lets me… well… paste from Visual Studio and maintain the colors and formatting. You’ll probably see more code integrated into my posts, since I hate putting in code that isn’t color coordinated. Time saved: about 15 minutes
• I don’t lose my posts to some web or Javascript weirdness. The posts I put up take, on average, 2 hours to create. Losing my work is devastating.
• Super simple interface. I don’t know what team at Microsoft was working on this, but I wouldn’t be surprised if they took their cues from the OneNote team. Huge Interaction Designer props for harnessing the power of simplicity and elegance. I never have to ask myself how to do something… it is transparent. Now, maybe I’m not trying to do enough complex stuff, but I’m ok with that. Way to design 90% of the audience rather than agonize over that last 10%.

Go get it.

This is little more than a pointer to a fantastic post by Mike over at Mike’s Code Blog, but I figured it was worth passing along. Mike’s post is focused on finding which item was double clicked, while mine is on determining when the double clicking happened on an item at all.

 I’ve recently come up against a problem in which we were attaching a doubleclick event to our listview, only to discover it fires when we did something like click on the scrollbar quickly. Since we only wanted it to fire when we were double clicking on the listview item, we had to come up with some way of figuring out where in the listview the user had clicked.

Mike’s code made it easy… I’m reproducing our permutation of it here:

First, we put our event pointer in the XAML like so:

<ListView MouseDoubleClick=”ListViewDoubleClick”>

Then we put this in the code behind:

protected void ListView_MouseDoubleClick(object sender, RoutedEventArgs e)
{
     //grab the original element that was doubleclicked on and search from child to parent until
    //you find either a ListViewItem or the top of the tree
    DependencyObject originalSource = (DependencyObject)e.OriginalSource;
    while ((originalSource != null) && !(originalSource is ListViewItem))Â
     {
          originalSource = VisualTreeHelper.GetParent(originalSource);Â
     }
       //if it didn’t find a ListViewItem anywhere in the hierarch, it’s because the user
      //didn’t click on one. Therefore, if the variable isn’t null, run the code
      if (originalSource != null)
      {
         //code here
      }
} 

That’s it!

You can now check out all the MIX sessions, online.

 I attended the following sessions:

Bringing Your Data to Life with Windows Presentation Foundation - Anson Tsao

This is a great crash course to data binding in WPF.

Building Rich Internet Applications using Microsoft Silverlight Part 1 - Mike Harsh and Joe Stegman

Building Rich Internet Application using Microsoft Silverlight Part 2 – Mike Harsh

Good walkthrough  on building a basic Silverlight 2.0 application. You can get the files that accompany this talk at Mike Harsh’s blog. While attending these sessions, Mike and Joe repeatedly reccomended…

Creating Rich Dynamic User Interfaces with Silverlight 2 Controls – Karen Corby

This was possibly the most valuable session I attended. Karen Corby walks us through how to create custom controls in Silverlight. The result is mind-blowingly powerful… and it seemed not to difficult. I hesitate on saying that simply because I haven’t done it myself yet. I’m going to go back over it and walk myself through the whole thing with the source code that she has posted.

Nerd + Art : 10 Code Snippets to Empower Your Inner Artist – Nathan Dunlap and Robby Ingebretsen

Two of the guys from Identity Mine walk through some great code snippets that allow designers a little more freedom to do the work they need to do. You can get the Code Snippet Visual Studio 2008 installer file and some of the samples used in the talk from the Identity Mine website.

Developing Applications with Microsoft VirtualEarth - Chris Pendleton

Christ Pendleton walked us through integrating VirtualEarth into Internet applications. Pretty cool, although I’m not sure how much better than Google’s Maps/Earth API this is. It’s been a while since I’ve played with Google Maps, but I remember it being much easier than I thought it would be. Keep an eye on Chris’ blog, where he’ll be posting the code for the lab shortly (I’m told).

My brain is out of town while I’m working on our MIX Show Off Entry. In the meantime, I need to post some links so that I don’t forget them. I suppose you can use them too, if you want:

• Overriding (or adding to) default event handlers
• Custom Searching Through an Observable Collection
• More on filtering through an observable collection
• Scott Gu’s .Net 3.5 Client Product Roadmap – They’re adding GridViews! And DatePickers! And Ribbons!
• David Kelly on Using the Silverlight 2.0 XAML Grid Element
• David Kelly on Using the Silverlight 2.0 XAML Stackpanel Element
• Bea Costa’s Monster Post on Dragging and Dropping DataBound Elements
• Josh Smith says that designers should be learning Blend because it’s freaking awesome. Designers respond that, while he’s not wrong, there are bloody no good books or blogs on the topic.
• Older post on making a glossy look for WPF applications.
• Scott Gu’s Monster Post on Silverlight 2.0 and Blend.

You’ll notice that there is a little bit of focus on Silverlight 2.0 here… That’s because it’s awesome. Keep watching, I’ll start blogging on it as I get into it more and more.