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

Jun 07, 2019
6 minutes 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.

XAML

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

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-the-printcellstyle-property-to-customize-cells-printing-appearance-e3227.

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

// Developer Express Code Central Example:
// How to use the PrintCellStyle property to customize cell's printing appearance
// 
// This example shows how to create custom PrintCellStyle for grid columns to bring
// a custom printing appearance for PopupImageEdit, CheckBoxEdit and MemoEdit.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E3227

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Collections.Generic;
using System.Windows.Resources;
using System.IO;
using System.Drawing;
using System.Windows.Data;


namespace GridExample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e) {
            grid.ItemsSource = new List<TestData>() {
                new TestData() { PlainText = "LMA AG", MemoText = "Mercedes-Benz SLK \n 2004 \n Silver", BooleanMember = true, Image = GetImage("/Images/1.png") },
                new TestData() { PlainText = "Western Motors", MemoText ="Rolls-Royce Corniche \n 1975 \n Snowy whight", BooleanMember = false, Image = GetImage("/Images/2.png") },
                new TestData() { PlainText = "Sun car rent", MemoText = "Ford Ranger FX-4\n 1999 \n Red rock", BooleanMember = true, Image = GetImage("/Images/3.png") }
            };
        }

        ImageSource GetImage(string path) {
            return new BitmapImage(new Uri(path, UriKind.Relative));
        }

        private void PrintButton_Click(object sender, RoutedEventArgs e) {
            view.ShowPrintPreview(this);
        }
    }
}

// Developer Express Code Central Example:
// How to use the PrintCellStyle property to customize cell's printing appearance
// 
// This example shows how to create custom PrintCellStyle for grid columns to bring
// a custom printing appearance for PopupImageEdit, CheckBoxEdit and MemoEdit.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E3227

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Media;

namespace GridExample {
    public class TestData {
        public string PlainText { get; set; }
        public string MemoText { get; set; }
        public bool BooleanMember { get; set; }
        public ImageSource Image { get; set; }
    }
}

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
                    xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing"
                    xmlns:dxgt="clr-namespace:DevExpress.Xpf.Grid.Themes;assembly=DevExpress.Xpf.Grid.v13.1"
                    >

    <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" 
                                    Margin="4" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"       
                                    />

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

    <dx:BoolToObjectConverter x:Key="BoolToTextConverter" TrueValue="Avaliable" FalseValue="NotAvaliable" />

    <Style x:Key="CheckEditColumnPrintingStyle" 
           TargetType="dxe:CheckEdit"
           BasedOn="{StaticResource {dxgt:TableViewThemeKey ResourceKey=DefaultPrintCellStyle}}">
        <Style.Setters>
            <Setter Property="dxp:ExportSettings.TargetType" Value="Panel" />
            <Setter Property="DisplayTemplate">
                <Setter.Value>
                    <ControlTemplate TargetType="dxe:CheckEdit">
                        <dxe:TextEdit Text="{Binding Path=Value, Converter={StaticResource BoolToTextConverter}}" HorizontalAlignment="Center" Margin="4"
                                          />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

    <Style x:Key="MemoColumnPrintingStyle" 
           TargetType="dxe:MemoEdit"
           BasedOn="{StaticResource {dxgt:TableViewThemeKey ResourceKey=DefaultPrintCellStyle}}">
        <Style.Setters>
            <Setter Property="dxp:ExportSettings.TargetType" Value="Panel" />
            <Setter Property="DisplayTemplate">
                <Setter.Value>
                    <ControlTemplate TargetType="dxe:MemoEdit">
                        <dxe:TextEdit Text="{Binding Value}"
                                          TextWrapping="Wrap"
                                          IsPrintingMode="True"
                                          Margin="4"
                                          VerticalContentAlignment="Center"
                                          HorizontalContentAlignment="Left"
                                          />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

' Developer Express Code Central Example:
' How to use the PrintCellStyle property to customize cell's printing appearance
' 
' This example shows how to create custom PrintCellStyle for grid columns to bring
' a custom printing appearance for PopupImageEdit, CheckBoxEdit and MemoEdit.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3227

Imports System
Imports System.Windows
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Collections.Generic
Imports System.Windows.Resources
Imports System.IO
Imports System.Drawing
Imports System.Windows.Data


Namespace GridExample
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            AddHandler Loaded, AddressOf MainWindow_Loaded
        End Sub

        Private Sub MainWindow_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
            grid.ItemsSource = New List(Of TestData)() From { _
                New TestData() With {.PlainText = "LMA AG", .MemoText = "Mercedes-Benz SLK " & ControlChars.Lf & " 2004 " & ControlChars.Lf & " Silver", .BooleanMember = True, .Image = GetImage("/Images/1.png")}, _
                New TestData() With {.PlainText = "Western Motors", .MemoText ="Rolls-Royce Corniche " & ControlChars.Lf & " 1975 " & ControlChars.Lf & " Snowy whight", .BooleanMember = False, .Image = GetImage("/Images/2.png")}, _
                New TestData() With {.PlainText = "Sun car rent", .MemoText = "Ford Ranger FX-4" & ControlChars.Lf & " 1999 " & ControlChars.Lf & " Red rock", .BooleanMember = True, .Image = GetImage("/Images/3.png")} _
            }
        End Sub

        Private Function GetImage(ByVal path As String) As ImageSource
            Return New BitmapImage(New Uri(path, UriKind.Relative))
        End Function

        Private Sub PrintButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            view.ShowPrintPreview(Me)
        End Sub
    End Class
End Namespace

' Developer Express Code Central Example:
' How to use the PrintCellStyle property to customize cell's printing appearance
' 
' This example shows how to create custom PrintCellStyle for grid columns to bring
' a custom printing appearance for PopupImageEdit, CheckBoxEdit and MemoEdit.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3227

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Media

Namespace GridExample
    Public Class TestData
        Public Property PlainText() As String
        Public Property MemoText() As String
        Public Property BooleanMember() As Boolean
        Public Property Image() As ImageSource
    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Example: Customizing the Printing Appearance of a Cell