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.

NotTouchReady
Vs. 
TouchReady7

 

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,

DefaultTheme

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,

NotTouchReady

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,

TouchReady7

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.


WPF
jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Related Posts

Comments

Comments are disabled in preview mode.