Great SL Competency Test Part 2 (Answer)

The task: Create a custom button that has non-standard visual behavior when you hover over it, and when you click it but which otherwise acts exactly like a button.

The idea was to be able to do this in under an hour.  This posting will review one solution.

Doing this is frighteningly difficult in Visual Studio and absurdly easy in Expression Blend 4 – it must be easy; I learned  how to do it and Blend scares the willies out of me (see Why Developers Should, Must, Do Care About The New Expression Blend )

To get started, open Expression Blend 4 and create a new project.

Drag a button from the toolbox onto the designer, center it, and set its size to 75 by 75. Pay no attention to how ugly that is.

Next, right click on the button in the Ojbects and Timelines window and choose Edit Template->Create Empty. You’ll be prompted for a name, the default settings are all fine.

Hey! Presto! Your are now in the template editor.  Note that you have a grid that is 75×75.  Drag an ellipse onto that grid and set its width and height to 75.  If you’d like, set the fill to a radial graident, and to be really fancy add a second ellipse, 5×5 to the upper left hand quadrant, providing a “light source” for the 3-d(ish) button.

Add a TextBlock over the larger ellipse, center it and set its Text to Click Me.  Set the foreground color to White and the font and font size to fit cleanly (I used Segoe UI at 8.25).

Setting the States

Key to setting the visual behavior is the set of Visual States.  The ones we care about are Normal, MouseOver and Pressed.

Normal

We won’t be making any transforms for Normal, but we do want to set it so that returning from any other state to Normal doesn’t “snap” back to the Normal state but eases into it. To do so, click on the Add Transition button and choose *->Normal (as shown in the figure).  Then set the transition to 0.3s.

The effect of setting this is that whatever state you were in, as you move to normal the change will be spread out over 1/3 of a second.

MouseOver

For MouseOver show the timeline and then click on the MouseOver state to turn on recording.

Set a keyframe at the current state (normal).  Then click on 1 second (the line will turn yellow) and you are ready to set the transformations that should occur when the cursor is over the mouse.

Click on ellipse, ellipse1 and ButtonText and all three will highlight.  Next, move to the transforms

Click on Scale and set the x and y scale to 1.5 (150%).  This will cause all three items to scale up.  Click the play button on the timeline and you can see the change animated.

The lightspot has to move however, so make sure the timeline is on the 1 second mark, and click on elliipse1 so that it alone is lit. Then use the pointer control to move the lightspot up and away from the newly enlarged text.

That’s it, you’ve animated the visual state for MouseOver.

Pressed

When the button is Pressed (clicked) we’ll want it to spin 45 degrees and shrink away from the curosr.  Repeat the steps that you did for MouseOver, but set the scale for x and y to 0.8.  Next, click on the Text and use the Rotate transform (setting the value to 45).  Finally, click on ellipse1 alone and use the pointer to move it above the now twisted text, keeping its relative position from the starting point.  Use the Play button to see the animation and ensure the light spot is moving correctly.

Code In Visual Studio

Save the application in Blend and open it in Visual Studio.  In the code behind add the click event handler,

public partial class MainPage
{
    public MainPage()
    {
     InitializeComponent();
        TestButton.Click += TestButtonClick;
    }

    void TestButtonClick(object sender, RoutedEventArgs e)
    {
        MessageBox.Show( "You clicked the button!" );
    }
}

Run the application.

Scoring:

Used templates  30
Used Blend          10
Used New Template based on Button  20
Used Transforms  20
Used Transition timing  10
Works overall  10