How to: Provide Custom Print Cell Appearance

• Aug 29, 2018
• 5 minutes to read

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.

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

MainWindow.xaml.cs

// 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);
        }
    }
}

TestData.cs

// 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; }
    }
}

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

MainWindow.xaml.vb

' 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

TestData.vb

' 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