Curtis Taylor's Blog

Monster Services

2011-04-28T01:08:00Z

This control monster loves controls. I have so many cool things I am itching to tell you about concerning many of our controls. Over time I will share more and more. However, my first priority at Infragistics involves service. The last few months I have been working onsite at various different companies providing consulting and custom training services. These clients discovered that Infragistics provides services that extend the support of our products to also include onsite or remote consulting and training. That’s right, Infragistics does consulting and training! And I am exceedingly excited at the quality of our services. Exceptional services with no excuses!

UI Consulting
Sometimes a solution begs for a custom solution or an expert onsite. I am privileged to be one of the engineers who will come to your company and show you how to solve the difficult problems when it comes to XAML UI development. Sometimes that might involve providing extra support working with or customizing certain Infragistics controls, such as the XamDataGrid or the XamPivotGrid. Other times, it might involve translating your killer ideas into performant custom controls utilizing current best practices for XAML control development. Regardless, customers have had me assist them onsite and remotely working on hard-to-solve XAML problems, writing custom solutions, reviewing their UI, ViewModel code and XAML, as well as providing guidelines for XAML best practices. This has included development working with Prism, WPF, Silverlight, MVVM, ToolKit controls and most lovingly, Infragistics controls!

WPF and Silverlight Training
My job also includes providing training. You may know that Infragistics provides classes for both User Interface and User Experience training. However, did you know that our engineers are trained and qualified to go onsite and provide custom training to match your need? Many customers have migrated to WPF or Silverlight, adopted our XAML controls and started working with these XAML based approaches only to discover how essentially different programming XAML UI is from previous .NET technologies. A couple of days of an intensive “Boot Camp” approach and we can provide your team with insights that will definitely boost your productivity with WPF, Silverlight or both! I love working with XAML. And if programming and designing XAML is not a joy for you, I suggest you take one of my classes! As I mentioned you can come attend a class or you can have us come onsite and provide a more customized class presentation. We can focus your training on any aspect of the techonology or any suite of controls.

And what about the other technologies?
This Control Monster eats XAML. However, we have other engineers with monstrously great skills in other .NET technologies such as WinForms, ASP.Net, as well as JQuery, SharePoint and .NET savvy Data Services.

Did you mention UX?!?!
I work in the UI Services branch. However, we have an incredible team that focuses on usability design, review, consulting and training. These experts can review your designs, app or prototype, provide intelligent, case proven methods for improving the UX as well as come up with creative solutions to make your app more user friendly, visually stunning, and intelligently smart in its usability. This team also includes professional designers who can transform your app into a world-class visual and usable smorgasboard providing that professional look and feel!

Try Us Out!
If you are interested ping anyone in our company and let us know how we can serve you! I am excited to show you how awesome the technology is and how killer our controls are!

To learn more about UI Services
http://www.infragistics.com/services/ui/default.aspx#UIUserInterfaceServices

To learn more about UX Services
http://www.infragistics.com/services/ux/default.aspx#UXUserExperienceServices

XamDataGrid 101, Part 3 - Data Binding Basics

2010-11-07T02:23:00Z

I love the XamDataGrid. I confess. It is an amazing control. There is so much I could tell you about it. So I’ve decided to dedicate another blog to show you the cool things this control can do with data.

One queston users often ask is how do they get their data into the XamDataGrid and what should the data look like. I’m happy to report, the XamDataGrid is highly flexible when it comes to data. You may be working with DataTables already from SQL or a web service. Or you might be a WPF enthusiast using ObservableCollections everywhere. Both can be used directly with the XamDataGrid. The XamDataGrid can also work with regular Lists and Arrays. I’m also going to tell you about its support for IBindingList and CollectionView.

To start, I’ve whipped up a sample WPF 3.5 project using Visual Studio 2010 and NetAdvantage 2010.3. The sample shows four instances of the XamDataGrid, each with its own binding to a collection property in a ViewModel class. I will use this sample as a reference.

There are two key thing about working with a collection of Records. One is the presentation of the data the other is the data itself. In standard WPF, records of data can be presented in any ItemsControl by using a DataTemplate. However, you must know the data beforehand in order to hard-code the DataTemplate. With the XamDataGrid, you don’t need a DataTemplate. The grid dynamically generates the layout for you with with selectable headers and specialized editors based on the type of each field in the collection of records. You can override this with Field and UnboundField declarations.

The XamDataGrid has an entire Record management system to ensure that the data is presented fast and virtualized. I rarely ever need to explicitly call any of these APIs, however, because I prefer to drive the UI from the data model (or more precisely with a ViewModel class). This means if something other than the UI changes my data, I need the UI to update for me. This also requires that when the UI changes the data, that the underlying model is changed as well. Fortunately, WPF and .NET provides all the tools I need to make this work.

I will show you how to make this work with four types of collections. As I mentioned earlier, the project “SampleGridData” contains a ViewModel with four properties that are bound to four instances of the XamDataGrid in application View. The four properties are composed of types ObservableCollection, CollectionView, BindingList, and DataTable.

I always prefer to have my ViewModel coupled with a View and declared within the XAML directly. And then bound to the DataContext of the main layout Panel in order to reference properties and commands anywhere within that layout. The advantage to this approach is that Visual Studio and Expression Blend will actually instantiate the ViewModel and show the data in the designer. This is huge when working with the XamDataGrid since this is one of those controls that require data in order to show what the presentation of the data will look like in design mode. And speaking of design mode, if your data comes from a service, you can qualify your code with a check for design mode in order to show sample data and not try to call your service when in design mode. This will keep Visual Studio and Blend from trying to do too much. To check that code is being instantiated in the designer, you can call the static method: DesignerProperties.GetIsInDesignMode().

Some things about this sample: the XamDataGrid is refactored into its own UserControl since the same layout construct is repeated four times. The downside to this simplification is that the UserControl view does not have the instance of the ViewModel so you will have to go back to the main window XAML in order to see the data in action in design mode. The sample project also utilized a DispatcherTimer to periodically update the data in order to test dynamic updating of the UI. The amazing thing is that the Timer works in design mode, so while working in the designer you will see the data update while you are working.

The first collection shown in the sample is an ObservableCollection of ‘UserInfo’ objects. ‘UserInfo’ is a simple class composed of three properties to communicate the Username, Password, and Age. The class implements INotifyPropertyChanged. This way when the DispatcherTimer changes the Password property during runtime, the UI will be notified of the change and update dynamically. ObservableCollection implements INotifyCollectionChanged. That means we don’t have to do anything to notify the UI when items are added or removed from this observable collection. The timer will also add records to the collection at runtime which illustrates that the XamDataGrid bound to this collection will automatically update.

There is a specialized class that can act as a wrapper to collection called CollectionView. WPF uses CollectionView in ItemsControls as a type of implicit ViewModel of your data. This collection wrapper class is used to handle sorting, filtering, grouping and keeping track of the current item. For more information, Bea Stollnitz has a great blog posting about CollectionView. XamDataGrid supports this class so you can take advantage of some of its features.

In the ViewModel class you will see that the ObservableCollection is assigned to the CollectionView as CollectionView is simply a wrapper to your data. As a result, the two XamDataGrids will always be in synch. One feature that the sample shows off is the tracking of the current item. To support this feature, you must enable the ‘IsSynchronizedWithCurrentItem’ property in the XamDataGrid. This will cause the CollectionView.CurrentItem property to return the currently selected Record in the XamDataGrid. To demonstrate this the sample binds CollectionView.CurrentItem to a TextBlock. I’ve also overrode the ToString method in the UserInfo class to return the Username for that record.

The System.ComponentModel assembly contains the BindingList class. This class implements IBindingList. IBindingList is a standard .NET class and users of WinForms will probably be familiar with it. IBindingList supports notification for adding and removing items. The notification model in IBindingList is not supported by standard WPF controls (WPF moved to ObservableCollection). However, to be flexible with existing .NET desktop solutions, XamDataGrid supports this interface.

There is a feature in the XamDataGrid that allows users to add records from within the grid UI itself. This UI will actually instantiate the record and add it to your data. However, to use this feature your collection must implement IBindingList or IEditableCollectionView. Fortunately, the BindingList class implements IBindingList for you and like CollectionView, BindingList wraps another collection. The sample ViewModel does just that, the property for this third grid is a BindingList that wraps the first ObservableCollection.

GridView.xaml enables AllowAddNew:

And the BindingList sample shows the Add Record UI working within the XamDataGrid:

If you decide to take this approach and wrap your collection in BindingList to support the Add New record feature, you must take additional steps to support updating the collection when records are added to the coupled collection and when properties are changed in those records. As you may remember, I have the timer adding records to the ObservableCollection and modifying the Password property. Since the BindingList wrapper does not communicate the notifications directly to the UI, I needed to implement the update myself. To do this I simply needed to implement two event handler methods. One for the CollectionChanged event on the collection and one for the PropertyChanged event for each record in the collection. In the ViewModel you will see both of these events assigned handlers.

UsersObservableCollection.CollectionChanged +=
UsersObservableCollection_CollectionChanged;
…
user.PropertyChanged += UsersObservableCollection_PropertyChanged;

For both handlers, I simply communicate to the BindingList to update its binding to the coupled source collection:

UsersBindingList.ResetBindings();

With that change, the changes I make in the first two XamDataGrid instances and by the timer will now be communicated to this third XamDataGrid causing all three to be in-synch.

Finally, the XamDataGrid sample does not synch with the first ObservableCollection at all. In fact, this powerhouse data structure does not use my UserInfo class at all. DataTable is a workhorse object that treats a block of data as tabular rows and columns. This leads to a type of virtual table that takes the place of properties defined for each column. Usually, DataTables are generated automatically from a data base or XML. In this sample, the ViewModel will generate a DataTable programmatically to match the ObservableCollection from the start. I did not go so far as to try to synchronize this table with the others.

When working with DataTables, be aware you do not have a collection of objects such as the ObservableCollection of UserInfo objects. Instead you have a data representation of the UI grid which is simply mapped to the XamDataGrid respective of the ways you define your Columns.

To assign the DataTable to the XamDataGrid, you must use the DefaultView property on the DataTable. DefaultView is of type ‘DataView’. This object is a wrapper on the data which implements IBindingList. This means the DataTable will update when the user changes the data in the view and that you can use the Add New record feature in the XamDataGrid.

DataTable is a powerful feature in .NET and having it accessible to use with XamDataGrid is a huge convenience for many. However, since you do not have a nice class to work with in your ViewModel to implement logic that affect the data, the temptation (for people who need to do those kinds of things) is to place that logic in the code-behind by accessing fields in the records in the UI directly. I always recommend placing your logic in the ViewModel rather than the code-behind as you can better test the code (using unit testing) and will keep the UI data driven. However, I could write a book about all the ways you can use DataTables and best practices for following a data driven model. So instead, I will continue to provide useful tidbits of “killer control” info along the way.

Until next time, have fun with our products – they are truly killer!

Download source code here...

XamDataGrid 101, Part 2 - Custom Colors

2010-10-26T08:15:00Z

I’m back!

Sorry, but I’ve been very busy creating killer custom controls for customers. Did you know Infragistics does consulting? We help clients who need to create and solve custom solutions, whether that be customizing Infragistics controls or creating new ones from scratch. We do everything from UX design to complete engineering. I wish I could tell you more about some of the cool Silverlight controls we created for this one customer. However, client privileges prevent me from going into detail. So instead I want to show you a sample WPF application I put together the last couple of weeks to demonstrate the various Brush properties hidden away in the XamDataGrid.

First of all, as you know Infragistics WPF products come with several packaged Themes. These themes set various brushes in several controls to produce a consistent skinned look. You can also create your own Themes or access resources to manipulate specific brushes within a Theme.

On the other hand, another approach to working with our controls is through customization. As a WPF afficionado, you know that ControlTemplates are the empowering factor for complete customization. If you look in your friendly Infragistics installation folder, you will find a folder names DefaultStyles for each XAML-based product installed. This folder contains all ControlTemplates for each control so that you might have access to them.

However, if you just want to change the border in a cell or the foreground color for a selected row in the XamDataGrid, there is no need to assign a complete Template. We provide quick access to various brushes and ContentPresenter styles for every brush in the XamDataGrid.

Download the attached project to see how to access several key styles that affect colors in the XamDataGrid. The attached project is using our latest version of NetAdvantage for WPF, version 2010.3! It is using WPF4 with Visual Studio 2010 (or Expression Blend 4). The application generates a list of Color Pickers and a XamDataGrid with sample data. The color pickers allow you to apply colors to various parts of the XamDataGrid in real-time. It might prove to be a handy way to test your color ideas.

The application assigns simple SolidColorBrushes to each part. It will not apply Gradient brushes or other types of brushes. However, anywhere a color is assigned, any other type of WPF brush can take its place.

On careful examination of the application, you will see that the first group of colors in the list are Foreground brushes. Looking at the first brush, you will notice the label describes where in the object model the brush is found. The first one is found in the ForegroundStyle property on the CellValuePresenter style. ForegroundStyle and the other Foreground colors are ContentPresenter styles. When the content is text, then properties such as Foreground, FontWeight, and FontSize can be customized here. When this style is assigned to a Field or all Fields in a FieldLayout, then those cells Foreground presenters will be set.

The project illustrates the Model-View-ViewModel pattern. It also illustrates using ObservableCollections and INotifyPropertyChanged to support dynamic updating of properties. The ViewModel is bound in such a way to support data rendering in the Visual Studio and Blend designers. The MainView.xaml file contains the declarations and bindings for the colors list and the XamDataGrid with it’s assignments to a custom CellValuePresenter, DataRecordCellArea, LabelPresenter, and HeaderLabelArea styles. Finally, there is a ColorPickerEx class that extends the XamColorPicker to support sharing Recent colors across all used color pickers (as a convenience to using this application).

The XamDataGrid supports multiple selection models. Individual cells can be selected. Whole rows can be selected. And non-contiguous cells can be selected. Each cell and header button supports a different look or state when enabled, active, selected and when the mouse is over the cell or header. For example, the next brush in the colors list sets the ForegroundSelectedStyle, TextBlock.Foreground brush. This is seen for selecting multiple cells.

ForegroundActiveStyle styles the cell ContentPresenter for the cell that is active. An active cell is the cell that you can edit when working with editable data.

And the ForegroundHoverStyle styles the ContentPresenter that is applied to the cell that is below the mouse when the mouse moves over the grid. This is an effect which communicates what will be activated when clicking down on the mouse button.

Several users have asked about changing the ForegroundStyle and Background brushes when a Record is selected. To do that a DataTrigger can be utilized to trigger the style change in the CellValuePresenter when the Record.IsSelected property is changed. Look for this DataTrigger in MainView.xaml to see how this is hooked up to the color in the ViewModel.

While the foreground brushes must be taken from the content for the ContentPresenter styles. Background brushes do not involve ContentPresenter styles. These are simply Brush styles. The BackgroundHover brush in the CellValuePresenter demonstrates this brush. When the mouse moves over the cell this brush is applied to the cell Background.

BackgroundActive affects the active cell. Keep in mind if the active cell is a text editor and the text editor background is not transparent, then you will see the BackgroundActive brush around the opaque editor.

BackgroundSelected affects selected cells. Note, you can select multiple cells by holding the Shift key while selecting and a non-contiguous selection by holding the Ctrl key.

The CellValuePresenter style also lets us set the BorderBrush and BorderThickness properties for every cell. With these properties you can make the cells resemble a spreadsheet look.

Like most spreadsheets programs, you may want to use a different brush color for selected cell borders. The CellValuePresenter style also contains the BorderSelectedBrush property for that purpose.

For additional customization, the DataRecordCellArea style also provides access to properties that affect cell styling. The sample touches on two of these brushes.

To style the brushes in the header labels, there is the LabelPresenter style and the HeaderLabelArea style. HeaderLabelArea is most useful for customizing the presentation of the header buttons. The LabelPresenter style though will allow setting the Foreground brush for all the header labels.

For the background brushes in the header labels, there are three states. The LabelPresenter Background brush is the default brush for all header labels.

LabelHighlight brush in the LabelPresenter style is used for when the mouse is over the label.

However, when a brush is selected, to override this brush you must access a brush used in the control template – LabelHighlight2. This is used by Theming, so you must access it using the ComponentResourceKey accessor. Keep in mind, that if you use a Theme, then this brush will be utilized by that Theme.

Finally, the last brush in the colors list is the Background brush for the XamDataGrid itself.

That’s it for now. Download the source code for the sample here and have fun. I am eager to write more about our controls. With the latest release of version 2010.3 of our products, there is much going on here at infragistics. Until next time, enjoy!

XamDataGrid 101, Part 1 - Blend-Savvy Overview

2010-08-16T12:21:00Z

The premier control of the WPF NetAdvantage suite is definitely the XamDataGrid. The Infragistics data grid trumps all similar type of controls everywhere. Not only do I get paid to say that, but as a user of our controls I have found the XamDataGrid to be fast, highly customizable, and fast (which is worth repeating). <smile> Since the grid is highly customizable, there are many parts of the object model you can approach for styling and formatting. I am going to cover some of the more popular ways to customize the grid.

Creating a Sample Project

Clearly, the coolest thing about the XamDataGrid is how intelligently it will format data for you. Simply bind a collection to the grid and it will extract data fields from properties and assign editors with default formatting. To illustrate this point, let’s create a WPF 4.0 project in Expression Blend with sample data and bind the sample data to the XamDataGrid.

Create a new WPF Application project in Expression Blend 4. For this project it is important to make sure that you choose .NET version 4.0. For part of this project we will be using the XamColorPicker control which is one of the new 4.0 controls in NetAdvantage. I’ve named my test project XDG101.

Next add resources to NetAdvantage for WPF. Right-click on the References folder in the Project panel.

In Blend you will need to navigate to the folder which contains the DLL for the assemblies. Navigate to the Program Files folder and locate the Infragistics\NetAdvantage 2010.2 folder.

Within this folder there are two folders we must refer to: Both the WPF and the WPFCommon folders contain DLLs we will be using. Note that the WPFCommon folder is there to faciliate common DLLs shared with the WPF Data Visualization version of NetAdvantage.

In the WPFCommon\Bin folder add the “InfragisticsWPF4.v10.2.dll” to the project References.

Return to the Add References dialog and add the following DLLs from the WPF\CLR4.0\Bin folder:

InfragisticsWPF4.Controls.Editors.XamColorPicker.v10.2.dll
InfragisticsWPF4.DataPresenter.v10.2.dll
InfragisticsWPF4.Editors.v10.2.dll

Now from the Data panel in Blend add data to the project to be used at run time. This time I am adding the data to “This document” which will add the instantiation of the data source to the main window rather than to the application.

On adding sample data, by default a Collection is added composed of a class that contains two properties. The first property should be a string with Lorem ipsum formatting. Leave this property as is except click on the name of the property to rename the property to ‘ProductName’.

The second default property should already be a Boolean type. Rename this property to ‘ForSale’.

Next click on the Plus icon button to the right of the Collection in the Data panel to add another property. Clicking on the button will add a default String property. Rename the property ‘Icon’. To the right of the property you can customize the type and formatting. Change the newly added property to be Type Image.

On changing to type Image leave the Location field blank. This will cause Blend to add sample images to the project for you. With Location you can add a folder of your own Images to the data.

Next add a property named ID of Type Number of Length 4.

Next add a property named ColorKey of Type String, Format Colors.

Finally, add a property named Price of Type Number and Length 2.

Next we will add an instance of the XamDataGrid to main layout of the Main Window. You can quickly locate the XamDataGrid by using the search field in the Assets panel.

Double click on the XamDataGrid in the Assets list or drag it into the design space for the window.

Blend will position the element on adding it by setting certain Layout properties. To make the XamDataGrid fill the entire Window, reset all properties in the Layout category of the Properties panel. Reset is an option in the Advanced Layout menu which will clear a property to its default setting. The Advanced Layout menu is accessed by clicking on the rectangle to the right of every property.

To assign the data to the XamDataGrid, select the control in the Objects and Timeline panel and locate the DataSource property in the Content category of the Properties panel.

Access the DataSource Advanced Layout menu and choose the Data Binding option.

In the subsequent Create Data Binding dialog we will assign the Collection to the binding expression. This is located in the Data Field tab.

After selection the Collection and closing the dialog, you will find the XamDataGrid populated with the data we created.

Data Formatting

Next I will illustrate a few things you can do to customize the formatting for the data. First of all notice the labels for each header how they match the property names. We will want to override the text for the labels. We will want to override the width and height of the icon. We will move the icon to be the first field in the grid. We will remove the floating decimal numbers on the ID field. We’ll format the Price number field as currency. And finally we’ll assign the XamColorPicker element to be the editor for the ColorKey field.

To override how the fields are generated we will need to disable the XamDataGrid AutoGenerateFields feature. This property is located in the FieldLayoutSettings property on the data grid. In the properties panel locate FieldLayoutSettings (should be in the Behavior category). Clicking on the New button next to this property will add an instance of this property which we can customize. Blend will expand to show the properties in FieldLayoutSettings. Here locate and check off the AutoGenerateFields property.

Next we will need to add a custom FieldLayout which will define how each field will appear in the XamDataGrid. In Properties locate the FieldLayouts (Collection) property (which should be in the Miscellaneous category). Clicking on the button with the ellipse will display a dialog which will prompt us to add an instance of a FieldLayout.

In the FieldLayout Collection Editor dialog add on instance of a FieldLayout.

In the properties for the added FieldLayout you will find a Fields Collection property. Click on the Fields Collection button to bring up the Field Collection Editor dialog. Here we will be adding a Field for each property in our data source.

Clicking on the ‘Add Another Item’ button will invoke the Select Object dialog. Here you can choose between adding a Field or an Unbound Field. As the name implies Unbound Fields are for adding Fields that are not derived from a property from the data source directly.

Add a Field object.

A Field will show up in the Field Collection Editor dialog with properties for that Field appearing on the right of the dialog. Here is where we can make the first field point to the Icon property. To do this we must assign the Field Name property to match the name of the property from the bound data.

Type the work ‘Icon’ in the Name field.

We don’t need a Label for the icon image, so type a space in the Label field.

Finally, to limit the width and height of the icon, type 30 in both Width and Height fields.

To add and customize the next field, we will need to “add another item” to the Field Collection Editor. If you hit the OK button and closed the editor, simply click on the Fields ellipse button again in the FieldLayout Collection Editor dialog.

Add a new Field.

The next field we will assign the ProductName property to. Since ProductName needs to be separated by a space to be more human friendly, assign ‘ProductName’ to the Field Name property and ‘Product Name’ to the Label property. Also set the Width of this property to ‘160’.

Add a third Field and set the following properties:

Name: ‘ForSale’
Label: ‘For Sale’
Width: ‘70’

Add a fourth Field with the following properties:

Name: ‘ID’
Label: ‘ID’
Width: ‘60’

Add a fifth Field with the following properties:

Name: ‘ColorKey’
Label: ‘Color Key’

Finally, add the last Field with the following properties:

Name: ‘Price’
Label: ‘Price’
Width: ‘70’

Press OK on both dialogs to close them both. Build or run the project and you will see the grid update with the new field layout.

The following is the XAML which Blend generated for us:

Editor Formatting

To finish the formatting, we will need to add a few styles. To create styles with Expression Blend, you need to have an instance of the type of object you wish to style. This is problematic when the object you wish to style already exists in a context which Blend does not provide access to. For example, the XamDataGrid instantiates XamEditor derivations for each field type. Since the instance is implicitly assigned, Blend will not allow us to create a style for one of these editors since there is no explicit instance Blend can reference. To work around this you can either create the style in the XAML text editor or temporarily add an instance of the type of editor you wish to style, create the style for the editor, remove the temporary instance of the editor then assign the style to the XamDataGrid Field. We will do the latter.

Make sure the LayoutRoot in the Objects and Timeline panel is selected before proceeding.

In Assets search type XamNumericEditor and double-click on the editor control to add it to the Window.

With the temporary XamNumericEditor selected in Objects and Timeline, select the Object -> Edit Style -> Create Empty menu item from the top menu bar.

In the subsequent Create Style Resource dialog name the style ‘NumericEditorIDStyle’ and make sure to add it to the current document.

Blend will place the designer into Style editing mode. In this mode, any change to a property will become a Setter in the current style.

To format the XamNumericEditor to not show numbers after the decimal point, we will want to assign a mask to the Mask property.

Type ‘nnnnn’ in the Mask property.

Click on the Return Scope button to exit Style editing mode.

Now that we have our style, we don’t need the XamNumericEditor.

Delete the XamNumericEditor element in the Objects and Timeline panel.

However, we have the style which was added to the Resource Dictionary of the Window.

To apply the style, we will need to assign it to the Field.Settings.EditorStyle property for the ID field.

To return to this editor, click on the XamDataGrid FieldLayouts (Collection) property ellipse button, click on the Fields (Collection) ellipse button in the FieldLayout Collection Editor dialog, select the fourth Field in the Field Collection Editor dialog, and click on the New button next to the Setting property for the ID field.

Settings will expand to show additional settings properties for that field. Locate the EditorStyle property. In the Advanced Options for EditorStyle, the Local Resources option is disabled (with this version, this may be fixed in a future version), so instead we will add a custom expression.

In the Custom Expression popup dialog add the following text:

{StaticResource NumericEditorIDStyle}

This should apply the formatting to the ID field immediately.

To apply currency formatting to the Price field, we simply need to change the Editor Type from XamNumericEditor to XamCurrencyEditor. This change will be made in similar fashion as the ID field except we will not need a style. Before we can do this, we will need a reference to the mscorlib assembly namespace.

The following instruction is the only instruction where you must switch to the XAML editor. Add the following text to the Window tag in the XAML editor:

xmlns:sys="clr-namespace:System;assembly=mscorlib"

As you might imagine, I now have two feature requests for Expression Blend: the ability to add references to namespaces and the ability to add a Style to any type of object.

Return to the design editor, and open the Price Field properties by returning the the XamDataGrid FieldLayouts, Fields dialogs. The last Field is the Price Field. Click on the New button for Settings.

In the Settings properties locate EditAsType and in its Advanced Options add the following text to the Custom Expression option:

{x:Type sys:Decimal}

Finally, add the following custom expression to the advanced options for the property EditorType:

{x:Type igEditors:XamCurrencyEditor}

The following XAML will be generated from the two added custom expressions:

On pressing OK on the two dialogs the Price field will update to display current locale formatted currency.

CellValuePresenter DataTemplate Override

The final change we will make to customize the formatting for the grid is the ColorKey field. Here we will create a CellValuePresenter Style which will contain a DataTemplate definition. The DataTemplate will bind the ColorKey value to the SelectedColor property on the XamColorPicker control.

If you refer to Infragistics documentation for creating a CellValuePresenter Style you will find various XAML examples. Once again, this is another scenario where Blend cannot create this style from scratch without a little help as the CellValuePresenter is another object which is created behind the scenes for every field. The CellValuePresenter defines how the value for each cell is presented within the UI of the XamDataGrid Record.

Additionally, since the XamDataGrid will always instantiate instances of this control, this element is not added to the XML that Blend reads to know what to display in Assets. To work around these few Blend limitations, we will briefly return to the XAML editor one last time.

In the XAML editor, add the following text to the LayoutRoot content (before or after the XamDataGrid block of XAML).

<igDP:CellValuePresenter/>

On returning to the designer a CellValuePresenter will appear in the Objects and Timeline. Now we have an object that we can style.

Select the CellValuePresenter, then in the Object menu on the top menu bar select the ‘Edit Style’ -> ‘Create Empty’ option.

Name the style ‘ColorKeyCellStyle’ in the Create Style Resource dialog.

To assign a non XamEditor control to the cell value presenter, we will need to create a DataTemplate which hooks up this control. In the Style editor the breadcrumb control at the top of the designer allocates a menu for doing just that.

At the top of the designer a control will show a palette menu next to the CellValuePresenter label. This will show all the template editors available for this style. Select the second template editor for editing the ContentTemplate. From here create an empty template.

In the Create DataTemplate Resource dialog, add the following style name: ‘ColorCellDataTemplate’.

Blend places the designer in edit mode for the DataTemplate.

Add the XamColorPicker control from Assets to the DataTemplate Grid.

After making sure the XamColorPicker is selected in the Objects and Timeline panel, locate the SelectedColor property from in the XamColorPicker Properties category.

Next go to the SelectedColor Advanced Options and choose the Data Binding option.

In the Create Data Binding dialog, make sure Data Context tab is selected and add the following text to the ‘Use a custom path expression’ field:

Value

Also make sure all Layout properties are set to default. Blend will probably set the HorizontalAlignment to Left. This will end with confusing results. So it is important that both Horizontal and Vertical alignments are set to Stretch.

Return scope to the Window layout and delete the temporary CellValuePresenter from the LayoutRoot.

To assign the style to the ColorKey field, return to FieldLayouts for the XamDataGrid and Fields for the FieldLayout.

Select the second to last Field in the Field Collection Editor dialog.

Add New Settings for the ColorKey field.

Locate the CellValuePresenterStyle property and select Advanced Options.

Advanced Options will allow us to select the ColorKeyCellStyle from the Local Resources option.

There is one last caveat to work around. Blend always uses the DynamicResource keyword when assigning styles. You may encounter a problem with assigning a CellValuePresenter style using DynamicResource at run time. Since the style is defined locally, we can change DynamicResource to StaticResource. You can do this in the XAML or by simply choosing the Custom Expression option in Advanced Options. Since we already assigned the local resource, the Custom Expression field will show the expression. Here change DynamicResource to StaticResource.

Dismiss the open dialogs by pressing OK and run the application. You will find the XamColorPicker displaying the color in the ColorKey field.

In the Data panel you can customize the sample data by adding more records.

If you elements do not show up, then there may be a type in the XAML or a style was not assigned correctly. If elements show up but are oddly placed, then a Layout property was assigned that needs to be cleared.

I’ve attached the project for reference.

In spite of a few of the caveats with working with custom styles with Blend, having Blend automate the generation of the XAML limits XAML typos and is useful in that XAML will display properties and event names, and provides specialized editors for working with styles and templates.

In my next killer blog I will demonstrate applying styles to override background, highlight and hover brushes for cells, header labels, and row summaries as well as how to override text styles for cells and labels.

Taking Control of NetAdvantage for WPF 4

2010-07-27T01:48:00Z

I’ve been busy getting acquainted with some of our new WPF controls. They are completely fantastic! With version 2010.2 comes the release of new controls that require WPF 4.0. This blog will talk a little about some changes concerning these controls.

NetAdvantage for WPF has some awesome new 4.0 features and controls. The new controls include the following:

The new xamColorPicker which can be customized to include your own color palettes.

The xamDialogWindow which can be styled to create simple stylish MessageBoxes or complex modal dialogs with various presentation options.

The xamMenu and xamContextMenu provide a complete solution for managing a complete menu bar and contextual menus.

The xamSlider provides the means for creating sliders with multiple thumbs as well as presenting various types of data including the Date and Time.

The xamSpellChecker provides a simple Spell Checking solution to your applications.

With the xamTagCloud you can add the popular Web Control for displaying hyperlink buttons with a visual indicator to communicate the weight of the number of times the tag is used.

In addition to these we now have NetAdvantage Data Visualization for WPF. This suite of controls includes the following dynamic controls.

The xamGuage provides a creative way to present a visual indicator for dynamic data.

The xamTimeline positions information along a timeline which a user can explore in detail and zoom in details.

The xamBulletGraph extends the bar graph and guage to provide comparitive and qualitative ranges of data.

The xamDataChart is a chart control designed to handle millions of data points with fast performance.

The xamPivotGrid is a specialized data grid for working with multidimensional data (MDX) from OLAP cubes, data warehouses and Microsoft® SQL Server® Analysis Services.

The xamBarcode manages the details of barcode imaging, allowing you to easily embed data in barcode format.

The xamTreemap fullfilles the standard of creating heatmaps made popular in the financial industry. These can be used for inventory management and market maps for showing hot stocks and cold sectors.

Finally, the xamMap provides a way for presenting visual maps of data. This can be used for traditional maps of the world and countries or for anything you can represent as a map, such as a map of an interactive seating diagram.

Some things I noticed with using these controls that I would like to make you aware of...

The new controls in the main Client product and all the Data Visualization controls require WPF 4. This means you need to make sure the project is set up to use .NET 4.0 CLR framework.

To do this in Expression Blend, you can specify the CLR version below the CLR Language in the New Project dialog.

In Visual Studio 2010, the version is at the top of its New Project dialog.

If you add these assemblies to a 3.5 project you will find odd behavior with them rendering in Blend and VisualStudio and you will experience namespace compiler errors. It may be hard to figure out at first what is going on. Simply make sure the project is set up for the 4.0 CLR.

Finally, the other thing that is new with using these controls is the placement of the DLLs on your hard drive after installation. As usual most of the controls require at least two DLLs. For example, the xamColorPicker requires both:

· InfragisticsWPF4.v10.2.dll

· InfragisticsWPF4.Controls.Editors.XamColorPicker.v10.2.dll

Since ‘InfragisticsWPF4.v10.2.dll’ is used by controls from both suite of controls, this and other common assebmlies are now placed into a new folder: the WPFCommon folder.

Additionally, within the NetAdvantage WPF folder you will find folders ‘CLR3.0’ and ‘CLR4.0’. The XamColorPicker DLL can be found only in the ‘CLR4.0’ folder since it is a .NET CLR 4.0 assembly. Keep this in mind when adding DLL references and don’t forget the common DLLs when adding these controls to your products and you will have no problem in accessing the various parts of their object models.

To read more about the new placement for the assemblies, check out the following documentation webpage.

In my next blog I will focus on techniques for using the xamDataGrid with Expression Blend and Visual Studio 2010. I will also be demonstrating the xamColorPicker by adding it as a field in the XamDataGrid.

Control Monster Explores Multi-Level XamTrees - Part II

2010-07-09T04:14:00Z

Hierarchical data can take on many levels and various approaches to data. To further demonstrate the flexibility and depth of the XamTree control, this blog will add a third level of data to the last example and add another XamTree which shows how to work with a recursive tree.

Adding the Next Level to the Hierarchy

First, I will be working with the sample project from the last blog.

To add a third level of data to the sample data, you can access the built-in features in Expression Blend. In the Data tab locate the Branches data and select the drop down menu to its right. Select the ‘Add Collection Property’ option.

Rename the Collection Employees and select the ‘Add simply property’ button, which has the Plus icon to the left of the drop down.

Rename the new property ‘Name’ and make it a Name formatted String property.

Next we need to add the template for this third level of the hierarchy.

We will need a third DataTemplate for the Employees level. To add a third DataTemplate to the project, go to the Resources tab, select the FranchiseDataTemplate in MainPage.xaml UserControl, and duplicate this style by right-clicking to Copy and right-click to Paste.

Select the duplicate item and click on the title to rename it. Rename the data template ‘EmployeesDataTemplate’.

Click on the round rectangle or the contextual Edit menu to edit this DataTemplate.

The duplicated DataTemplate already has a TextBlock. We need to bind the Text property of this TextBlock to the Name property. Select the TextBlock in the ‘Objects and Timeline’ panel and locate the Advanced Options drop down and choose the ‘Data Binding’ option.

Change the ‘custom path expression’ to read simply as ‘Name’.

Press OK to make the change and close the dialog. Now customize the DataTemplate as you wish. I added another TextBlock before the Name to serve as a label “Employee:”.

When complete, exit the DataTemplate editor. And select the XamTree in the Objects and Timeline panel.

In the Properties panel, expand the HierarchicalItemTemplate to reveal the properties already set. The HierarchicalItemTemplate property is a HierarchicalDataTemplate. This template specifies how to apply data to the the item (with the Template property) and its children (using the ItemTemplate property). The HierarchicalDataTemplate also contains a HierarchicalItemTemplate, which is a HierarchicalDataTemplate. This means you can specify hierarchical items various levels deep. When you provide a child HierarchicalItemTemplate, then this will override the Template ItemTemplate property. This means you can have an ItemTemplate or a HierarchicalItemTemplate depending on if you need to specify further levels of data that the tree can expand.

Within the expanded HierarchicalDataTemplate, reset the ItemTemplate property to clear it. Reset is one of the Advanced Options for a property.

Next click on the ‘New’ button next to the embedded HierarchicalItemTemplate.

In the newly expanded section for the HierarchicalDataTemplate, locate the ItemTemplate property. This property can be assigned a DataTemplate to assign data properties to elements to be displayed in the next level of the hierarchy. To the right of the ItemTemplate property, click on ‘Advanced Options’ -> ‘Local Resource’ -> ‘EmployeesDataTemplate’.

Since we had to remove the assignment of the BranchDataTemplate on the root HierarchicalDataTemplate ItemTemplate, we need to now assign that template to the Template of the child HierarchicalItemTemplate. Click on the Template Advanced Options and select ‘Local Resource’ -> ‘BranchDataTemplate’.

Finally, we need to point the new HierarchicalDataTemplate ItemsSource to point to the collection of Employees. Click on the Advanced Options popup and select the ‘Data Binding’ option.

In the ‘Create Data Binding’ dialog make sure the Data Context tab is selected since the data will come from the DataContext set by the Tree. Type Employees in the ‘Use a custom path expression’ field after enabling this option. If you expand the tree in the dialog, you can find the Employees property. However, if you select it, Blend will assign a zero’th assignmnet of this field as it does not know that the XamTree will utilize the DataContext correctly as any ItemsControl would do with the ItemsSource property.

Run the project and you will now find three levels working within the XamTree.

Working with Recursive Trees

For this next example, we will create another XamTree and a secondary collection in the SampleDataSource to bind to. To start re-visit the Data tab and add a second collection to the SampleDataSource.

Rename the Collection to ‘People’.

Add a Simple property. Make it a String property that is formatted as a Name and name the property as ‘Title’.

Next to make the collection a recursive hierarchical collection, the drop down menu to the far right of the collection has the option to convert the collection to a ‘Hierarchical Collection’. Go ahead and make this change.

Now add a second XamTree to the MainPage in the second column of the root Grid layout panel. Make sure the XamTree is set to auto size and stretch align vertically and horizontally.

Bind this XamTree ItemsSource to the new collection titled People. You can do this by clicking on the ‘Advanced Options’ -> ‘Data Binding’ option and selecting People in the DataContext tab of the ‘Create Data Binding’ dialog window.

On making this change, the design space will immediately reflect this change.

Of course, to make the list display a few levels of data and show more than the class and namespace for this item, we will need to tie in some hierarchical data templates.

Before we do that, let’s look a little closer to the data. The data icon to the right of each People collection is a button which invokes the ‘Edit Sample Data dialog’.

In the dialog you can change the data and select the number of items to be displayed in the collection.

On examining the data Blend creates you’ll find that the data collection count is set to 0 at the fourth and fith level. Set the fourth level count to 3 and leave the fift level at 0. We will make sure our tree can display up to this level. Currently, the XamTree can only show a finite number of levels. Thus there is no way to assign one XAML DataTemplate and have it applied recursively to all levels. If this is something you need, please let us know!

First we need a DataTemplate that knows how to display the Title property. To make this simple, duplicate the FranchiseDataTemplate again in the Resources panel, name it TitleDataTemplate, and edit the template. The template already has a TextBlock. Bind the TextBlock Text property to the Title property using the ‘Custom path expression’ field. Make any additional customizations to the presentation of this item while in the editor.

Dismiss the DataTemplate editor and go back to the designer for the MainPage. Select the second XamTree and add a new HierarchicalDataTemplate by clicking on the New button next to the HierarchicalItemTemplate property.

Using Advanced Options assign the custom binding expression “People” to the ItemsSource in the HierarchicalDataTemplate.

Next in Advanced Options assign the ‘Local Resource’, TitleDataTemplate to the Template property in the HierarchicalDataTemplate.

To assign the next level of the hierarchy, we add another new HierarchicalDataTemplate to the HierarchicalItemTemplate. Within this next level, we also apply the Binding Custom Expression ‘People’ to the ItemsSource property and assign the Local Resource TitleDataTemplate to the Template property.

Repeat this three more times to create four levels. In the last level, assign the Local Resource TitleDataTemplate to its ItemTemplate property (instead of another HierarchicalItemTemplate). This will finish the flow of levels and allows re-using the same DataTemplate.

Run the project and you should see the DataTemplate assigned to all levels of the sample data in action.

Drop me a note if you need further clarification about this. Meanwhile, I’ve included the source code to the Visual Studio 2010 (Expression Blend 4) solution for this sample so you might try it out yourself.

This monster loves the XamTree. It’s versatile, flexible, and thoroughly delicious. Stay tuned for the next tasty Infragistics control we play with!

Control Monster Explores Multi-Level XamTrees - Part I

2010-06-23T07:00:00Z

Displaying hierarchical data in software is a strategically useful task which can get complicated fast depending on how deep the hierarchy goes. You may have a database that lists accounts for a set of users where each account contains a list of transactions. You may even have a recursive tree, such as an org chart where each team member contains a list of team members they are responsible for. A large hierarchical organization may have several levels of relationships. Abstracting that to data means each team member item would contain a collection of team member items.

The above example of the XamTree with a custom template is from the Silverlight NetAdvantage Feature Browser.

The Infragistics Silverlight XamTree solves this by providing a flexible model for defining n number of hierarchical data templates for each tier within the hierarchy. The API is easy to use and is basically data driven. I will show you a few technicques for applying data templates to various levels within a hierarchy.

XamTree was formerly named XamWebTree. In our effort to consolidate the names of our WPF and Silverlight products, XamTree became the new name for this control.

I will be creating a test application using the Silverlight control from the Silverlight NetAdvantage Web Client 2010.2. I will also be using Expression Blend version 4 and Silverlight 4. You can use the previous version of all of these tools. Just remember that in the last version the XamTree was named XamWebTree.

To start this sample, go ahead and create a Silverlight application using either Expression Blend or Visual Studio. Add the NetAdvantage default assembly and the XamTree assembly to the project. With NetAdvantage 2010.2, you will be adding the following two assembly DLLs located in the Program Files folder in the Infragistics\NetAdvantage 2010.2\SilverlightCommon\Bin folder:
InfragisticsSL4.v10.2.dll
InfragisticsSL4.Controls.Menus.XamTree.v10.2.dll

Create a Grid with two Columns each with Column Width set to 1*.

If you created the project in Blend, make sure that the root UserControl element does not have hard-coded Width and Height properties set. If so, set them both to Auto.

Add a XamTree to the first column.

And set to stretch vertically and horizontally within the column.

Next we will add sample data (see my last blog for information how to use Blend to create sample data).

I renamed the default collection, Franchises. I renamed the first default string property StoreName. Left the string format as Lorem ipsum with the word count set to 1 and word length as 8.

In the drop down menu next to Franchises I add a Collection property, naming it Branches. Then I add an address formatted string property, a telephone formatted string property and an Image property to the Branches collection. You can provide a source folder for the test images or leave the Image fields blank to allow Blend apply its own test images. The Image property I’ve renamed Icon.

Sample data in place in less than two minutes, to apply it to the XamTree, I right-click on the XamTree in the Objects and Timeline panel and locate the ‘Data bind ItemsSource to Data…’ menu item.

In the Create Data Binding dialog I locate the Franchises collection in the SampleDataSource. Simply selecting this and dismissing the dialog by pressing OK will bind the sample data to the XamTree.

At this point you should see the XamTree display a list of class names. Since the collection is more complex than a list of strings, we will want to utilize Hierarchical Data Templates to present the data.

In the example, I intend to apply different DataTemplates to the Franchises collection and to the Branches child collections. To first apply a template to the parent Franchises collection, locate the breadcrumb control at the top of the design view and navigate to the following command:
Edit Additional Templates -> Edit Generated Items (ItemTemplate) -> Create Empty…

The ItemTemplate is the default DataTemplate applied to generated items in the XamTree. It works identically to the ItemTemplate of any ListBox or other ItemsControl elements.

In the ‘Create DataTemplate Resource’ dialog I’ve named the new DataTemplate ‘FranchiseDataTemplate’.

Blend will switch the designer to a template editor view. In this view I will add a TextBlock to the given Grid. I will then bind the Text property of the TextBlock to the StoreName property in the Franchise collection item. To do this in Blend, click on the Advanced Options popup menu in the Properties panel and choose the Data Binding option.

This will bring up the Create Data Binding dialog. From here you can easily select the StoreName property. This adds the binding expression for you which minimizes the chance of mis-typing a word in the XAML extension brackets (which is the main convention for creating binding expressions in XAML).

We are done with this DataTemplate. You can now easily return the design view scope back to the main UserControl interface by clicking on the Return scope button in the Objects and Timeline panel.

You should now have the Lorem ipsum sample text appear in the XamTree control. Incidentally, Lorem ipsum is a convention in graphic design for using auto-generated placeholder text in text layouts. You can read more about it in Wikipedia:
http://en.wikipedia.org/wiki/Lorem_ipsum

You may have noticed in the Additional Templates drop down there was nothing there for secondary or tertiary levels of the tree. As you can imagine, every element in a collection can have a collection of items, which can have more collections of items. The hiararchical nature of assigning templates add a level of complexity that is solved with the HierarchicalItemTemplate property in the XamTree.

You can locate the HierarchicalItemTemplate in the XamTree section of properties. At this point I click on the New button next to this property to instantiate one of these templates within the XamTree. On doing so, you will notice that our rudimentary DataTemplate is no longer applied. To re-apply this template, we need to tie in the template the the data source to the new HierarchicalDataTemplate which gets assigned to the HierarchicalItemTemplate property.

The new HierarchicalDataTemplate contains an ItemsSource property. Using Advanced Options, create a new data binding to this property. Since we want to communicate the next level of the tree, we will need to bind this property to the Branches property. However, Blend is not aware of the templating nature of this binding. So if you select Branches from the DataContext tab, Blend will create an incorrect expression, “Franchises[0].Branches”.

To correct this, select the ‘Use a custom path expression’ checkbox and strip the first part of the expression until it simply reads as ‘Branches’.

Next click on the Advanced Options button for the Template property in the HierarchicalDataTemplate. In the ‘Local Resource’ sub-menu the original DataTemplate will be displayed. Select this resource to re-apply this template to the parent part of the XamTree.

After doing this you won’t see anything work yet as we will need to remove the resource assignment to the ItemTemplate property in the XamTree. To do this, find the ItemTemplate property in the Miscellaneous section and choose Reset in the Advanced Options menu.

On doing so, the XamTree in the designer will now display the Lorem ipsum names and triangle controls for expanding the tree.

To complete this, we still need to add a DataTemplate for each Branch item. We will create a DataTemplate to present the Branch information and assign it to the ItemTemplate property in our HierarchicalDataTemplate.

One way to do this is to duplicate the first DataTemplate and modify the duplicate. To duplicate the existing DataTemplate, switch to the Resources panel, locate the FranchiseDataTemplate in the MainPage.xaml UserControl. Right-click on this resource and choose Copy, then right-click on the UserControl and choose Paste. Next click on the duplicate resource label to select it. Rename it BranchDataTemplate.

To the right of the new resource, click on the rounded rectangle to enter editing mode for this resource.

In the DataTemplate editor, change the Grid layout to display two rows and two columns. Set the first column Width to Auto and the Height for boths rows to Auto. Leave the second column Width as 1*.

Add an Image element to the first column spanning both rows. Center this Image vertically and horizontally and set its Width and Height to 40.

Set the existing TextBlock to be in column 1 and row 0. Add a second TextBlock to column 1 and row 1.

There are a couple of ways to assign Rows and Columns to a Grid. If you have not done this before, simply locate the ColumnDefinitions and RowDefinitions properties in the expanded Layout section of the Properties panel. There is a button that will take you to an editor dialog for these properties.

Since we do not have a current DataContext to work with, this is one of the few times we would be working blind with a template editor. So somethings to look for:

Make sure the Grid and the two TextBlock Layout Width, Height, VerticalAlignment, HorizontalAlignment and Margin properties are all clear of any values. You should Reset these properties if Blend added any setting to these. When working with items in the designer, Blend will change these settings. Also make sure that the Row, Column, RowSpan, and ColumnSpan are set up to support the Image taking up the two rows in the first column and the two TextBlocks taking the first and second rows in the second column.

To make sure the layout is correct, you can assign temporary text and an image Source to the Image. This will help you make sure your layout is good.

Bind the first TextBlock Text property to the custom path expression “Address” (assuming that is the name you used for your Address field). Make sure you do this with DataContext selected in the tabs and not Data Field. If Data Field is selected, it will create a new connection to the sample data. We need to use the data that is already coming through the data context of the data that is already assigned to the XamTree ItemsSource.

Do the same for the second TextBlock Text property assigning it the custom expression “Phone” (which is the name I used for my Branch Telephone property).

Finally, bind the Image Source property to the custom path expression “Icon” (which is the property name I used in sample data for the Image property).

Return scope to the UserControl. Finally, we will need to assign the last DataTemplate to the HierarchicalDataTemplate. In the HierarchicalItemTemplate locate the ItemTemplate property. In the Advanced Options for this property choose the new BranchDataTemplate in the ‘Local Resources’ sub-menu.

Run the project and expand the tree. You will find the XamTree utilizing DataTemplates for both parent and child items. To go onto a third tier of data, the HierarchicalDataTemplate contains its own HierarchicalItemTemplate property. You would use this in the same way we used it for the relationship between level 1 and 2. You could assign a ItemTemplate to the third tier hierarchy of data and specify which property goes to the ItemsSource of the next tier.

What if you have a Tree that is like a linked list, a recursive tree, where one of the properties in the tree item is a list of the tree items of the same class as the parent. In part 2 I will explore some of the techniques you can use with this scenario. I will also show how you can bind a Boolean property in your data to the IsChecked and the IsSelected properties in the XamTreeItem.

Getting Started with NetAdvantage Silverlight and WPF: Adding Sample Data

2010-06-09T07:19:00Z

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!

Curtis Taylor is a Control Monster!

2010-06-01T06:36:00Z

Yes, I admit, I have control issues! I am a programmer. I write user interfaces to help people create killer applications! I want those interfaces to give its users the maximum amount of control in producing their ideas. Monsters are wild and out of control. Oftentimes, learning how to engineer a control to do exactly what you want can feel like a monstrous job. It is my job to show you that that monster is really a smart creative force that wants only to show you that with a little bit of knowledge you can go a long way with the products and services Infragistics provides!

For the weeks and months to come, I've decided to write a blog that goes into detail about the various controls Infragistics offers for Silverlight and Windows Presentation Foundation. It is my intention to teach you about the nuances and consistent structure behind our controls. I wish to empower you in using them to produce whatever you want. WPF and Silverlight are flexible enough that you can create virtually any type of UI and UX idea. However, creating high-end interfaces is time-consuming and expensive. Infragistics steps in to save you that money and time. Infragistics controls are savvy with the technology they employ. Thus knowledge of the technology and the individual object models for each control will make your jobs easier.

I have been programming user interfaces for over twelve years now. In all my career I have never found one company that not only excelled at engineering excellence, but also went the extra mile to include cutting-edge design and UX principles, intuitive and simple programming models, and top-notch services to help you resolve any issue and realize any idea you might have. With each post to this blog I hope to transmit the excitement I feel about our products, show you some tricks to using them, and communicate why I enjoy designing and programming with them. If you have any requests for ideas or something you would like to see, please feel free to drop me an email or leave a comment here!

WPF Panels and the Aqua Workspace Panel

2009-06-05T18:25:00Z

One of the powerful things about Windows Presentation Foundation and Silverlight is the hierarchical presentation of user interface elements within a dynamic Panel layout. Panels are a part of WPF you don’t hear a lot about, yet are the key aspect of laying out an interface. Panels are used to automate the arrangement and even sizing of interface elements within a View. With a little design, Panels can be used to ensure localized text always fits. Panels can be used to size or anchor elements within resizable containers or windows. Panels can also be used to dynamically implement an algorithm for specific positioning and sizing of children elements.

WPF and Silverlight come with a few useful Panels. The Grid is the most versatile as it can be used to support auto-sizing of elements, a specific layout within a grid of rows and columns, and a percentage ratio for sizing. StackPanel is also useful in that it simply places elements sequentially in a horizontal or vertical stack. The days of only positioning elements using hard-coded x, y coordinates are over. However, WPF and Silverlight do still provide that ability with the Canvas Panel. Both technologies also provide a DockPanel for docking elements to sides of the Panel and a WrapPanel which adds wrapping to the StackPanel. Silverlight adds these last two Panels with its Toolbox controls library. Additionally, WPF provides a simplified Grid Panel called the UniformGrid.

The Panel class is a public class which any programmer can derive from to implement a custom algorithm. Infragistics takes advantage of this ability by creating various custom interfaces for customers, for the community and for internal purposes. The Panel approach is one of many ways to deliver a custom interface. As a result, WPF and Silverlight empower developers and designers to more easily create their own interfaces. And, it can often be more cost effective to utilize third party offerings of custom controls. Infragistics produces complex and highly useful interfaces to help users concentrate on other aspects of development. The Aqua Workspace Panel is an example of this. The Workspace Panel (also called Tiles Panel) will arrange elements according to a specified Grid layout. It will allow the user to size and swap items within the view. It will also present an alternate view where one item can be maximized to fill most of the panel and the rest minimized. When the container panel is resized (by resizing the window), all the elements will size accordingly. This is because the Panel abstraction provides the means for communicating and negotiating with each element to resize and re-position. The same is true for Panel drag and drop. When the user clicks and drags an element, the Panel ensures the items move within the Panel when the user “drags” and is re-positioned when the user “drops” the item into a new space in the Panel.

Panels are just one of the many ways user interfaces can be customized within WPF and Silverlight. This technology also provides custom collection elements derived from ItemsControl which are used to create List Boxes, Menus, Tab Controls and Combo Boxes. Custom Control elements with Control Templates also provide the ability to create user-customizable elements which follow any paradigm you can imagine. Aqua capitalizes on the powerful features of this technology to showcase its immense potential. It is our intention, with our partnership with Microsoft, to empower our collective users, to generate enthusiasm for this technology, and to seed our community with creative, innovative and enjoyable interactive presentations for the Windows software world.