Supporting Touch in WPF Applications–the Windows 8 Touch Theme

With the release of Windows 8 and Windows Phone 8, the compelling “modern application” look is making its way into web applications and Desktop (WPF) applications as well.  As consumers purchase more touchable hardware (touch-based laptops, etc.) the need for touch-friendly software is also emerging.  You can add support for touch-enabled RadControls with a single line of code in the constructor of your application.

Vs.

Let’s see this with a fast demonstration.

Create a new Telerik application and add  references for

• Telerik.Windows.Controls
• Telerik.Windows.Controls.GridView
• Telerik.Windows.Controls.Input
• Telerik.Windows.Data

Add a RadGridView to the project and set AutoGenerateColumns to false, adding a column for each of the four properties we’ll display:

<telerik:RadGridView Name="radGridView"
      AutoGenerateColumns="False">
   <telerik:RadGridView.Columns>
      <telerik:GridViewDataColumn
               DataMemberBinding="{Binding FirstName}"
               Header="First Name" />
      <telerik:GridViewDataColumn
                DataMemberBinding="{Binding LastName}"
                Header="Last Name" />
      <telerik:GridViewDataColumn
                DataMemberBinding="{Binding Age}"
                Header="Age" />
      <telerik:GridViewDataColumn
                DataMemberBinding="{Binding IsMarried}"
                Header="Married?" />
   </telerik:RadGridView.Columns>
</telerik:RadGridView>
 

All you need now is the data, which we crate from the Employee and EmployeeService classes (both of which are available in the WPF documentation).  Here’s the Employee class,

public class Employee
{
   public string FirstName
   {
      get;
      set;
   }
   public string LastName
   {
      get;
      set;
   }
   public int Age
   {
      get;
      set;
   }
   public bool IsMarried
   {
      get;
      set;
   }
}
 

And here, abbreviated, is the EmployeeService class

public static ObservableCollection<Employee> GetEmployees()
{
   ObservableCollection<Employee> employees = 
          new ObservableCollection<Employee>();
   Employee employee = new Employee();
   employee.FirstName = "Maria";
   employee.LastName = "Anders";
   employee.IsMarried = true;
   employee.Age = 24;
   employees.Add( employee );
   employee = new Employee();
   employee.FirstName = "Ana";
   employee.LastName = "Trujillo";
   employee.IsMarried = true;
   employee.Age = 44;
   employees.Add( employee );
   employee = new Employee();
   employee.FirstName = "Antonio";
   employee.LastName = "Moreno";
   employee.IsMarried = true;
   employee.Age = 33;
   employees.Add( employee );
   employee = new Employee();
   employee.FirstName = "Thomas";
   employee.LastName = "Hardy";
   employee.IsMarried = false;
   employee.Age = 13;
   employees.Add( employee );
 
   return employees;
}
 

All that’s left to do is to connect the data to the Grid, which you do in the constructor in the code behind,

radGridView.ItemsSource = EmployeeService.GetEmployees();
 

Run this application and you see the RadGridView with the default theme,

It doesn’t look or feel much like Windows 8.  You can fix that by adding one line in the constructor, before the InitializeComponent statement, as shown here,

public MainWindow()
{
   StyleManager.ApplicationTheme = new Windows8Theme();
   InitializeComponent();
   radGridView.ItemsSource = EmployeeService.GetEmployees();
}
 

That adds the Windows 8 theme,

which definitely has more of a modern look, but isn’t overly touch friendly.  Modify the theme statement to Windows8TouchTheme,

public MainWindow()
{
   StyleManager.ApplicationTheme = new Windows8TouchTheme();
 

and suddenly everything opens up a bit to allow easy touch and interaction,

Run this application on a Windows 8 machine with a touch-enabled screen and you can interact with it through touch: checking boxes, dropping menus and so forth.

Summary

You’ve seen how to bring the look and feel of a Windows 8 Store application to your desktop applications using Telerik Controls, adding just one line of code in the constructor. In future articles I will continue to explore the frontier between Store and Desktop applications, poking at the border to see what we can bring of the Windows 8 Store experience into the Desktop.