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
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.
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.
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