XamDataGrid 101, Part 2 - Custom Colors

[Infragistics] Curtis Taylor / Tuesday, October 26, 2010

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!