This sample shows how to:

• Disable keyboard input.
  
  
• Handle mouse and touch input.

This sample shows how to use the following Core Interaction Framework state machines:

• ScrollViewerStateMachine
  
  
• ListBoxStateMachine
  
  
• ScrollBarStateMachine
  
  
• ButtonStateMachine
  
  

It also demonstrates the following animations:

• Scroll bar thumb
  
  
• List box
  
  
• Scroll bar slide and fade
  
  
• Item and button glow and grow
  
  

The key classes from the Core Interaction Framework are UIController and UIElementStateMachine. The key classes from the XNA Framework are Game, GameComponentCollection, and DrawableGameComponent. The key class of the Cloth sample is the UIElement class, which derives from DrawableGameComponent and encapsulates a UIElementStateMachine object.

This sample shows how to:

• Use the Presentation layer to create a user interface.
  
  
• Use C# code to add logic to event handlers.
  
  
• Use Microsoft Surface versions of button, check box, and slider controls to accept touch input.
  
  
• Respond to events that the Microsoft Surface controls generate.
  
  
• Use localization for one or more supported languages.
  
  

You can add extra controls to this sample application by using Microsoft Expression Blend 2. You can also use Expression Blend 2 to view the XAML and C# code.
 

• Parse Microsoft Surface contacts and how to access Microsoft Surface contact attributes.
  
  
• Track multiple contacts, sort them, and render information that is based on those contacts.
  
  
• Use multiple classes to represent groups of user interface elements. You can use multiple classes in this way by including a user control as a child element of another user interface element. The control and its elements are packaged separately, so the user control is versatile and modular.
  
  
• Read data from a Contact object. Contacts have properties that you can directly access. The Data Visualizer application reads the X and Y positions of contacts and uses that information to position corresponding ellipses.
  
  
• Update user interface elements that are relative to contacts. User interface elements (UIElement) in the Data Visualizer application are positioned by using data that the application gets from contacts. The application updates ellipses in relation to contact position and removes ellipses from rendering when a contact is removed from the Microsoft Surface screen. This is also true of the bounding rectangles if that option is selected.

This sample shows how to:

• Display a notification immediately.
  
  
• Display a notification when your application is not in the foreground.
  
  
• Set the level of the notification, which dictates how long it is displayed on the screen.

This sample application shows how to:

• Access the Presentation layer of the Microsoft Surface SDK to build multitouch applications.
  
  
• Use routed events to track contacts.
  
  
• Use SurfaceUserControl to create touch sensitive, reusable custom controls.
  
  
• Link event handlers to user interface elements. The Paddle Ball application uses Microsoft Windows Presentation Foundation (WPF) to capture contact information. Each paddle handles the ContactUp, ContactDown, and ContactChanged events. This functionality is defined in the XAML file.
  
  
• Capture contacts. Capturing contacts is important to connect individual contacts to a specified user interface element. When the application captures a contact, it sends routed events to the user interface element that captured the contact. The paddle then receives all relevant contact messages even if the contact moves off of the paddle.
  
  
• Use captured contacts inside event handlers. A captured contact raises a ContactChanged event and the application updates the paddle's position.

This sample shows how to use the SurfaceInkCanvas control to:

• Render the path taken by a moving contact.
  
  
• Lay a SurfaceInkCanvas control over a photo or image so you can render digital ink over the content.
  
  
• Change the height and width of the ink stroke based on the size of the contact as its physical area changes over time.
  
  
• Record strokes and play them back over time.
  
  
• Produce a stroke of constant thickness.
  
  
• Switch between drawing, manipulating, and erasing modes.

This sample application demonstrates how to:

• Use the TryGetRawImage and UpdateRawImage APIs.
  
  
• Use the Texture2D and SpriteBatch methods to render normalized raw images.
  
  

You can retrieve two types of images by using the RawImage APIs:

• A binarized image is 1 bit per pixel, so it is very compact. A binarized image is more useful to recognize objects than a normalized image.
  
  
• A normalized image is 8 bits per pixel. A normalized image is useful for rendering inside the XNA framework.
  
  

This sample application captures every frame of RawImage, scales the image, and flips the image vertically before it renders the image. The image is flipped vertically so it does not obscure an image from behind a contact.
 

This sample application demonstrates how to:

• Load items into a ScatterView or SurfaceListBox control.
  
  
• Turn off selected manipulations by using the AllowedManipulations property and have flexibility to decide how the user can interact with the ScatterView controls.
  
  
• Use the large number of features that are included with the ScatterView and SufaceListBox controls. These features include manipulations such as Flick, Rotate, and Move and predefined VisualEffects.
  
  
• Use the ManipulationCompleted event to evaluate the application's state after a ScatterViewItem has been manipulated.
  
  
• Use a non-rectangular ScatterViewItem.
  
  
• Restyle a ScatterViewItem to use a custom shadow shape.
  
  
• Apply custom visuals to a ScatterViewItem control.
  
  
• Animate a ScatterViewItem control.
  
  
• Combine the content of multiple ScatterViewItem objects into one larger ScatterViewItem object.
  
  
• Detect when two ScatterViewItem objects are adjacent.

This sample shows how to:

• Drag elements out of a list.
  
  
• Drag elements into a ScatterView control.
  
  
• Use a LibraryStack control that users can flick and drag items into.
  
  
• Use a LibraryStack control to implement a checkout mechanism.
  
  
• Use an on-screen keyboard for text input. Place a 0xC0 tag on the main ScatterView object to open a password entry TagVisualization, and then touch the text box to open the keyboard. For more information about the keyboard and keypad, see Keyboard and Numeric Keypad.
  
  
• Move items between ScatterView controls that are siblings to or parents or children of each other.
  
  
• Use the TagVisualizer control to recognize tagged objects.
  
  
• Create a continuously scrolling list. You can scroll the content forever, and the list items appear to loop around from the end of the list to the front.
  
  

You can drag items, one or more at a time, to the gray canvas from the list. You can also resize, rotate, or move the ScatterViewItem controls.
 

This sample shows how to:

• Use the TagVisualizer control to recognize tagged objects.
  
  
• Make UI elements react when tagged objects move over them. This behavior works regardless of whether the tagged object moves over the UI element, or the UI element moves under the tagged object.
  
  
• Make TagVisualization controls react when they move over other UI elements.
  
  
• Encapsulate the above functionality in a reusable, XAML-friendly class that's portable between applications.
  
  

You can place any tagged object on the application, which will display a red "glow" visualization around the tag. When the tagged object moves over one of the UI elements in the application, the visualization reacts (becomes smaller and partially transparent), as does the UI element (which shows a red highlight).
 

This sample shows how to:

• Track the relative movements of a group of contacts.
  
  
• Translate, rotate and scale a user interface object by tracking contacts over the object.
  
  
• Apply inertia processing to show a user interface object sliding across the screen from being flicked by the user.
  
  
• Resize user interface objects by stretching them with two fingers.
  
  

This sample implements behavior that is similar to the ScatterView control but in an XNA application.