How to: Use Custom Printing Templates

• Apr 15, 2018
• 6 minutes to read

This example demonstrates how to use grid’s printing templates to change the grid printing appearance.

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

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-custom-printing-templates-e3228.

PrintingTempates.xaml

<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:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
                    >

    <DataTemplate x:Key="CustomPrintHeaderTemplate">
        <dxe:TextEdit Text="Car rental list" IsPrintingMode="True" Background="#333E5E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="12" 
                      Width="{Binding Path=Content.(dxg:GridPrintingHelper.PrintRowInfo).TotalHeaderWidth}"
                      Foreground="#FFFFFFFF"  FontWeight="Bold" FontSize="20" HorizontalContentAlignment="Right"/>
    </DataTemplate>

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

    <DataTemplate x:Key="CustomPrintRowTemplate">
        <ContentControl Name="contentControl" Foreground="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">

            <Grid DataContext="{Binding DataContext.Content, RelativeSource={RelativeSource TemplatedParent}}"
                  Width="{Binding Path=(dxg:GridPrintingHelper.PrintRowInfo).TotalHeaderWidth}" >
                <Grid DataContext="{Binding DataContext.Content.Row, RelativeSource={RelativeSource TemplatedParent}}"                        
                    Margin="0,5,0,0"
                    >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="150"/>
                    </Grid.ColumnDefinitions>

                    <dxe:ImageEdit Source="{Binding Path=Image}"
                                IsPrintingMode="True" 

                                HorizontalAlignment="Stretch"
                                Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2"
                                />

                    <dxe:TextEdit EditValue="{Binding Path=PlainText}" IsPrintingMode="True" FontSize="32" FontWeight="Bold" 
                                Foreground="White" Background="#7D7D7D7D" VerticalAlignment="Top" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" Padding="15,2" Grid.ColumnSpan="2"
                                />

                    <StackPanel dxp:ExportSettings.TargetType="Panel" 
                            dxp:ExportSettings.Background="#7D7D7D7D"
                            Grid.Row="1" Grid.Column="1" Orientation="Vertical" 
                            >

                        <dxe:TextEdit Text="Description:" IsPrintingMode="True" Foreground="White" FontWeight="Medium" Padding="2"  Margin="1,0" dxp:ExportSettings.Background="#7D7D7D7D"/>
                        <dxe:TextEdit EditValue="{Binding MemoText}" 
                                      TextWrapping="Wrap" IsPrintingMode="True" Foreground="White" Padding="2" Margin="1,0" dxp:ExportSettings.Background="#7D7D7D7D"
                                      />
                        <dxe:TextEdit Text="State:" IsPrintingMode="True" Foreground="White" FontWeight="Medium" Padding="2" Margin="1,7,1,0" dxp:ExportSettings.Background="#7D7D7D7D"/>
                        <dxe:TextEdit Text="{Binding BooleanMember, Converter={StaticResource BoolToTextConverter}}" 
                                      IsPrintingMode="True" Foreground="White" Padding="2" Margin="1,0" dxp:ExportSettings.Background="#7D7D7D7D"
                                      />
                        <dxe:TextEdit Text="Price:" IsPrintingMode="True" Foreground="White" FontWeight="Medium" Padding="2" Margin="1,7,1,0" dxp:ExportSettings.Background="#7D7D7D7D"/>
                        <dxe:TextEdit EditValue="{Binding Price}"
                                      DisplayFormatString=" {0:c2}"
                                      IsPrintingMode="True" Foreground="White" Padding="2" Margin="1,0" dxp:ExportSettings.Background="#7D7D7D7D"
                                      />
                    </StackPanel>
                </Grid>
            </Grid>
        </ContentControl>
    </DataTemplate>

    <DataTemplate x:Key="CustomPrintFooterTemplate">
        <dxe:TextEdit IsPrintingMode="True" Background="#333E5E" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Padding="12" 
                      Width="{Binding Path=Content.(dxg:GridPrintingHelper.PrintRowInfo).TotalHeaderWidth}"
                      Foreground="#FFFFFFFF"  FontWeight="Bold" FontSize="12" HorizontalContentAlignment="Center"
                      Text="{Binding Path=Content.View.DataControl.Columns[PlainText].TotalSummaryText, Mode=OneWay}"
                      >
        </dxe:TextEdit>
    </DataTemplate>

</ResourceDictionary>

MainWindow.xaml.cs

// Developer Express Code Central Example:
// How to use custom printing templates
// 
// This example demonstrates how to use grid's printing templates to change the
// grid printing appearance.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E3228

// Developer Express Code Central Example:
// How to use custom printing templates
// 
// This example demonstrates how to use grid's printing templates to change the
// grid printing appearance.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E3228

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;
using DevExpress.Xpf.Printing;


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 = "Mercedes-Benz SLK", MemoText = "LMA AG \n2004 \nSilver", BooleanMember = true, Image = GetImage("/Images/1.jpg"), Price = 25 },
                new TestData() { PlainText = "Rolls-Royce Corniche", MemoText ="Western Motors \n1975 \nSnowy whight", BooleanMember = false, Image = GetImage("/Images/2.jpg"), Price = 15 },
                new TestData() { PlainText = "Ford Ranger FX-4", MemoText = "Sun car rent\n1999 \nRed rock", BooleanMember = true, Image = GetImage("/Images/3.jpg"), Price = 20 }
            };
        }

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

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

MainWindow.xaml

<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"
        Width="600" Height="350"
        >

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

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

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

                <dxg:GridColumn FieldName="PlainText"/>

                <dxg:GridColumn FieldName="MemoText">
                    <dxg:GridColumn.EditSettings>
                        <dxe:MemoEditSettings/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>

                <dxg:GridColumn FieldName="BooleanMember">
                    <dxg:GridColumn.EditSettings>
                        <dxe:CheckEditSettings/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>

                <dxg:GridColumn FieldName="Image">
                    <dxg:GridColumn.EditSettings>
                        <dxe:PopupImageEditSettings/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>

                <dxg:GridColumn FieldName="Price"/>

            </dxg:GridControl.Columns>

            <dxg:GridControl.TotalSummary>
                <dxg:GridSummaryItem DisplayFormat="Total cars count: {0}" FieldName="PlainText" SummaryType="Count"/>
            </dxg:GridControl.TotalSummary>

            <dxg:GridControl.Resources>

            </dxg:GridControl.Resources>
            <dxg:GridControl.View>
                <dxg:TableView Name="view" 
                               ShowTotalSummary="True"
                               PrintTotalSummary="True"
                               PrintColumnHeaders="True"

                               PrintHeaderTemplate="{StaticResource CustomPrintHeaderTemplate}"
                               PrintRowTemplate="{StaticResource CustomPrintRowTemplate}" 
                               PrintFooterTemplate="{StaticResource CustomPrintFooterTemplate}"

                               ShowGroupPanel="False"
                                />
            </dxg:GridControl.View>
        </dxg:GridControl>

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

TestData.cs

// Developer Express Code Central Example:
// How to use custom printing templates
// 
// This example demonstrates how to use grid's printing templates to change the
// grid printing appearance.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E3228

// Developer Express Code Central Example:
// How to use custom printing templates
// 
// This example demonstrates how to use grid's printing templates to change the
// grid printing appearance.
// 
// You can find sample updates and versions for different programming languages here:
// http://www.devexpress.com/example=E3228

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 double Price { get; set; }
        public bool BooleanMember { get; set; }
        public ImageSource Image { get; set; }
    }
}

MainWindow.xaml.vb

' Developer Express Code Central Example:
' How to use custom printing templates
' 
' This example demonstrates how to use grid's printing templates to change the
' grid printing appearance.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3228

' Developer Express Code Central Example:
' How to use custom printing templates
' 
' This example demonstrates how to use grid's printing templates to change the
' grid printing appearance.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3228

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
Imports DevExpress.Xpf.Printing


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 = "Mercedes-Benz SLK", .MemoText = "LMA AG " & ControlChars.Lf & "2004 " & ControlChars.Lf & "Silver", .BooleanMember = True, .Image = GetImage("/Images/1.jpg"), .Price = 25}, _
                New TestData() With {.PlainText = "Rolls-Royce Corniche", .MemoText ="Western Motors " & ControlChars.Lf & "1975 " & ControlChars.Lf & "Snowy whight", .BooleanMember = False, .Image = GetImage("/Images/2.jpg"), .Price = 15}, _
                New TestData() With {.PlainText = "Ford Ranger FX-4", .MemoText = "Sun car rent" & ControlChars.Lf & "1999 " & ControlChars.Lf & "Red rock", .BooleanMember = True, .Image = GetImage("/Images/3.jpg"), .Price = 20} _
            }
        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

TestData.vb

' Developer Express Code Central Example:
' How to use custom printing templates
' 
' This example demonstrates how to use grid's printing templates to change the
' grid printing appearance.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3228

' Developer Express Code Central Example:
' How to use custom printing templates
' 
' This example demonstrates how to use grid's printing templates to change the
' grid printing appearance.
' 
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E3228

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 Price() As Double
        Public Property BooleanMember() As Boolean
        Public Property Image() As ImageSource
    End Class
End Namespace