Great SL Competency Test Part 2 (Answer)

businesswoman pressing a button 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.

EditTemplateNext, 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

ToNormal 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

ShowTimeline 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

Scale 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

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Blend, Community, Patterns & Skills, Styles and Templates and tagged , . Bookmark the permalink.

5 Responses to Great SL Competency Test Part 2 (Answer)

  1. Kylerrr says:

    Hi!
    Once I made a short video about styling a WPF button in blend. The only difference is that I used triggers instead of states, but now WPF supports states exacly like SL.

    If you have pre-defined resources (brushes, fontfamily, fonsize) and an exact idea about your design, a complete button styling takes less than 3 minutes. I you are interested you can watch it here in 720p: http://www.youtube.com/watch?v=G0OA-rkUgfc

  2. It had been really useful. thank you for sharing this. I am going to share it with my friends. Thank you

  3. @Luis Antonio Soler
    Depends on whether you are, as I am, changing the entire look of the button. Since I don’t want any of the parts of the button, and am creating a new look and feel (round button with two elipses and a text block; I’m afraid I disagree.

  4. Luis Antonio Soler says:

    I think that the solution more closed to complete the task in less time is on Blend Edit Template->Edit a Copy, and modify the states.

  5. Pingback: DotNetShoutout

Leave a Reply

Your email address will not be published.