Microsoft Surface Lab #2: Surface Controls

Transcription

1 CS320 Tangible User Interface Wellesley College Fall 2013 Microsoft Surface Lab #2: Surface Controls Surface Controls As we discussed in class the Microsoft Surface was designed to integrate easily with WPF in terms of input events (where the most basic level of Surface input is Contact events including ContactDown, ContactUp, and ContactChanged) and user interface controls so that almost every Surface control has a direct WPF equivalent. Surface controls include: SurfaceWindow SurfaceButton SurfaceToggleButton SurfaceCheckBox SurfaceRadioButton SurfaceSlider SurfaceScrollViewer SurfaceListBox SurfaceInkCanvas ScatterView SurfaceTextBox SurfacePasswordBox SurfaceMenu and SurfaceContextMenu SurfaceLibraryContainer, SurfaceLibraryContainerBarView, SurfaceLibraryContainerStackView SurfaceDragDrop ElementMenuItems A detailed description and sample code for each of these controls is available in Chapter 5 of Developing for the Microsoft Surface and online in the MSDN library. Task 1: working with basic controls Open SurfaceText1 in Visual C# Express. This sample application was developed to illustrate the use of several basic Surface controls. Open the Microsoft Surface Simulator, then run the application and explore its use. Stop the debugging. Open SurfaceWindow1.xaml. What is the child element of SurfaceWindow? Open the xaml file, what controls are used in this application, to what events they respond? Fill in the following table:

2 Surface Control (type and name) e.g. SurfaceButton button1 Event Handler OnClick Modify the xaml code so that when the SurfaceButton is selected from the list, three vertically stacked SurfaceButtons appear. In the xaml file, add an event handler for each SurfaceButton so that clicking each of the buttons result in a different response. In the cs file implement the event handlers. Your event handlers should implement the following functionality: changing the color of a button s background, changing a button s text, and displaying a notification message. Task 2: Tag Visualization and Tag Visualizer 1) On the Project menu in Visual C# click Add New Item. In the Categories list, click Surface. In the Templates list, Click TagVisualization (WPF). Name the TagVisualization object. A new TagVisualization layout file (i.e. xaml) is created with an accompanying code file (i.e. cs). 2) Modify the TagVisualization xaml file: Add Height = 96 and Width = 150 as properties, add a Label to the Grid Object. Set Basic as the default content of the label, name the label VisualizationLabel. 3) Modify the TagVisualization.cs file: Add a new public method called UpdateVisualization that accepts a string as an argument. The method displays the string as the content of VisualizationLabel. 4) Open SurfaceText1.xaml. Add a Tag Visualizer element to the SurfaceWindow. The Tag Visualizer should contain the Grid element. Add two TagVisualizer definitions, each specifies a particular tag value. For each tag value specify a Source (a xaml file to be displayed) and an event handler for the VisualizationCreated event. When you are finished your xaml file should look like this:

3 5) Open SurfaceText1.xaml.cs and create two methods corresponding to each event handler specified in the TagVisuailzation definitions (in SurfaceText1.xaml). Your event handling methods should have two parameters: object sender, and TagVisualizationEventArgs e. Your complete methods should be similar to the following code Now run the program using the Simulator. Use the tag input tool to test your application. You can set the value of the tag input to 0xc1 and to 0xc2. Close the project when you are done. Task 3: Working with Scatter View One of the rich and most commonly used Surface control is the ScatterView Control. Items that are added to the scatter view control are automatically enabled for advanced manipulations such as dragging, rotating, and resizing. To explore ScatterView, open the project MyFirstSurfaceApplication. Open SurfaceWindow.xaml. Scroll through the xaml file until you locate the ScatterView tag with the Name property set to My Photos. You will see that in this tag we use a template for displaying images from a data bound collection. Data binding connects data to specific controls. Here the Microsoft Surface SDK will automatically create a separate ScatterViewItem for each image in the bound collection and add of the items to the ScatterView.

4 Open the SurfaceWindow1.xaml.cs file. In the constructor for the SurfaceWindow1 class you can see the following instruction. This instruction binds the photo files collection to ScatterView, generates the individual ScatterViewItems and adds them to the ScatterView. For this instruction to work correctly you must verify the string photosfiles is set to a valid path. Verify the path and then uncomment this instruction and then run the application. Take some time to try and move the images around. Stop the application and comment back this instruction. Next, we are going to manually create ScatterViewItems and add an Image object into the ScatterViewItem. First, still in the constructor for the SurfaceWindow1 class find the following instruction and uncomment it. Then find the CreateScatterViewItems method which is located further on in the SurfaceWindow1.xaml.cs file. In this method we are explicitly creating ScatterViewItems and adding Image objects into the ScatterViewItems. We also set the border brush color and thickness of each ScatterViewItem. Study the following code and then run the application.

5 Explore other properties of ScatterViewItems. Modify the method so that all ScatterViewItems will appear in a pile in the center of the surface screen (the dimensions of the surface screen are 1024x768). What property do you need to change? The last two instructions in the CreateScatterViewItems method add two event listeners to ScatterViewItems. Next, add two methods to the this file that implements the corresponding event handlers so that the color of a ScatterViewItem changes to red when the item is activated and changes back to beige when the item is deactivated. Each of these methods takes two arguments: object sender and RoutedEventArgs e.