Windows Presentation Foundation (WPF) introduced a new way to think of controls and data items: they no longer have a predefined layout, behavior, or appearance; instead, these characteristics are determined by a template (see also Styles). WPF defines 3 major types of templates: the ControlTemplate, which defines the default appearance and behavior of a control, the DataTemplate, which defines how content in a ContentControl and/or data items in an ItemsControl are displayed, and the ItemsPanelTemplate, which identifies the type of panel used to display items in an ItemsControl.
Using Templates
Template Parts
As explained in the previous section, the default appearance of a control, including any triggers that may change its appearance or behavior, is defined by a ControlTemplate, which is composed of various elements that represent different parts of a control, some of which are required in order to handle specific control behavior. The absence of these template parts will result in controls not behaving as expected.
Required template parts are defined per class. To identify an element as a template part, its name must be set to the name of the template part (see Table 2) that it represents through the x:Name attribute.
Table 2: Template part names
| Template part name |
Class |
Utilization |
| PART_AdornerDecoratorForDragAndDrop |
DataGridControl class |
When providing a new DataGridControl template, a AdornerDecorator named PART_AdornerDecoratorForDragAndDrop must be contained in the ControlTemplate as the ItemsPresenter and/or ScrollViewer's parent. This adorner will take into consideration any RenderTransform applied to a grid. |
| PART_ScrollViewer |
DataGridControl class |
When providing a new DataGridControl template, a ScrollViewer named PART_ScrollViewer should be contained in the ControlTemplate. The rows contained in a grid are contained in the ItemsPanel, which is contained in the viewer. |
| PART_CellsHost |
Row class |
When providing a new Row template (or a template for any class derived from Row), a Panel named PART_CellsHost should be contained in the ControlTemplate. The cells contained in the row that have not been explicitly positioned, will be contained in this panel. |
| PART_RowFocusRoot |
Row class |
When providing a new Row template (or a template for any class derived from Row), a FrameworkElement named PART_RowFocusRoot should be contained in the ControlTemplate to indicate the focus root of the row. |
| PART_ColumnResizerThumb |
ColumnManagerCell class |
When providing a new ColumnManagerCell template, a Thumb named PART_ColumnResizerThumb should be contained in the ControlTemplate to allow columns to be resized. |
| PART_RowResizerThumb |
RowSelector class |
When providing a new RowSelector template, a Thumb named PART_RowResizerThumb should be contained in the ControlTemplate to allow rows to be resized. |
| PART_GroupLevelIndicatorsHost |
GroupLevelIndicatorPane class |
When providing a new GroupLevelIndicatorPane template, a Panel named PART_GroupLevelIndicatorsHost, which will contain the GroupLevelIndicator objects, should be contained in the ControlTemplate. |
| PART_DistinctValuesHost |
AutoFilterControl class |
When providing a new AutoFilterControl template, a ListBox or Selector-base control identified as the PART_DistinctValuesHost template part should be provided (see Custom Auto-filtering Controls). |
| PART_HierarchicalGroupByControlTreeView |
HierarchicalGroupByControl Class |
When providing a new HierarchicalGroupByControl template, a TreeView named PART_HierarchicalGroupByControlTreeView should be contained in the ControlTemplate. |
Fixed Columns vs. Templates 
In order to support fixed columns when creating a new row template for a table-view layout, the following criteria must be met:
- The PART_CellsHost template part must be a FixedCellPanel.
- The FixedCellCount property of the FixedCellPanel must be bound to the table view's FixedColumnCount property using a TwoWay ViewBinding.
The fixed-cell-panel properties listed below are also usually bound when provided a new row template for a table-view layout:
- SplitterStyle (TemplateBinding xcdg:TableView.FixedColumnSplitterStyle)
- SplitterWidth (xcdg:ViewBinding FixedColumnSplitterWidth)
- ShowSplitter (xcdg:ViewBinding ShowFixedColumnSplitter)
- FixedColumnDropMarkPen (xcdg:ViewBinding FixedColumnDropMarkPen)
If a new template is provided for a DataGridControl and fixed columns are to be supported, it is essential that a TableViewScrollViewer be used. This scroll viewer is responsible for preserving the TranslateTransforms that fix and scroll elements, as well as executing the PageLeft and PageRight actions according to the reduced viewport. It is also recommended that an AdornerDecorator be located above the TableViewScrollViewer of the templated DataGridControl to support drag and dropping of the fixed-column splitter correctly.
Examples
All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.
Example 1: Providing a cell-content template
The following example demonstrates how to provide a new CellContentTemplate, using property element syntax, for a boolean column that displays a check mark when the cell's value is true, and an "x" when it is false.
This example assumes that the grid is bound to the Products table of the Northwind database.
| XAML |
 Copy Code |
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_products"
Source="{Binding Source={x:Static Application.Current},
Path=Products}"/>
</Grid.Resources>
<xcdg:DataGridControl x:Name="ProductsGrid"
ItemsSource="{Binding Source={StaticResource cvs_products}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="Discontinued">
<xcdg:Column.CellContentTemplate>
<DataTemplate>
<Image x:Name="img" Source="D:\true.png" Stretch="None" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding}" Value="False">
<Setter TargetName="img" Property="Source" Value="D:\false.png" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</xcdg:Column.CellContentTemplate>
</xcdg:Column> </xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</Grid> |
Example 2: Providing a group header-control template
The following example demonstrates how to provide, through a style, a new GroupHeaderControl template.
| XAML |
Copy Code |
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<Style TargetType="{x:Type xcdg:GroupHeaderControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xcdg:GroupHeaderControl}"> <Border Background="Orange" BorderThickness="2">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding RelativeSource={RelativeSource
TemplatedParent}, Path=Group.IsExpanded}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}">
<xcdg:DataGridCollectionViewSource.GroupDescriptions>
<xcdg:DataGridGroupDescription PropertyName="ShipCountry"/>
</xcdg:DataGridCollectionViewSource.GroupDescriptions>
</xcdg:DataGridCollectionViewSource>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid> |
Example 3: Providing a data-cell template
The following example demonstrates how to provide, through a style, a new ControlTemplate for the DataCells that will display the cells as buttons.
| XAML |
Copy Code |
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<Style TargetType="{x:Type xcdg:DataCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xcdg:DataCell}">
<Button>
<Button.Content>
<ContentPresenter/>
</Button.Content>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"/>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid> |
Example 4: Providing a data-row template
The following example demonstrates how to provide, through a style, a new ControlTemplate for DataRow objects. The columns that are contained in the grid will be limited to those specified in the ItemProperties of the DataGridCollectionViewSource.
This example assumes that the grid is bound to the Employees table of the Northwind database.
| XAML |
Copy Code |
<Grid>
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
Source="{Binding Source={x:Static Application.Current},
Path=Employees}">
<xcdg:DataGridCollectionViewSource.ItemProperties>
<xcdg:DataGridItemProperty Name="LastName"/>
<xcdg:DataGridItemProperty Name="FirstName"/>
<xcdg:DataGridItemProperty Name="Photo"/>
<xcdg:DataGridItemProperty Name="Title"/>
<xcdg:DataGridItemProperty Name="Notes"/>
<xcdg:DataGridItemProperty Name="EmployeeID"/>
<xcdg:DataGridItemProperty Name="TitleOfCourtesy"/>
<xcdg:DataGridItemProperty Name="HireDate"/>
<xcdg:DataGridItemProperty Name="Extension"/>
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>
<ControlTemplate x:Key="titleLessCell"
TargetType="xcdg:DataCell">
<ContentPresenter Content="{xcdg:CellContentBinding}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
</ControlTemplate>
<Style x:Key="customCardViewDataRow"
TargetType="{x:Type xcdg:DataRow}">
<Setter Property="Background"
Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xcdg:DataRow}">
<Border x:Name="PART_RowFocusRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid>
<StackPanel>
<DockPanel>
<!-- The photo is at the left. -->
<Grid DockPanel.Dock="Left"
Margin="3,4,2,2"
MaxWidth="85"
MaxHeight="85">
<xcdg:DataCell FieldName="Photo"
Template="{StaticResource titleLessCell}"/>
</Grid>
<StackPanel Margin="8,0,0,0">
<StackPanel Orientation="Horizontal">
<xcdg:DataCell FieldName="TitleOfCourtesy"
FontSize="16"
Template="{StaticResource titleLessCell}"/>
<TextBlock Text=" "/>
<xcdg:DataCell FieldName="FirstName"
FontSize="16"
Template="{StaticResource titleLessCell}"/>
<TextBlock Text=" "/>
<xcdg:DataCell FieldName="LastName"
FontSize="16"
Template="{StaticResource titleLessCell}"/>
</StackPanel>
<xcdg:DataCell FieldName="Title"
FontSize="14"
Template="{StaticResource titleLessCell}"/>
<Border BorderThickness="1"
BorderBrush="#999999"
Margin="0,2,0,2"/>
<StackPanel x:Name="PART_CellsHost"
Orientation="Vertical"
Grid.IsSharedSizeScope="True"/>
</StackPanel>
</DockPanel>
<Expander Header="Notes"
Padding="5"
TextElement.Foreground="{TemplateBinding Foreground}">
<xcdg:DataCell FieldName="Notes"
Template="{StaticResource titleLessCell}"/>
</Expander>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
</Style>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_employees}}"
ItemContainerStyle="{StaticResource customCardViewDataRow}"
View="CardView">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="Notes"
TextWrapping="Wrap"/>
</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</Grid>
|
Example 5: Providing an insertion-row template
The following example demonstrates how to provide, through a style, a new InsertionRow template. In order to preserve the fixed-column splitter in the insertion row, we need to use a FixedCellPanel as the "PART_CellsHost" template part.
| XAML |
Copy Code |
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"/>
<Style x:Key="insertionrow_style"
TargetType="{x:Type xcdg:InsertionRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xcdg:InsertionRow}"> <Expander Header="Insert New Data">
<Border BorderBrush="LightBlue"
BorderThickness="0, 1, 0, 1">
<xcdg:FixedCellPanel x:Name="PART_CellsHost"
FixedCellCount="{xcdg:ViewBinding FixedColumnCount, Mode=TwoWay}"
SplitterStyle="{TemplateBinding xcdg:TableView.FixedColumnSplitterStyle}"
SplitterWidth="{xcdg:ViewBinding FixedColumnSplitterWidth}"
ShowSplitter="{xcdg:ViewBinding ShowFixedColumnSplitter}"
FixedColumnDropMarkPen="{xcdg:ViewBinding FixedColumnDropMarkPen}"
Background="LightBlue"/> </Border>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> </Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedFooters>
<DataTemplate>
<xcdg:InsertionRow Style="{StaticResource insertionrow_style}"/>
</DataTemplate> </xcdg:TableView.FixedFooters>
</xcdg:TableView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</Grid> |
Example 6: Formatting a cell's content
he following example demonstrates how to format a cell's content to display a numeric value as a currency value. Although it might be tempting to apply the converter to a column's DisplayMemberBinding, this is not the recommended location as not only will the cells' content be formatted but the data type of the cells' content will be changed to the converter's.
| XAML |
Copy Code |
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orderdetails"
Source="{Binding Source={x:Static Application.Current},
Path=OrderDetails}"/>
<local:CurrencyConverter x:Key="currencyConverter"/>
<DataTemplate x:Key="currency_celltemplate">
<TextBlock Text="{Binding Converter={StaticResource currencyConverter}}"/>
</DataTemplate> </Grid.Resources>
<xcdg:DataGridControl x:Name="OrderDetailGrid"
ItemsSource="{Binding Source={StaticResource cvs_orderdetails}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="UnitPrice"
CellContentTemplate="{StaticResource currency_celltemplate}"/> </xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</Grid> |
The following code provides the implementation of the CurrencyConverter class used in the previous example.
| VB.NET |
Copy Code |
Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Data
Imports System.Globalization
Namespace Xceed.Wpf.Documentation
<ValueConversion(GetType(Double), GetType(String))> _
Public Class CurrencyConverter
Implements IValueConverter
Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
ByVal parameter As Object, ByVal culture As CultureInfo) As Object
If (Not value Is Nothing) AndAlso ((Not Object.Equals(String.Empty, value))) Then
Try
' Convert the string value provided by an editor to a double before formatting.
Dim tempDouble As Double = System.Convert.ToDouble(value, _
CultureInfo.CurrentCulture)
Return String.Format(CultureInfo.CurrentCulture, "{0:C}", tempDouble)
Catch e1 As FormatException
Catch e2 As OverflowException
End Try
End If
Return String.Format(CultureInfo.CurrentCulture, "{0}", value)
End Function
Public Function ConvertBack(ByVal value As Object, _
ByVal targetType As Type, _
ByVal parameter As Object, _
ByVal culture As CultureInfo) As Object
Return Double.Parse(TryCast(value, String), _
NumberStyles.Currency, _
CultureInfo.CurrentCulture)
End Function
End Class
End Namespace |
| C# |
Copy Code |
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Data;
using System.Globalization;
namespace Xceed.Wpf.Documentation
{
[ValueConversion( typeof( double ), typeof( string ) )]
public class CurrencyConverter : IValueConverter
{
public object Convert( object value, Type targetType,
object parameter, CultureInfo culture )
{
if( ( value != null ) && ( !object.Equals( string.Empty, value ) ) )
{
try
{
// Convert the string value provided by an editor to a double before formatting.
double tempDouble = System.Convert.ToDouble( value, CultureInfo.CurrentCulture );
return string.Format( CultureInfo.CurrentCulture, "{0:C}", tempDouble );
}
catch( FormatException )
{
}
catch( OverflowException )
{
}
}
return string.Format( CultureInfo.CurrentCulture, "{0}", value );
}
public object ConvertBack( object value, Type targetType,
object parameter, CultureInfo culture )
{
return double.Parse( value as string, NumberStyles.Currency,
CultureInfo.CurrentCulture );
}
}
} |
Example 7: Changing the group-header text
The following example demonstrates how to change the information displayed in each GroupHeaderControl by creating an implicit DataTemplate targeting the Group data type.
| XAML |
Copy Code |
<Grid>
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}">
<xcdg:DataGridCollectionViewSource.GroupDescriptions>
<xcdg:DataGridGroupDescription PropertyName="ShipCountry"/>
</xcdg:DataGridCollectionViewSource.GroupDescriptions>
</xcdg:DataGridCollectionViewSource>
<DataTemplate DataType="{x:Type xcdg:Group}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="The "/>
<TextBlock Text="{Binding Value}"/>
<TextBlock Text=" group contains "/>
<TextBlock Text="{Binding Items.Count}"/>
<TextBlock Text=" items."/>
</StackPanel>
</DataTemplate>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid> |
blockShow All / Hide All Link
See Also
Hide All