Customizing the Appearance of Data Cells when Printing or Exporting the Grid

  • 6 min to read

When printing a grid, the appearance of its data cells is defined by the DisplayTemplate specified in a cell's printing style. To customize a cell's printing appearance, create a new control template for a cell and assign it to DisplayTemplate within a custom printing cell style.

The following example shows how to render images within data cells to which a PopupImageEdit is assigned.

<Style x:Key="ImageColumnPrintingStyle" 
       TargetType="{x:Type dxe:PopupImageEdit}" 
       BasedOn="{StaticResource {dxgt:TableViewThemeKey ResourceKey=DefaultPrintCellStyle}}">

   <Setter Property="dxp:ExportSettings.TargetType" Value="Panel"/>
   <Setter Property="DisplayTemplate">
       <Setter.Value>
           <ControlTemplate TargetType="dxe:PopupImageEdit">

               <dxe:ImageEdit Source="{Binding Path=Value}"
                              IsPrintingMode="True" 
                               />

           </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>

All controls used in a template must be adjusted for printing. Controls inherited from BaseEdit, must have the BaseEdit.IsPrintingMode property set to true.

Other controls must be adjusted for printing via the ExportSettings attached property. Specify the ExportSettings.TargetType property. This property is defined in the "xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing" namespace and specifies how a control should be treated by the DevExpress Printing Subsystem.

To print a standard TextBlock within a cell, set the ExportSettings.TargetType property to Text. To specify a control's background and foreground, use the ExportSettings.Background and ExportSettings.Foreground properties respectively.

NOTE

A new cell printing style must be based on the predefined DefaultPrintCellStyle. The TargetType property must be set to the type of an editor used in the column to which this style will be applied.

NOTE

The ColumnBase.CellTemplate property value does not affect printed/exported cells' appearance.

Example: Customizing the Printing Appearance of a Cell

This example shows how to create custom PrintCellStyle for grid columns to bring a custom printing appearance for PopupImageEdit, CheckBoxEdit and MemoEdit.

To learn more on how to implement similar functionality in Silverlight, refer to the T245823 example.

<Window x:Class="GridExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:local="clr-namespace:GridExample" 
        Width="600" Height="350"
        >

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/GridExample;component/Themes/PrintCellStylesWPF.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>        
    </Window.Resources>

    <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <dxg:GridControl Name="grid" AutoGenerateColumns="AddNew">
            <dxg:GridControl.Columns>

                <dxg:GridColumn FieldName="PlainText"/>

                <dxg:GridColumn FieldName="MemoText" 
                                PrintCellStyle="{StaticResource MemoColumnPrintingStyle}"
                                >
                    <dxg:GridColumn.EditSettings>
                        <dxe:MemoEditSettings/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>

                <dxg:GridColumn FieldName="BooleanMember"
                                PrintCellStyle="{StaticResource CheckEditColumnPrintingStyle}"
                                > 
                    <dxg:GridColumn.EditSettings>
                        <dxe:CheckEditSettings/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>

                <dxg:GridColumn FieldName="Image"
                                PrintCellStyle="{StaticResource ImageColumnPrintingStyle}"
                                >
                    <dxg:GridColumn.EditSettings>
                        <dxe:PopupImageEditSettings/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>

            </dxg:GridControl.Columns>

            <dxg:GridControl.View>
                <dxg:TableView Name="view"/>
            </dxg:GridControl.View>         
        </dxg:GridControl>

        <Button Grid.Row="1" Width="150" Name="PrintButton" Click="PrintButton_Click" Content="Show print preview"/>
    </Grid>
</Window>