How to: Customize the Cell Template

  • 2 minutes to read

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

NOTE

The complete sample project How to: Customize the Cell Template is available in the DevExpress Examples repository.

<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>