Customizing Pivot Grid Colors

• Apr 15, 2018
• 3 minutes to read

PivotGridControl exposes properties that allow you to customize colors of its cells and field values.

You can either set these properties directly or create a style targeting the PivotGridControl that will specify the required colors.

The following table lists pivot grid properties used to customize cell and field value colors.

Property	Description
PivotGridControl.CellBackground	Gets or sets the brush used to paint the background of data cells. This is a dependency property.
PivotGridControl.CellForeground	Gets or sets the brush used to paint the foreground of data cells. This is a dependency property.
PivotGridControl.CellSelectedBackground	Gets or sets the brush used to paint the background of the selected data cell. This is a dependency property.
PivotGridControl.CellSelectedForeground	Gets or sets the brush used to paint the foreground of the selected data cell. This is a dependency property.
PivotGridControl.CellTotalBackground	Gets or sets the brush used to paint the background of total and grand total cells. This is a dependency property.
PivotGridControl.CellTotalForeground	Gets or sets the brush used to paint the foreground of total and grand total cells. This is a dependency property.
PivotGridControl.CellTotalSelectedBackground	Gets or sets the brush used to paint the background of the selected total or grand total cell. This is a dependency property.
PivotGridControl.CellTotalSelectedForeground	Gets or sets the brush used to paint the foreground of the selected total or grand total cell. This is a dependency property.
PivotGridControl.ValueBackground	Gets or sets the brush used to paint the background of field value cells. This is a dependency property.
PivotGridControl.ValueForeground	Gets or sets the brush used to paint the foreground of field value cells. This is a dependency property.
PivotGridControl.ValueSelectedBackground	Gets or sets the brush used to paint the background of the selected field value cell. This is a dependency property.
PivotGridControl.ValueSelectedForeground	Gets or sets the brush used to paint the foreground of the selected field value cell. This is a dependency property.
PivotGridControl.ValueTotalBackground	Gets or sets the brush used to paint the background of total and grand total headers. This is a dependency property.
PivotGridControl.ValueTotalForeground	Gets or sets the brush used to paint the foreground of total and grand total headers. This is a dependency property.
PivotGridControl.ValueTotalSelectedBackground	Gets or sets the brush used to paint the background of the selected total or grand total header. This is a dependency property.
PivotGridControl.ValueTotalSelectedForeground	Gets or sets the brush used to paint the foreground of the selected total or grand total header. This is a dependency property.

Example

The following example demonstrates how to create a custom style for a pivot grid.

In this example, we create and apply a style that sets custom colors for pivot grid cells and field values.

The following image shows the result:

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-pivot-grid-colors-by-creating-a-custom-style-e3829.

MainWindow.xaml

<Window xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="DXPivotGrid_CustomizeBrushes.MainWindow"
        dx:ThemeManager.ThemeName="Office2010Black"
        Height="600" Width="800"
        Title="Main Window">
    <Grid>
        <Grid.Resources>
            <Style x:Key="pivotGridCustomStyle" TargetType="dxpg:PivotGridControl">
                <Setter Property="CellBackground" Value="#b4c7ff"/>
                <Setter Property="CellForeground" Value="Black"/>
                <Setter Property="CellSelectedBackground" Value="#888ea0"/>
                <Setter Property="CellSelectedForeground" Value="White"/>
                <Setter Property="CellTotalBackground" Value="#7599ff"/>
                <Setter Property="CellTotalForeground" Value="Black"/>
                <Setter Property="CellTotalSelectedBackground" Value="#51555f"/>
                <Setter Property="CellTotalSelectedForeground" Value="White"/>
                <Setter Property="ValueBackground" Value="#f3dfaa"/>
                <Setter Property="ValueForeground" Value="Black"/>
                <Setter Property="ValueSelectedBackground" Value="#888ea0"/>
                <Setter Property="ValueSelectedForeground" Value="White"/>
                <Setter Property="ValueTotalBackground" Value="#f1c44a"/>
                <Setter Property="ValueTotalForeground" Value="Black"/>
                <Setter Property="ValueTotalSelectedBackground" Value="#51555f"/>
                <Setter Property="ValueTotalSelectedForeground" Value="White"/>
            </Style>
        </Grid.Resources>
        <dxpg:PivotGridControl Style="{StaticResource ResourceKey=pivotGridCustomStyle}"
                               Name="pivotGridControl1" >
            <dxpg:PivotGridControl.Fields>
                <dxpg:PivotGridField Name="fieldYear" FieldName="OrderDate" Area="ColumnArea"
                                     Caption="Year" GroupInterval="DateYear"/>
                <dxpg:PivotGridField Name="fieldCategoryName" FieldName="CategoryName"
                                     Area="RowArea" Caption="Category"/>
                <dxpg:PivotGridField Name="fieldProductName" FieldName="ProductName"
                                     Area="RowArea" Caption="Product"/>
                <dxpg:PivotGridField Name="fieldQuantity" FieldName="Quantity" Area="DataArea"/>
            </dxpg:PivotGridControl.Fields>
        </dxpg:PivotGridControl>
    </Grid>
</Window>