Data Forms in your XAML LOB apps got you down? Let RadDataForm create your UI!

Introduction

Telerik’s RadControls for WPF and Silverlight are designed to make your life easier as you are building complex LOB applications. Data Forms are mission critical for nearly all of these apps. Typically when a developer is tasked with creating a data form, they begin with a Grid and start dragging and dropping controls onto the designer for the fields they want to present to their users. This takes a lot of time and effort to get the controls laid out properly as well as set the properties for each control. This is where Telerik can jump start your development efforts with RadDataForm.

Before jumping in, you may want to download a trial of RadControls for WPF or Silverlight. The source code is also available here.

Let’s Get Started!

Select the “RadControls WPF Application” project template found inside of Visual Studio and give it some sort of meaningful name. On the “Project Configuration Wizard”, select Telerik.Windows.Controls.Data and Telerik.Windows.Controls.Input and it will automatically select the other dependent references which are, Telerik.Windows.Controls and Telerik.Windows.Data. From here select Finish and our WPF application is ready to begin coding.

In the simplest implementation, you can declare a RadDataForm and add a header with the following code snippet:

<Grid> 

 <telerik:RadDataForm x:Name="radDataFormPL" Header="Patient Listing"/> 

</Grid>

From the header, you can tell this is a sample application that may be used in a hospital. With only one line of XAML, the application look like what is shown in Figure 1.

Figure 1: RadDataForm for RadControls for WPF without any additional configuration.

With only adding one line of XAML, we have a DataForm that has buttons that you would normally add yourself through XAML. We can quickly see that we have a Header, an ability to navigate records, and new, edit and delete item buttons. We also have an OK and Cancel button added automatically.

Let’s create our DataForm.

Now that we know what we get out of the box, with one line of XAML, let’s add some meaningful data to the form. We will begin by creating a folder called, “Model” and adding a class called Patient. This will hold a variety of fields that you might expect in a healthcare application.

A code snippet of this class is provided below:

public class Patient

{

 public string FirstName

    {

        get;

        set;

    }

 public string LastName

    {

        get;

        set;

    }

 public DateTime AdmittedOnDate

    {

        get;

        set;

    }

 public bool IsCritical

    {

        get;

        set;

    }

 public int Weight

    {

        get;

        set;

    }

 public Gender WhatGender

    {

        get;

        set;

    }

 public enum Gender

    {

        Female,

        Male

    }

}

From looking at this class, you will notice that we are using a variety of data types such as String, DateTime, Boolean, Integer and Enum. All of these data types will be converted to the proper control at runtime once the application launches. For example, the String Data type will become a TextBox, the DateTime will become a calendar control, etc.

Let’s add some Sample Data.

Create a new folder in the project called, “ViewModel” and add a class called, MainViewModel. Add in the following code snippet.

public ObservableCollection<Patient> GetPatient()

{

  ObservableCollection<Patient> patient=new ObservableCollection<Patient>();

            patient.Add(new Patient()

            {

                FirstName="Michael",

                LastName="Crump",

                AdmittedOnDate=new DateTime(2013, 04, 12),

                IsCritical=true,

                Weight=200,

                WhatGender=Patient.Gender.Male

            });

            patient.Add(new Patient()

            {

                FirstName="Jane",

                LastName="Simpson",

                AdmittedOnDate=new DateTime(2013, 03, 03),

                IsCritical=true,

                Weight=120,

                WhatGender=Patient.Gender.Female

            });

            patient.Add(new Patient()

            {

                FirstName="John",

                LastName="Peterson",

                AdmittedOnDate=new DateTime(2013, 02, 12),

                IsCritical=false,

                Weight=220,

                WhatGender=Patient.Gender.Male

            });

            patient.Add(new Patient()

            {

                FirstName="Peter",

                LastName="Bush",

                AdmittedOnDate=new DateTime(2013, 01, 12),

                IsCritical=true,

                Weight=175,

                WhatGender=Patient.Gender.Male

            });

 return patient;

        }

From this simple example, you can see that we are creating a GetPatient method that returns 4 new patients.

Next, switch over to MainWindow.xaml.cs and add in the following line right above the constructor.

private MainViewModel _vm=new MainViewModel();

…and add in the following code under the InitializeComponent();

radDataFormPL.ItemsSource=_vm.GetPatient();

If we run our WPF app now we will get the following screen as shown in Figure 2.

Figure 2: RadDataForm displaying Multiple Data Types.

As you can see from Figure 2, the back button and first record button are greyed out. The control automatically knows which record you are on without adding any additional code. As you can tell for each data type the proper control is being used. If we select the edit record button then click on the date then we can see an example of this as shown in Figure 3.

Figure 3: The DateTime button being clicked on in Edit mode.

Using Data Annotations.

As you can tell from the previous screenshots, we may want to customize the labels for the fields as they are currently the property names. For example, take a look at the First Name label in Figure 3. It does not have proper spacing. We also may want to add a description to the end-users about the field. We can easily fix this by adding in System.ComponentModel.DataAnnotations and switching back to our Patient class and adding the following attributes above the FirstName property as shown below.

[Display(Name = "First Name")]

[Description("Enter the First Name of the Patient.")]

public string FirstName

{

    get;

    set;

}

If we run our application again, we will now the spacing has been corrected as well as a blue question mark that will display a description of the field as shown in Figure 4.

Figure 4: Using DataAnnotations with RadDataForm to add a Name and a Description.

Build-in Validation.

Since our RadDataForm is smart enough to use the control based off of the data type, it also can provide built-in validation of the data the user enters as shown in Figure 5.

Figure 5: RadDataForm providing Data Validation based upon the Data Types.

As you can see from this sample, “Admitted On” and “Weight” were looking for a DateTime and an Integer. I added a string to both of those fields and immediately upon tabbing to the next field got the error message located below. It also highlighted the fields in red and has the ability to “stack” error messages.

Giving your Data Forms the Look and Feel of Window 8.

You can also enjoy a Modern UI that gives your app the look and feel of Windows 8 without upgrading every PC in the organization by using our Windows 8 Touch Theme. Simply add the following line right above the InitializeComponent() method in your MainPage.xaml.cs constructor.

StyleManager.ApplicationTheme = new Windows8TouchTheme();

Our application will now look like Figure 6.

Figure 6: RadDataForm using the Windows 8 Touch Theme.

You will quickly notice the new blue Header as well as the rounded icons and description image. Again, this was accomplished with one line of code and no additional .dlls were required.

Conclusion

We took a look today at RadDataForm for WPF and Silverlight. Starting from scratch, we were able to see that this control is flexible enough to handle various data types, data annotations, validations and styling. If you have any questions, then feel free to drop me a line in the comments below.

Don’t forget you may want to download a trial of RadControls for WPF or Silverlight now.

-Michael Crump (@mbcrump)