What a great first day at Mix.  After talking with so many people over e-mail and Twitter, it’s wonderful to finally put a name with a face.  Unfortunately, or fortunately, I haven’t hit the black jack tables, but that could only be a matter of time. 

Here’s what my session schedule is looking like for Wednesday:

9:00am – Keynote

11:30am – 12:45pm – either What’s New in Microsoft Silverlight 3 T14F Lando 4204 or Going Inside Microsoft Silverlight: Exploring the Core CLR T71M San Polo 3401

2:15pm – 3:30pm – Building Amazing Business Centric Applications with Microsoft Silverlight 3 T40F Lando 4204

4:00pm – 5:00pm – Principles of Microsoft Silverlight Animation T12F | Lando 4201 By: Jeff Paries

Finally, here are a couple pictures from MIX.  The first picture is of all the swag in the welcome kit and the second is a billboard of Bette Milder.  I had to take it because it is a testament to the art of airbrushing.  Do you really think her legs look that good?

*The first pictures is by aforonda.

The Visibility pattern is way of overriding the base Visibility of a control and adding a custom animation.  There are a couple ways of hiding a control on screen 1.) setting the Opacity to 0 or 2.) setting the Visibility of the object to Collapsed.  Depending on the situation, the latter is probably a preferred way of hiding an object because once collapsed, the space for that control is freed up.

A common problem I’ve run into when toggling the Visibility of an UserControl, is it “jumps” states.  Meaning there’s no transition between Visible and Collapsed.  The “jump” makes sense, because it’s like an on/off switch.  The problem is, I want a smooth transition between states, and the way to accomplish this is by implementing the below Visibility pattern on your UserControl.

Before getting into the code, I must point out, implementing this pattern does not greatly effect the developer/designer workflow.  As designer can open Expression Blend, create/tweak the hide and show animations and he/she doesn’t have to touch the code. 

XAML

In UserControl’s XAML, add two Storyboards, one for hiding the control and one for showing it.  The below Storyboards only animation Opacity; however you could also add animations for the ScaleX and ScaleY (doing this achieves the opening and closing windows effects in Vista).

C#

The below code blocks do the following:

• Register the hide and show animations to HideStoryboard and ShowStoryboard respectively,
• Overrides the base visibility,
• Adds an event VisibilityChanged – This event fires after the animation is complete.  This importance of this event can not be overstated.  If your hide/show animations are long, you will want to listen to this event before doing anything else.
• Finally, the ShowStoryboard setter has logic to register and unregister the Completed event.

There have been many times I’ve needed a simple/generic loading control for Silverlight.  After a few frustrating google searches resulting in nothing, I decided it was time to create my own.  Normally I love creating controls, but, in my mind, a loading control is something that I don’t want to devote much time to.  It’s usually a control that just says “Loading…” with the honest intent to come back and make something cool.  As projects go, time is against our side and the Loading control gets the shaft. 

So, below is the control and how it was created.  If nothing else, this will be the starting point for you to run with.  Enjoy!

This is what the control looks like in Expression Blend:

To download the XAML, click this link. (The XAML is too lengthy to paste in the post).

Finally, to make the animation run, you’ll need to modify the code behind to look similar to this code block:

Click the below image to see it working.

My good Silverlight buddy Jeff Paries has been working on some really exciting projects.  The two video projects he has worked on he’s used my VideoSlider control.  They are both pretty high profile Silverlight projects:

The Silverlight CES video player.  This video player broadcast Steve Ballmer live from CES.  You can see archived video from the CES.  Check it out.

The Olso site.  Jeff hand crafted the main navigation animations with Blend.  I must say they are kick ass.  If you click the Video section of the site you’ll be able to see the VideoSlider in action.

References

Some shameless promotion for Jeff.  He authored the Foundation Silverlight 2 Animation.

Implement the VideoSlider control

The other day I wanted to animate a clipping area.  The answer is to define the Clip property of an object with RectangleGeometry or EllipseGeometry and then animate properties on the geometry. 

The below example shows a RectangleGeometry clipping area being moved over an image.  In the MouseMove event, I am setting the values of RectangleGeometry’s TranslateTransform property.

The XAML

• The clipping area of the Image is defined within the <Image.Clip> property
• Values in the Rect attribute of the RectangleGeometry are PositionX, PositionY, Widht, Height.  In this case the clipping area is in the middle of the image
• A TranslateTransform is defined for the RectangleGeometry.Transform.  To make it easy to reference from the code, make sure to define a value for the x:Name attribute.

The Code

• In the MouseMove event reset the value for the Rect if the Left and Top values are not zero.
• Then set the values for the TranslateTransform.

The Example

http://www.85turns.com/silverlight/AnimateClippingGeometry.html