The xamDataGrid™, xamDataCarousel™, xamDataCards™, and xamDataPresenter™ expose a number of styling points that allow you to fully customize their look and feel. These styling points are simply smaller controls that are used together to make the larger control. Because they are actual controls, you can target and style them as you would any Ultimate UI for WPF control. In less-demanding styling scenarios, simple brush or font settings can achieve the look you’re going for. In more advanced scenarios, you can replace or customize the entire ControlTemplate of these controls.
Before any styling work can begin, you need to know which control to target with a Style. It’s important that you understand how the smaller controls are used by the larger controls at run time. The composition diagrams (see
Links at the end of this topic demonstrate how the individual controls are nested and work together.
Gain an even better understanding of how the controls work together by using the freely available SourceForge® Snoop ( http://blois.us/Snoop ). This tool allows you to attach to a running Windows® Presentation Foundation application and view the application’s VisualTree. Using Snoop, you can quickly learn which control you need to target to achieve the look you’re going for. You’ll look at styling a single control (i.e., the DataRecordCellArea) to get you started. Once you understand the process, you’ll be prepared to identify and style other controls. For a complete list of Styling points, see DataPresenterBase.
In this walkthrough, you are going to change the background color of alternate rows in the grid. This walkthrough shows you how to identify the control responsible for rendering the alternate row background color. You will then learn how to identify which properties need to be set on the control.
Identify the target control.
Using both the composition diagram and Snoop, you can identify the control that needs to be styled as the DataRecordCellArea.
Identify the styling properties.
Now that you know which control to style, you need to determine which properties can be set that affect its appearance. Using the API Reference Guide, navigate to the DataRecordCellArea and expand the Properties section.
There are four properties that begin with the name "Background": BackgroundActive, BackgroundAlternate, BackgroundHover, and BackgroundSelected. Likewise, there are BorderBrush properties defined for the same states: BorderActiveBrush, BorderAlternateBrush, BorderHoverBrush, and BorderSelectedBrush.
Create a default Style.
Now that you have identified the brush properties that may be set, it’s time to create a Style that targets the DataRecordCellArea. This Style can be added to any ResourceDictionary within the scope of the control you are targeting. Because this Style has not been given a key, all DataRecordCellArea controls within its scope will now use Red (#FF0000) for the alternate row background color.
In XAML:
<Style TargetType="{x:Type igDP:DataRecordCellArea}">
<Setter Property="BackgroundAlternate" Value="#FF0000" />
</Style>
Create a keyed Style.
You can also create a keyed Style that is not used by default for all DataRecordCellAreas.
In XAML:
<Style x:Key="customCellArea" TargetType="{x:Type igDP:DataRecordCellArea}">
<Setter Property="BackgroundAlternate" Value="#FF0000" />
</Style>
To apply this style, you must assign it to the DataRecordCellAreaStyle property of FieldLayoutSettings.
In XAML:
<igDP:XamDataGrid x:Key="myGrid">
<igDP:XamDataGrid.FieldLayoutSettings>
<igDP:FieldLayoutSettings DataRecordCellAreaStyle="{StaticResource customCellArea}" />
</igDP:XamDataGrid.FieldLayoutSettings>
</igDP:XamDataGrid>
In many cases, specifying custom brushes or other property values (e.g., BorderThickness and FontFamily) will address your styling needs. In cases where you want to add additional artwork or change the fundamental layout of a control, you will need to customize the control’s Template.
Template editing is best achieved using a tool such as Microsoft® Expression® Blend. When editing Ultimate UI for WPF templates in Expression Blend, it is recommended that you always start with a copy of the default control templates located in the following folder: C:\Program Files (x86)\Infragistics\2020.1\WPF\DefaultStyles. Expression Blend can generate the default Template from a control, but you cannot rely on the tool to pull in the Template with 100% accuracy. Expression Blend ships a copy of the default XAML for the system controls for this very reason. It is important to start from a working Template to ensure that TemplateBinding, Triggers, and ContentPresenters are all working correctly.
You should create a copy of the default styles (C:\Program Files (x86)\Infragistics\2020.1\WPF\DefaultStyles) for use in your application so that you can always start from an original copy.
To create a copy of the default styles:
Create a "resources" folder in your project directory and copy the default XAML files into that folder.
Add the files to your project in either Microsoft Visual Studio® or Expression Blend.
Add a MergedDictionary reference to the new ResourceDictionaries at the desired scope in your document.
In XAML
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="resources/DataPresenterGeneric.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Customize the templates using your editor of choice.
The default ResourceDictionaries can be divided into three primary groups: Brush resources, Express edition resources, and Full version resources. There are three sets of these groups, each targeting a specific assembly: InfragisticsWPF.dll, InfragisticsWPF.Editors.dll and InfragisticsWPF.DataPresenter.dll:
DataPresenterGeneric_Brushes.xaml
DataPresenterGeneric_Express.xaml
DataPresenterGeneric.xaml
Primary brushes used by each set of Styles are defined in the _Brushes.xaml files. You can quickly alter the look and feel of the controls by editing the resources found in these files.
This walkthrough demonstrated how to identify a sub-control within a larger control, find available styling properties for that control, and create both a default and keyed Style that targets that control. This is the process you will use when targeting any region of the controls included with Ultimate UI for WPF. Spend some time learning how the sub-controls are composited in the larger controls and you’ll be well on your way to custom styling.