Jaa

Follow The Pointer

  • Artikkeli

Home > Samples and Tutorials Gallery - Expression Blend > Follow the pointer

 

Download the sample project files for the RC build of Expression Blend

Follow The Pointer

This sample demonstrates how to make a user interface element follow the mouse pointer around the application window in Microsoft® Expression Blend™. The code that moves the element is contained in an event handler in the code-behind file, which is executed each time the application window is rendered. This is a very efficient technique for performing your own custom animation effects.

The finished project

The finished project

This sample highlights the following:

  • Using the Rendering event of the System.Windows.Media.CompositionTarget class, which represents the display surface of your application
  • Referencing Extensible Application Markup Language (XAML) elements from code
  • Using the System.Windows.Media.TranslateTransform class to move a UI element
  • Using the System.Diagnostics.Stopwatch class to determine how far to move the UI element

In Action

To see the Follow The Pointer sample in action, open the sample in Expression Blend by using the following steps:

  1. Download the sample project from FollowThePointer.zip.
  2. Open the project in Expression Blend.
  3. Press F5 to run the sample.

After the sample runs, move the mouse pointer within the application window and notice how the MovableControl object springs toward the pointer with a harmonic motion. Increasing the Spring strength slider increases the attraction of the MovableControl object to the mouse pointer, and increasing the Damping slider reduces the number of oscillations before the MovableControl object comes to rest. The Size slider controls the size of the MovableControl object. The Content text box sets the text that is displayed in the MovableControl object.

You can also choose whether the UI displays a portion of the source code from the code-behind file (Window1.xaml.cs) in a FlowDocumentScrollViewer control in the background. The scroll bars of the FlowDocumentScrollViewer control are configured not to be displayed, but when the control has keyboard focus, you can use the arrow keys to scroll through the code.

UX

If you use the sample application yourself (rather than watching it over the shoulder of someone else) you will get the sensation of interacting with something "springy". In the real world, pulling on a spring that is attached to an object causes the spring to stretch until the contracting force begins to steadily accelerate the object toward your hand. If the object accelerates sufficiently, it will overshoot the end of the spring in your hand and will begin to stretch the spring out again in the opposite direction. The object will lose energy with each oscillation, depending on how much the moving object is damped. This is the behavior that is reflected in the Follow The Pointer sample.

Software

The source code in the Window1.xaml.cs code-behind file includes a method that is registered to handle the CompositionTarget.Rendering event. CompositionTarget is a static class that, simplistically speaking, represents the display surface on which your application is being drawn. The Rendering event is raised (and handled by the CompositionTarget_Rendering method in the Window1.xaml.cs file) each time the application's window is drawn. Actions that cause the application window to be redrawn include mouse movement over the display surface, control movement (such as the slider bars), and the resulting movement of the MovableControl object.

A Stopwatch is used to ensure that the harmonic motion is time-based and will remain essentially the same on different hardware.

For more information about how the sample works, see the comments in the code-behind file (Window1.xaml.cs).

Where to go from here

  • If you prefer for the MovableControl object to be centered on the mouse pointer, you can do this by adding a new line of code. In Window1.xaml.cs, inside the CompositionTarget_Rendering method, paste the following line of code so that it becomes the second line of code in the method:

         mousePos.Offset(this.MovableControl.ActualWidth / -2, this.MovableControl.ActualHeight / -2);

  • If you like the look of the MovableControl object, you can create a control template by using MovableControl as a base, or you can create a brush resource that is based on one of the brushes that was used to paint MovableControl. For more information, see the sections "Styles and templates", "Managing resources", and "Brush resources" in the Expression Blend User Guide (F1).

  • Experiment with the formula and its parameters in the code to see what new and interesting behavior you can get.

  • Look up another formula that involves motion over time, and implement that formula by using the same techniques that you have seen here.

  • Learn about how to make a user interface element follow the mouse pointer around the screen, by looking at the Follow the Keyboard sample.

Comments

  • Anonymous
    March 04, 2006
    To view a sample or tutorial, click on one of thumbnails or links below. Some samples also have supporting...

  • Anonymous
    March 09, 2009
    Hello. Seems the download links are dead, any chance of a re-link? A.

  • Anonymous
    April 28, 2011
    hiii, the download is broken... re-link this pleaaaaaaaaaaaaaaaaase post in 4shared, megaupload anyway.. thank you

  • Anonymous
    June 09, 2011
    This seems like a great effect. Can someone fix the link?