A New Generation of WinForms Touch Apps

Introduction

It seems like everywhere I look, I see more and more touch devices. They have become as much a part of the ecosystem as desktop and laptop computers these days. So given this shift in the paradigm where does that leave the Windows Forms platform? This is a question that ComponentOne has answered for WinForms developers. Introducing the TouchToolkit for WinForms! TouchToolkit for WinForms is a groundbreaking toolkit that allows users to enable touch support in any WinForms application. Touch Toolkit for WinForms will, in most cases, eliminate the need to migrate to a different platform to offer touch gesture support in their applications. This will allow developers to keep the same familiar UI and add functionality to bring it up to date. Let’s take a look at some of the features and controls included in the toolkit, shall we?

What do I get?

The toolkit consists of six controls, all of which are optimized to work in any WinForms application.

  • C1Magnify – Enables a magnifier tool for text fields.

  • C1ApplicationZoom – Enables zoom gestures in all forms within the application.

  • C1Zoom – Enables zoom gesture support at the form level.

  • C1ZoomPanel – Enables zoom gesture support for specified panels within a form.

  • C1MultiScaleImage – Enables users to open a multi-resolution image, which can display different images for different zoom factors.

  • C1TouchEventProvider – Provides touch events to any control within a gesture-enabled form. Allows developers to trap Windows 8 touch events such as tap and hold and pen flicks.

How do I use it?

Getting started with TouchToolkit for WinForms is VERY easy. So easy in fact, that the majority of the effort will be used on dragging and dropping the controls onto a form. Let’s put together a quick sample showing how to use some of the features available in the toolkit.

You will need the following prerequisites to create the sample.

  • Visual Studio

  • TouchToolkit for WinForms (download link in the resources section of this post)

  • C1NWind.mdb database file found in C:\Users\\Documents\ComponentOne Samples\Common after installing Studio for WinForms

  • Touch-enabled device for testing

Let’s get Started!

Let’s begin by creating a new project in Visual Studio. From the File menu, select “New Project”. In the subsequent window, select your desired language and highlight the “Windows Forms Application” option and click OK.

NewWinFormsProjectC

Once the new application is created and opened, we can add an mdb file to use for this sample. Right click on the project and select “Add -> Existing Item”. In the dialog box, navigate to the ComponentOne Samples folder which by default installs to C:\Users\\Documents\ComponentOne Samples and select the C1NWind.mdb file found in the Common folder. Navigate through the resulting configuration wizard, selecting the “Orders” table in the C1NWind.mdb database.

Once we have some data added to the project, we are now ready to add some controls to the form. With the new form opened, navigate to the toolbox and locate the C1FlexGrid control.

FlexToolbox

Next we can give the grid some data. Click on the smart tag of the C1FlexGrid and select the Orders table from the DataSource dropdown.

SmartFlexGrid

C1FlexGrid will automatically create the columns for you and will populate the data at runtime. Now we have a fully functional FlexGrid to display data from our Orders table. Now I want to run this app on my Surface Pro. Hmmm. As good as this sounds, the data in the grid might be too small to read and edit on this screen. This is where the C1TouchToolkit really shines. Let’s go ahead and add zoom support to this sample app. Don’t worry, it won’t take long at all.

Navigate to the toolbox and drag and drop the C1Zoom control onto the form.

ZoomToolbox

This will enable zoom gesture support for this form. Another option would be to add C1ApplicationZoom to the form which would add zoom gesture support to all subsequent forms in the project rather than adding the C1Zoom control to each form.

Now let’s run the project and see what we have accomplished. When the project start, try some zoom and pan gestures such as pinch, spread, and swipe. If everything was done properly, you should be able to zoom and pan inside of the form window and the C1FlexGrid. Below are two screenshots before and after zooming.

100% Zoom:

Flex100Zoom

120% Zoom:

Flex120Zoom

Just like that, with no code at all, we have implemented full zoom gesture support complete with scaling. Stay tuned for more blogs showing the features and capabilities of the ComponentOne TouchToolkit in the coming weeks.

Resources

Studio for WinForms Download:

http://www.componentone.com/StudioWinForms/Download/

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus