Microsoft Expression Blend is an application that generates XAML (Extensible Application Markup Language) via a user interface. Blend is designed to create all of the WPF UI (User Interface) elements such as windows, buttons, grid, and brushes on a designer surface. Blend will then emit all the necessary XAML code. Blend is a designer tool, so you still use Visual Studio 2005 to write the application code. (Note: If you have the next version of Visual Studio, codenamed "Orcas," installed, you don’t need to install the Visual Studio Extensions for WPF or the .NET Framework 3.)
1. Launch Visual Studio 2005.
2. Start a New Project.
3. Select NET Framework 3.0 Windows Application (WPF) (VB or C#) as in Figure 1.
Figure1 – Creating a New WPF Project
4. Add a reference to Infragistics WPF controls and supporting API as in Figure 2.
Figure 2 – Referencing Infragistics NetAdvantage for WPF Assemblies
5. Build the Solution and Save all. As yet the Infragistics controls are not available in the toolbox to drag onto the design surface. We will achieve this by using Microsoft’s Expression Blend.
6. Start Blend and open the project just created. Note that Blend can read Visual Studio Solution files.
Browse to where you saved the solution file and open it. You should see your solution displayed similar to Figure 3 in Blend. To access the Infragistics controls click on the button marked in red, the controls are in the Asset Library.
Figure 3 – New Solution in Blend
7. The asset library will appear; select custom controls tab and then select xamDataGrid as shown in Figure 4.
Figure 4 – Selecting xamDataGrid in the Asset Library
8. Draw the xamDataGrid on the Window as you would normally perform with any Windows UI control.
9. Now set the name of the grid. This is achieved through the properties window shown in Figure 5. Type in the name of the Grid (xamGrid, for example) in the Name region.
Figure 5 – Setting xamDataGrid Properties
10. Now draw a button on the design surface, you can locate a button on the side toolbar (see Figure 6).
Figure 6 – Choosing and Drawing a Button
11. We now want to hook up our data source to the xamDataGrid when the button click event is raised. To do this, select the button on the designer surface and go to the properties window, click on the event Icon. You can now see the events for this control (Figure 7). Double-click in the click event region.
Figure 7 – Setting Up Event Handlers
Visual Studio will be launched, and the code pane will be opened with the event stub written for you. (Note: If VS is already running, it will be brought to the foreground). Before writing any code we need to rebuild the solution so that VS can give us the Intellisense for the grid and any other controls that may have been setup in Blend. The grid’s DataSource property needs to be set in order to view data.