Aracılığıyla paylaş

Follow The Keyboard

  • Makale

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

 

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

Follow The Keyboard

This sample demonstrates how to make a user interface element move in Microsoft® Expression Blend™ by using the arrow keys. The code that moves the element is contained in a keyboard event handler in the code-behind file. A mouse event handler is also used to set keyboard focus to the movable element.

The finished project

The finished project

This sample highlights the following:

  • Using mouse events
  • Using keyboard events
  • Referencing Extensible Application Markup Language (XAML) elements from code
  • Using the System.Windows.Media.TranslateTransform class
  • Using a FlowDocumentScrollViewer control
  • Using the TabIndex property to improve accessibility

In Action

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

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

After the sample runs, the square, gold MovableControl object, labeled "WPF", has keyboard focus, which means that you can use the arrow keys to move the MovableControl object up, left, right, and down without first selecting it with the mouse. The Speed slider controls how far the MovableControl object moves for each key press. 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. In the sample, 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.

If you interact with either of the two sliders in the application, or with the text box or the check box, keyboard focus is taken away from the MovableControl object. To restore keyboard focus to the MovableControl object, click it or use the TAB key to move keyboard focus through all of the controls in the application until you return to the MovableControl object. The order in which you can tab through controls is determined by the TabIndex property of each control. You can view the TabIndex property in Expression Blend in the advanced section under Common Properties in the Properties panel when a control is selected under Objects and Timeline in the Interaction panel.

Software

The Follow The Keyboard sample contains a ContentControl element (named MovableControl) on which are set two properties that associate events with event handlers.

Note To view the properties of the MovableControl object in Expression Blend, select the MovableControl object under Objects and Timeline in the Interaction panel, and then click the Events button Events button in the Properties panel. Alternatively, you can view the XAML source code by right-clicking the MovableControl object under Objects and Timeline, and then clicking View XAML. Expression Blend switches from Design view to XAML view, and highlights the code for the selected control.

The properties in question are KeyDown and MouseDown, and the related events are handled by methods that are included in the code-behind file, Window1.xaml.cs. The MovableControl_MouseDown event handler sets keyboard focus to the MovableControl object. The MovableControl_KeyDown event handler is only invoked when MovableControl has keyboard focus, and it uses a render transform object to translate the control to a new location. The switch statement in this method needs to include a case for the TAB key being pressed, because otherwise keyboard focus does not proceed to the next control, which breaks accessibility.

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

Where to go from here

  • Learn about how to make a user interface element follow the mouse pointer around the screen, by looking at the Follow the Pointer sample.
  • 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).