Touch reactive sample - Bubbles

As we ramp up Ultrabook devices worldwide and prepare for the launch of Windows* 8, I set about learning what the best resources are for creating compelling applications for these latest technologies. While there is plenty of documentation and resources for developing for the Windows 8 UI, there are thousands of Windows 7 applications that are fully compatible with Windows 8 Desktop. In this article, I show you how to use touch capabilities in your software. And if you're like me, new to XAML/C#, you will find some useful resources to get started. For my first sample, I decided to start very simply and just create bubbles on the screen as I touch it. I also want to burst those bubbles once I touch them again. Let’s see how to it.

Touch x Mouse

For Windows 8, on systems enabled with a touch screen, desktop applications are able to react to touch like they react to mouse clicks natively, due to operating system features. However, this is a compatibility modea touch point and a mouse click are different structures. A touch point assumes an average fingertip area as one single press or click, which the mouse mode compatibility is prepared originally for a more specific point for the click. For many users, it takes some time to get used to touch screens. I’ve seen people pressing too hard, too soft, too quickly. A proper touch-oriented interface knows how to deal with these differences and reacts more forgivingly, giving the user a better experience. So even though chances are good that your application will work on Windows 8, it may be worth the time to update it, so your users happier and delighted with the experience. And as we will see next, it doesn’t take much.

XAML and C#

XAMLExtensible Application Markup Languageis a declarative markup language. It’s an XML-based language, created by Microsoft, where you can create UI elements to use in conjunction with other programming languages such as C# or Visual Basic* which create the logic, or the code-behind. XAML is a “human readable” language, and it’s very simple to get started. This link will show you how step-by-step. To develop for Windows 8, you will need Visual Studio* 12. Then select Visual C# – Windows – WPF Application. I’ve named my app Bubbles.

Canvas

The first thing you need to create is an area for your UI elements. After creating your application, if you look at your MainWindow.xaml file, you will see that after the definitions of the Window, there is a <Grid> area. This <Grid> establishes a layout for your elements as a Grid and relieves you of the responsibility to have to control the resizing and repainting of UI elements in your code, creating a consistent layout. However, for this example, I don’t need the elements to be organized in a Grid because they will be freely drawn on the screen. So I chose to create a <Canvas> element.

<Canvas Name="myCanvas" Background="Transparent"></Canvas>

Now I want to be able to capture touches and react to them. A canvas element can react to touches and launch methods to certain events: TouchDown and TouchUp are the most obvious ones for our example. For a better user experience, we need to provide some reaction to TouchDown, as in the real world the user would expect some feedback when touching something. 

<Canvas Name="myCanvas" TouchDown="myCanvas_TouchDown" Background="Transparent"></Canvas>

You probably noticed that when you typed TouchDown=, VS offers to complete the rest for you. After accepting it, you can right click on the myCanvas_TouchDown declaration, and select the option View Code. This will take you to the C# file, MainWindow.xaml.cs, where you will implement the logic for this code.

C# implementation

This is the initial code you see:

private void myCanvas_TouchDown(object sender, TouchEventArgs e) { }

On the documentation for a TouchEventArgs, we see there is a method called GetTouchPoint, that takes an object as an argument. This method gives you the touch position relative to the argument. I want to know the position to this touch in relation to my canvas, so that’s what we will add to our myCanvas_TouchDown method:

Canvas _canvas = this.FindName("myCanvas") as Canvas; 
TouchPoint _position = e.GetTouchPoint(_canvas);

If you remember my proposition, I want to create bubbles when I touch the screen. There are some Shapes already available on XAML and C#, so let’s use Ellipse. An Ellipse with the same radius for height and width is a circle, and that’s what I’m looking for. In XAML, we can simply declare it inside our Canvas, for instance. But this would give me a static element. I want it to be created only when I touch the screen and where I will place it will depend on where I touch the screen. So I will create an Ellipse inside myCanvas_TouchDown method, and declare its position to make the center of the Ellipse match the Touch point. See the code below:

Ellipse _ellipse = new Ellipse();
_ellipse.Fill = Brushes.LightPink; 
_ellipse.Width = 50; 
_ellipse.Height = 50; 
Canvas.SetTop(_ellipse, _position.Position.Y - 25); // deslocate to make centers match 
Canvas.SetLeft(_ellipse, _position.Position.X - 25); 
_canvas.Children.Add(_ellipse);

Great! So now everywhere I touch on my screen, a little pink circle appears. But, how to make an existing circle disappear? First, I need to check if there is already a circle in the same place I touched. If there is, I will make it disappear. If it isn’t, then create one.

object _isThere = myCanvas.InputHitTest(_position.Position); // check if there is an object there
if (_isThere is Ellipse) // if there is already an ellipse there, remove it
{ 
    myCanvas.Children.Remove(_isThere as Ellipse); 
} else {
    // add Ellipse as demonstrated above  } 

This is a basic start, and next time we will learn how to make it more interesting by adding some animations to it. In the meantime, let me know what you think and if you have any suggestions. And of course, keep hacking!

Extra Resources

XAML Overview

Designing UX for apps

Windows Touch Input Overview

AdjuntoTamaño
Descargar bubbles1-vs.png75.59 KB
Para obtener más información sobre las optimizaciones del compilador, consulte el aviso sobre la optimización.