Touch friendly control Buttons - Bubbles 2

In the first article of this series, we talked about creating enhanced applications to make them touch friendly, since any application for Windows 7* is automatically touch enabled on Windows 8* desktop mode. We saw how to create an XAML/C# application and use the TouchDown event and the TouchPoint structure. We also spoke about how Windows 7 applications running on Windows 8 desktop are automatically touch enabled. The system will take care of translating a touch into a mouse click. However, a touch point is different from a mouse click, starting from the area it takes on a screen. A fingertip is much broader than a mouse pointer. We saw how to use TouchPoint and TouchDown events. But if we look carefully at our application, we can notice the Minimize, Maximize, and Close buttons at the border are actually too small for touch. Have you tried them in a touch enabled device? It’s not the best user experience. But how to change those buttons?

There are several paths to choose from. We will present one of them, consisting of removing the old style buttons and creating new buttons, friendlier to touch, and placed anywhere you want in your application. Other alternatives in C# or C++ also consist in removing such buttons and creating new ones with similar behaviours. However, in this case we will look into using XAML to accomplish this task. To remove those buttons, we need to change the WindowStyle property of the main Window of this application.

Using the same application we created last time, we can check the file MainWindow.xaml for the definition of the application Window. Adding the WindowStyle parameter, we can change the appearance of the Minimize/Maximize/Close buttons. Since there is no option to modify their appearance directly, we will remove them, setting WindowStyle to “None."

<Window x:Class=”Bubbles.MainWindow”
                Title=”Bubbles” Height=”400” Width=”400” WindowStyle=”None”>

Next, we need to create new buttons to do what we need. XAML already has a Button class, which is very helpful and speeds up our work. (In this example, we are using a Canvas as the main area for our graphical elements, but Buttons are usually placed in a StackPannel or Grid layout). In our Bubbles example, we don’t really need Minimize/Maximize buttons, so let's add a button to close the application and a button to clear the application, eliminating all bubbles.

<Button Name="myButtonClose" Width="50" Height="50" Background="Transparent" Canvas.Bottom="10" Canvas.Left="90" TouchDown="myButtonClose_TouchDown">Close</Button>

<Button Name="myButtonClear" Width="50" Height="50" Background="Transparent" Canvas.Bottom="10" Canvas.Right="90" TouchDown="myButtonClear_TouchDown">Clear</Button>

You can find details on the properties in the API documentation, but for our example, let’s focus on the code behind to enable our Buttons. Let’s implement the myButtonClose_TouchDown and myButtonClear_TouchDown in the MainWindow.xaml.cs file. If you right click on the function call in the XAML code and select View Code, Visual Studio* should take you directly to the function definition.

Now let’s add some code to enable our buttons. The instructions to close the application are very simple:


private void myButtonClose_TouchDown(object sender, TouchEventArgs e)
            e.Handled = true;

Declaring that the touch event was handled avoids the event to be propagating the event to other objects on the chain and being processed again. In our case, it avoids the Canvas to processing the event and creating another bubble. And the instruction to close is straightforward. Our clear event, on the other hand, it’s more interesting. To clear, I need to find and delete all the bubbles created. One option would be using the function Children.Clear() from the Canvas class. But this would eliminate all the graphical elements in my Canvas, including my buttons. Since that’s not what I want, I will look for Ellipse objects* and remove only them.


 private void myButtonClear_TouchDown(object sender, TouchEventArgs e)
            e.Handled = true;
            Canvas myCanvas = this.FindName("myCanvas") as Canvas;
            for (int i = myCanvas.Children.Count - 1; i > 0; i-- )
                Path x = myCanvas.Children[i] as Path;
                if (x != null)

Now instead of small standard buttons, I have two larger buttons, displayed at the bottom center of my application, with two functions adapted to the needs of my application.

But what if you really want to have a Maximize/Minimize button? In this case, you create the buttons as shown above, adapting the names to their functions and changing the Window state. In the case of a Minimize Button for instance:

<Button Name="myButtonMinimize" Width="50" Height="50" Background="Transparent" Canvas.Bottom="10" Canvas.Right="160" TouchDown="myButtonMinimize_TouchDown">Minimize</Button>

And the C# code would be: 


private void myButtonMinimize_TouchDown(object sender, TouchEventArgs e)
            this.WindowState = WindowState.Minimized;

I hope this helps bringing more touch friendly applications to our Ultrabooks. And as usual, please let us know what you think. If you have other techniques to share, our community will appreciate it!

For more complete information about compiler optimizations, see our Optimization Notice.