Telerik WPF Controls Tutorial Sample Chapter
Telerik WPF Controls Tutorial Sample Chapter
Daniel R. Spalding
Data Entry Controls Navigation Controls Scheduling Controls Layout Organization Controls
The book will also review several key aspects of loading these controls using data objects and XML serialization. The last feature the book will cover is how to validate data within RadControls and Visual Studio controls.
Chapter 5, Navigation and Dynamic Event Handling, reviews the Telerik navigation controls and how to take a DataSet or object list and bind the information to the controls. The chapter will also cover how to handle dynamic creation of events from data. By the end of the chapter, the reader should be able to create a collection of objects or a DataSet and generate entries inside the Telerik navigation controls. The reader should also be able to dynamically populate the events for handling navigation based on the user selection. Chapter 6, Telerik Scheduling and Object Bound Loading, reviews the scheduling controls from Telerik and discusses how to load these controls from data in a database. This chapter will also discuss how to take information from controls and load the values into the new data repository. By the end of the chapter, the reader should be able to create and load these controls from any data repository, and take the information from the controls to load into another data repository.
The rst goal of this chapter is for you to understand these controls and how to use them to create an effective application. This chapter will also introduce the database and the two supporting class libraries for the book. These les are available at the publisher's website located at http://support.packtpub.com. Please make sure you have downloaded the les before moving forward in the chapter.
The second goal of this chapter will be to set up the example SQL Server database. This database will be used throughout the book; so once you have set up the database, you will be set for the rest of the book. There may be some additional data scripts to load more example data, but these scripts will be mentioned in each chapter. This chapter will not require any additional data from the current database.
Database setup
The next step, before reviewing the controls in the chapter, will be to make sure that the database is set up for the Telerik projects. In this chapter, you will be required to create the database in SQL Server; then create a conguration setting in the App. Config le of your WPF User Interface project. The rst step will be to make sure you have downloaded the SQL Server database les from the PacktPub support website, you will have two separate options to install the database in SQL Server. The rst option will be to take the PackTPubOrders.bak le and restore the SQL Server database on your local SQL Server instance. The steps to do this are as follows: 1. 2. 3. 4. 5. Open the SQL Server Mgmt Studio (SSMS). Connect to the SQL Server instance you wish to use for the database. Right-click on the Databases Tree option and select Restore Database. Type in the name PackTPubOrders as the database name. Select the name of the le from the location where you saved the book downloads. 6. Click on the Restore button and the database should display in the list of databases.
The second option will be to take the PackTPub.mdf and PackTPub.ldf les and attach these les to a new SQL Server database. The steps to do this are as follows: 1. 2. 3. 4. Open SQL Server Mgmt Studio (SSMS). Connect to the SQL Server instance you wish to use for the database. Right-click on the Databases Tree option and select Attach. Select the MDF database le from the location where you saved the book downloads.
Once the database is set up, you will need to create a ConnectionStrings setting in your App.config le to match the database instance that you created previously in the SQL Server instance.
[ 20 ]
Chapter 2
The rst step will be to create an App.Config le. If you do not already have the conguration le within your current project, right-click on the project and select Add File from the menu. Select the Application Conguration option from the pull-down menu and an App.config le should be created. Within the App.Config le, you will need to create a section called connectionStrings. The following connection string example should be used if you have created a specic SQL Server username for the database. The section should look like this:
Downloading the example code You can download the example code les for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub. com/support and register to have the les e-mailed directly to you.
If you are using your Windows login, then you can use this conguration setup:
Once you have this conguration setting complete, you are ready to start working with the database. If you are using another type of security or you are not sure which option to choose, please use the link http://www.connectionstrings.com/sqlconnection/. This site has several different options for connection strings and should have the string that you will need to access SQL Server. Now that the conguration is set up, you will need to test the connection to ensure everything is correct. You will want to use the current solution created in the rst chapter. If you did not create a solution, refer back to the rst chapter. The code for the MainWindow.xaml.cs le should look like the following code snippet.
[ 21 ]
Once you have created the code for the MainWindow.xaml.cs class, run the solution through the debugger in Visual Studio. Make sure you place a breakpoint at the IDBManager line of the Window_Loaded method. Check to make sure the code does not cause an exception.
[ 22 ]
Chapter 2
Now that you are familiar with the main events and properties, let's start to use this control.
Binding to a System.Data.DataTable
The rst exercise will be to incorporate the RadAutoCompleteBox control and create a useable sample on the MainWindow.xaml le. We will be using RadGridView to verify the selection information from the RadAutoCompleteBox control, and a checkbox to determine how RadGridView will be populated. RadGridView will populate with customer orders based on the selection of a customer from the RadAutoCompleteBox control.
[ 23 ]
The rst step will be to add the RadAutoCompleteBox control and RadGridView to your MainWindow.xaml window. Place the RadAutoCompleteBox control above RadGridView on your MainWindow.xaml le, and a checkbox next to the RadAutoCompleteBox control, as shown in the following screenshot:
There are several key properties that are set in the RadAutoCompleteBox control that we need to focus on in order to understand how the RadAutoCompleteBox control works:
TextSearchMode: This is set to Contains. There are four settings for the TextSearchMode property:
Contains: If the typed text matches any portion of the loaded values ContainsCaseSensitive: If the typed text matches any portion of the loaded values based on the case of the text StartsWith: If the typed text matches the beginning of the
loaded values
StartsWithCaseSensitve: If the typed text matches the beginning of the loaded values based on the case of the text
TextSearchPath: This is set to LName. LName is the property in the CustomerEntity class that we want to focus the search on.
[ 24 ]
Chapter 2
SelectionMode: This is set to Single. There are two settings for this property:
WatermarkContent: This is set to Enter a Customer Last Name. This value will display in the RadAutoCompleteBox control when the window is loaded.
The next step will be to gather the customer information from the database to populate the ItemSource property on the RadAutoCompleteBox control. Inside the Window_Loaded event code, you will need to add the following code:
Notice in the example there are two different options. The option we want to use will be the DataTable option. The DataTable object will be bound to the ItemSource property of RadAutoCompleteBox named customerComp. We are using the DefaultView property from the DataTable option since the DataTable option cannot be directly bound to the ItemsSource property.
[ 25 ]
Once the code is in place, create a breakpoint on the line of code creating the instance of the CustomerEntity class. The rst time you run the code you can move through the Fetch method to see how the DataTable option is populated. Once AutoCompleteBox is populated with customer data, try to select a customer by typing in the rst few characters of the customer's last name. Once you select a customer's last name, the orders for that customer should display in the grid.
This property setting will be used to populate the control once the DataContext property for the window is set within the Window_Loaded event. Observe the following line of code in the Window_Loaded event:
[ 26 ]
Chapter 2
This line sets the DataContext property of the window to the CustomerEntity object. The AutoCompleteBox control then picks up the CustList generic list and uses that data within the AutoCompleteBox control.
RadMaskedInputCurrency
The rst step will be to create a new window for displaying the RadMaskedInput information. Once you have created the new window, add a RadMaskedInputCurrency control to the window. The setup for the control should look like the following screenshot:
[ 27 ]
The properties that you should pay close attention to are highlighted in the example XAML information.
Mask: This property controls the format of the information within the textbox. The mask "#6.2" means that the user can enter six numbers before the
Culture: This property determines the currency to be displayed within the textbox. The default value is "en-US". IsCurrencySymbolVisible: This property displays a culture-based currency symbol. The default value for this property is "True".
Once you have the setup for the control correct (based on the previous example) try to test the control by running the application. The mask should allow you to input six numbers before the decimal and two numbers after the decimal. There should be a dollar sign in front of the entered data. Notice that if you change the Culture property of the control, the currency symbol will change to reect the correct currency type. The control will also include a red cross symbol inside the control on the right side. This allows the user to clear the data from the control. The control properties also support binding to allow you to set up the controls based on conguration or database information.
[ 28 ]
Chapter 2
This format will support phone numbers in the U.S. after the mid 1960s. The phone numbers before that would use the rst two characters to identify the area of the number. Let's setup the mask to allow the rst two characters to be letters rather than numbers. The Mask property should then look like the following screenshot:
Now we have a mask that should support any options for a U.S. phone number. The next example will be to create a mask to support a U.S. zip code. The mask should support the nine-character format used in the U.S. The mask should look like the following screenshot:
The Culture property is available in this control, but the change in the value of this property will not assist if the user information is from Canada. The Canadian zip code is in a six-character format, so the mask will need to reect this information based on the culture setting in the Visual Studio project, or user input such as the country. This mask should look like the following screenshot:
[ 29 ]
Once you have added these property settings, you can then add a combobox to select the product from the list. The selected product will be displayed in the three RadMaskedTextInput controls by binding the product object to the window's DataContext property. The following screenshot is an example:
In the Product class in the PackTPub.ObjectLayer.Products.Product class le, the RegularExpression class allows only numbers and letters to be entered as values:
[ 30 ]
Chapter 2
Once you have completed this code, you can try to run the example. Start to enter data inside the masked edit textbox and you should see the selection generate the information in the input boxes. The next step to test this functionality would be to try and enter invalid data in these textboxes. If the data is invalid, you should see a message displayed with the information from the attribute on the property.
SpellChecker TextBox
The next control we will be reviewing is the RadSpellChecker control. This control is a wrapper control that is associated with other controls to implement spell checking within the associated control. The RadSpellChecker control works best with the input controls from Telerik, but can be associated with the standard Visual Studio input controls. The rst associated control we will review is the TextBox control from the Visual Studio standard System.Windows.Controls library. We will review the RadRichTextBox control and RadDataGrid from the Telerik control library. The reason we need to review the TextBox control is to allow you to understand how to implement the spell check control with standard controls as well as the Telerik controls. There is a key property and method that is set in the RadSpellChecker control that we need to focus on, in order to understand how the RadSpellChecker control works.
The SpellCheckMode property is used to determine the mode the spell checker handles while spell checking. There are two modes: WordByWord and AllWordsatOnce. The WordByWord mode allows the user to select a word and check the spelling. The AllWordsatOnce mode reviews all of the text within the current control.
The RadSpellChecker control requires that the WPF project has a reference for Telerik.Windows.Documents.Proofing. This library contains the RadSpellChecker control.
[ 31 ]
Once the controls are in place on your window, you will need to move to the code view and set up the RadButton click event as follows:
The code should display the Telerik spell checking modal popup window. The window should highlight any spelling issues as shown:
[ 32 ]
Chapter 2
The RadSpellChecker class has a static method named Check. This method takes two parameters, the control to be spell checked, and the SpellCheckingMode enumeration mentioned earlier in this section. The Check method will handle the spell checking of the text value inside the control. Any spelling issues within the control will cause the spell checking modal pop up to display. If there are no spelling issues, the method will execute but not respond.
The next example we will document will work with the WordByWord mode of the spell checking method. Let's add another button for the RadRichTextBox and add the text into the Content property, WordByWord, for example. The next step will be to add the following code into the click event of the new button:
[ 33 ]
The WordByWord mode will load each word into the spell check modal window for review by the user. This mode would work similar to how Microsoft Word would evaluate the text of a document, rather than the entire content of the control. The mode you should use depends on the use of the text control. If the text control is meant to be used for a small amount of text, then the AllAtOnce mode would be a better option since all the text data would be evaluated at once. If the text control is meant to enter a large amount of data, then WordByWord will be easier to work with for the user. The decision is based on the user and the content, but I believe these are good rules of thumb to follow for the mode to use for the Spellchecker method.
Let's get started with the next control. We'll create two columns within a RadDataGrid control. The rst column will be an example of the manual spell checking setup and the second will demonstrate the automated spell check. Add a RadDataGrid control to the SpellCheckWindow class we created earlier in the chapter. Once the RadDataGrid control is added, you will need to connect the RadDataGrid control to the fetch method of the Order class to load data within the grid. The code should look like the following screenshot:
[ 34 ]
Chapter 2
The next step should be to add the Telerik spell check information to the RadDataGrid properties. The XAML for the RadDataGrid control should look like this:
Once you have set up the RadDataGrid xaml le, you will then need to add a Telerik RadRichTextBox property inside the Grid section of the RadDataGrid control. The XAML should look like the following code snippet. Note that the IsSpellCheckingEnabled property is equal to False.
The rst column will require a RadButton property below the RadRichTextBox property. This button will be the way to have the user check the spelling within the data cell. The XAML button should look like this:
[ 35 ]
Notice that the method I am using in the preceding section is the CheckChildControl method. There are two parameters used in this method, the parent control, which in our case is the RadDataGrid control, and the control to be evaluated by the spell checker, which in this example is the RadRichTextBox control. When the user clicks the button within the RadDataGrid control, the cell's text will be evaluated and the Telerik spell check modal will be displayed. The second column will be set up for automated spell checking so we will do the same setup of the XAML in the column, except that we will add the Telerik:DataGridSpellHelper.IsSpellCheckEnabled property to DataGridTemplateColumn and set the column spell checking to True. The XAML for the column should look like this:
Notice that the Telerik reference is created in the header of the XAML document when Telerik is included as a reference in the WPF project. Once you have nished the XAML setup, you can test the DataGrid spell checking property. The rst column will have the button display to check the spelling when you double click on the cell. The second column should automatically evaluate the spell checking once you move from the data grid.
Summary
In this chapter, you should now have the database set up and congured to work with the system. All the example data should now be available and can be displayed in the examples. This chapter also covered three controls that you should now be able to include in a WPF project. Let us review these controls again:
RadAutoCompleteBox: You should now be able to create a Telerik AutoComplete control, and bind the data to the control by using a DataTable
object or a class object. You should also be able to handle the selected index event once the user selects an option from the AutoComplete control. controls to handle formatting text for the database, as well as handling validation on the information in the text control. This validation should be handled using attributes on a class.
[ 36 ]
Chapter 2
RadSpellChecker: Once you have nished the chapter, you should be able to use the RadSpellChecker static class to work with the following controls:
TextBox: You should be able to use the spell checker with the standard TextBox control from Visual Studio. You should be able to set up the spell checker within a button control and you should understand the two different modes of the spell checker: WordByWord and AllContent. RadRichTextBox: You should be able to use the spell checker on the Telerik RadRichTextBox control using the IsSpellCheckingEnabled property setting on the Telerik control. RadDataGrid: You should be able to create a RadDataGrid and use the spell checker functionality in either an automated or manual process.
In this chapter, we also reviewed the concept of validation using property attributes to handle the invalid message and format of the valid information. This concept will be discussed in further detail in the next chapter. We will start to create classes to handle the validation of the WPF controls using data binding and the property attribute.
[ 37 ]
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers.
www.PacktPub.com