How to: Customize the Cell Template

• Jun 07, 2019
• 2 minutes to read

The following example demonstrates how to use the PivotGridControl.FieldCellTemplate property to customize the appearance of data cells.

MainWindow.xaml

<Window x:Class="HowToCustomizeCellTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid"
        xmlns:local="clr-namespace:HowToCustomizeCellTemplate"
        Title="Custom Cell Template" Height="450" Width="800"  Loaded="Window_Loaded">
    <Grid>
        <dxpg:PivotGridControl x:Name="pivotGridControl1">
            <dxpg:PivotGridControl.Fields>
                <dxpg:PivotGridField
                    x:Name="fieldSales"
                    Area="DataArea"
                    Caption="Product Sales"
                    FieldName="ExtendedPrice">
                </dxpg:PivotGridField>
                <dxpg:PivotGridField
                    x:Name="fieldYear"
                    AllowFilter="False"
                    Area="ColumnArea"
                    Caption="Year"
                    FieldName="OrderDate"
                    GroupInterval="DateYear" />
                <dxpg:PivotGridField
                    x:Name="fieldMonth"
                    AllowFilter="False"
                    Area="ColumnArea"
                    Caption="Month"
                    FieldName="OrderDate"
                    GroupInterval="DateMonth" />
                <dxpg:PivotGridField
                    x:Name="fieldCategoryName"
                    Area="RowArea"
                    AreaIndex="0"
                    Caption="Category"
                    FieldName="CategoryName" />
                <dxpg:PivotGridField
                    x:Name="fieldProductName"
                    Area="RowArea"
                    AreaIndex="1"
                    Caption="Product"
                    FieldName="ProductName" />
            </dxpg:PivotGridControl.Fields>
            <dxpg:PivotGridControl.FieldCellTemplate>
                <DataTemplate>
                    <ProgressBar Name="cellShare" Minimum="0" Margin="3" 
                    Maximum="{Binding Path=RowTotalValue, Mode=OneWay, Converter={local:RoundConverter}}"
                    Value="{Binding Path=Value, Mode=OneWay, Converter={local:RoundConverter}}"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </DataTemplate>
            </dxpg:PivotGridControl.FieldCellTemplate>
        </dxpg:PivotGridControl>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;
using System.Windows.Markup;

namespace HowToCustomizeCellTemplate
{
    public partial class MainWindow : Window {
        public ObservableCollection<MyOrderRow> OrderSourceList { get; set; }

        public MainWindow() {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e) {
            OrderSourceList = DatabaseHelper.CreateData();
            pivotGridControl1.DataSource = OrderSourceList;
            pivotGridControl1.BestFitArea = DevExpress.Xpf.PivotGrid.FieldBestFitArea.FieldHeader;
            pivotGridControl1.BestFit();
        }
    }

    public class RoundConverter : MarkupExtension, IValueConverter {
        #region IValueConverter Members
        public object Convert(object value, Type targetType, object parameter, 
                              System.Globalization.CultureInfo culture) {
            return System.Convert.ToInt32(value);
        }
        public object ConvertBack(object value, Type targetType, object parameter, 
                                  System.Globalization.CultureInfo culture) {
            throw new NotImplementedException();
        }
        #endregion

        public override object ProvideValue(IServiceProvider serviceProvider) {
            return this;
        }
    }
}

MainWindow.xaml.vb

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows
Imports System.Windows.Data
Imports System.Windows.Markup

Namespace HowToCustomizeCellTemplate
    Partial Public Class MainWindow
        Inherits Window

        Public Property OrderSourceList() As ObservableCollection(Of MyOrderRow)

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
            OrderSourceList = DatabaseHelper.CreateData()
            pivotGridControl1.DataSource = OrderSourceList
            pivotGridControl1.BestFitArea = DevExpress.Xpf.PivotGrid.FieldBestFitArea.FieldHeader
            pivotGridControl1.BestFit()
        End Sub
    End Class

    Public Class RoundConverter
        Inherits MarkupExtension
        Implements IValueConverter

        #Region "IValueConverter Members"
        Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert
            Return System.Convert.ToInt32(value)
        End Function
        Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
            Throw New NotImplementedException()
        End Function
        #End Region

        Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
            Return Me
        End Function
    End Class
End Namespace