Log in to like this post! Getting Started with NetAdvantage Silverlight and WPF: Adding Sample Data [Infragistics] Curtis Taylor / Wednesday, June 9, 2010 As we go through the various most-excellent controls in our Silverlight and WPF versions of NetAdvantage, we will be creating diverse sample projects with many different scenarios of sample data. To expedite the creation of sample data, I will be creating fast mock data using Expression Blend 4. The following blog will show you how I create sample data for both WPF and Silverlight projects. I will walk you through creating a test WPF application. However, Silverlight fans can do everything I will be doing with this blog using Silverlight. The blogs will switch back and forth between Silverlight and WPF, pointing out the differences and the efficient similarities. Expression Blend is Photoshop for Developers. I once developed plugins for Photoshop and InDesign. I love Photoshop. Its features range from rudimentary to Mensa. Thus when I first started using the product, I found I could do a lot with little knowledge of the real power of the tools. However, it wasn’t until I learned the various sophisticated editors in the product that I became a force to be reckon with. Blend is a lot like that. You can open the product and move elements around and add some nice gradients fast. However, as a developer I use Blend across the board for everything – from layout, to template editing, pixel perfect translation of designs, animation transition design, icon creation, customization of existing controls, creating new controls, and creating all kinds of binding expressions. Blend is a most excellent refactoring tool for XAML. From UserControls to Resources, XAML generation and refactoring happen fast in Blend. Don’t get me wrong, I also love Visual Studio, especially 2010. All of my product management and coding happen in Visual Studio. I also maintain my XAML and use both tools for both tasks. It depends. If I have to type, I skip Blend and only use Visual Studio. If I want to generate XAML fast, I use Blend. Of course, with 2010, you can generate XAML like you never could with previous versions of Visual Studio. If you don’t own a copy of Blend, you can download a 60 day demo from the Microsoft Expression website. To start with this sample, I create a new project in Blend. And I usually start with the data. The data usually defines and even drives the application. Following the MVVM pattern, the ViewModel is also created based on the data. In Blend there is a Data tab. This panel contains editors for creating data, making the data be activated only at design-time, and the means for hooking up existing data sources. I click on the first popup menu to create sample data. Blend starts you off with a class called SampleDataSource that contains a class derived from ObservableCollection called Collection. This will contain a list of items with a couple of generic properties. Click on the item in the data tree to rename the class name and the properties names. Click on the arrows to the right of the properties to change the type of data. Click on the Plus icon to add properties. Click on the drop down arrow next to the plus icon to add a Collection item. This menu contains the following types of data: a Complex property, which is simply a new class that you can add properties to, a collection item (an embedded collection, perfect for hierarchical data). You can also convert the class to a Hierarchical Collection. This simply adds a collection of the same type to each item, thus creating a true tree pattern. So in my sample, I renamed the Collection to TeamCollection. I have a string property called Name, a Boolean called Current, and a Number named ID. I then added a Collection item to Team Collection. I named this ‘Players’ and added properties for name, phone number, address, email address, and more. When you change the type to String, the Format contains items like Email Address, Website and many other options. If you choose Number you can define the type of number. You can even specify image and Blend will add sample images to your project or you can point the sample data to your own directory of images. Blend will generate sample data for all the objects and properties you created. You can dedicate this data only for design time rendering, manual and unit testing or you can use it as a base for real data that you take ownership of. If you take ownership of the data, I suggest you disconnect it from Blend by refactoring the classes into your own namespace. Blend places the data into a dedicated folder into the namespace: Expression.Blend.SampleData.SampleDataSource. You can also edit the sample data values. The data button next to the collection opens the Edit Sample Values dialog. Here you can edit the data and change the number of auto-generated records. You can also simply open the generated XAML file and modify the data there. Data Binding to NetAdvantage The easiest way to see all the data in action is to tie it into an Infragistics Grid. If you are using WPF, we will add the XamDataGrid. If Silverlight, the XamWebGrid. To do this, add a reference to all or just the relevant DLLs for the NetAdvantage product. If you are new to the product, for now simply add all of them. After adding the DLLs, locate the XamDataGrid (or XamWebGrid) in the Assets panel. Double-click or drag the XamDataGrid item from Assets into the design space. Blend will have set a few Layout properties. Reset all these properties back to defaults (Auto Width and Height, Horizontal and Vertical Alignment set to Stretch and all Margins set to 0). Finally, locate the DataSource property. If using the XamWebGrid, you will locate the ItemsSource property. Click on the Advanced Options button and choose the Data Binding item. The Create Data Binding dialog will open. In this dialog we want to select the TeamCollection property in the SampleDataSource. This will be in the Data Field section since we used Blend to add the data. If we were to hook up our ViewModel to a DataContext in XAML, then we would be looking in the Data Context tab. The Element Property tab lets us bind to other elements in the XAML view. Close the dialog, run the project and you should have a grid full of data. Expand the hierarchical checkbox and view the hierarchical data as well. So now you have a primer you can refer to for generating sample data. This will prove highly useful for creating prototypes, quickly generating data for samples and starting you off with data for your ViewModels. SketchFlow also contains this same feature for creating prototypes. I will refer to this trick for future blogs. Until next time, happy coding!