BuyLog In
Example E3227
Visible to All Users

WPF Data Grid - Customize the Appearance of Printed/Exported Information

This example demonstrates how to use our WPF GridControl's styles and templates to customize the appearance of printed or exported (WYSIWYG mode) content.

Example Structure

PrintCustomCells

View File: PrintCustomCells/MainWindow.xaml

This project creates a custom PrintCellStyle for grid columns. In this sample project, the GridControl contains MemoEdit, CheckEdit, and PopupImageEdit editors:

image

Here is the output in print preview mode:

image

PrintCustomRows

View File: PrintCustomRows/MainWindow.xaml

This project uses the PrintRowTemplate property to fully alter the layout of printed rows. This project also customizes column headers (PrintHeaderTemplate) and our WPF Data Grid’s total summary panel (PrintFooterTemplate).

Here is the layout used for this example:

image

And here is the print preview for this particular example:

image

PrintCustomGroupRows

View File: PrintCustomGroupRows/MainWindow.xaml

This project uses the PrintGroupRowTemplate property to display images in printed group rows. It also removes parentheses from group summaries.

image

Here’s the print preview for this particular example:

image

Documentation

More Examples

Example Code

PrintCustomCells/MainWindow.xaml 
XAML
<Window x:Class="PrintCustomCells.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:PrintCustomCells"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
        xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing"
        Height="450" Width="800">
    <Window.Resources>
        <dx:BoolToObjectConverter x:Key="BoolToTextConverter" TrueValue="Avaliable" FalseValue="Not Avaliable"/>
        <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"
                                          VerticalContentAlignment="Center"
                                          HorizontalContentAlignment="Center"
                                          Margin="4"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
        
        <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="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" 
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Margin="4"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <dxg:GridControl Name="grid">
            <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.View>
                <dxg:TableView Name="view"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
        <Button Grid.Row="1" Content="Show Print Preview" Command="{Binding Commands.ShowPrintPreview, ElementName=view}"/>
    </Grid>
</Window>
PrintCustomRows/MainWindow.xaml 
XAML
<Window x:Class="PrintCustomRows.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:PrintCustomRows"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        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"
        Height="450" Width="800">
    <Window.Resources>
        <dx:BoolToObjectConverter x:Key="BoolToTextConverter" TrueValue="Avaliable" FalseValue="Not Avaliable"/>
        <DataTemplate x:Key="CustomPrintHeaderTemplate">
            <dxe:TextEdit Text="Car rental list" 
                          IsPrintingMode="True" 
                          Background="#333E5E"
                          Foreground="White"
                          VerticalAlignment="Stretch" 
                          HorizontalAlignment="Stretch" 
                          HorizontalContentAlignment="Right"
                          FontWeight="Bold" 
                          FontSize="20" 
                          Padding="12" 
                          Width="{Binding Path=Content.(dxg:GridPrintingHelper.PrintRowInfo).TotalHeaderWidth}"/>
        </DataTemplate>

        <DataTemplate x:Key="CustomPrintRowTemplate">
            <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 Image}"
                                       Grid.Row="0" 
                                       Grid.RowSpan="2" 
                                       Grid.ColumnSpan="2"
                                       IsPrintingMode="True"
                                       HorizontalAlignment="Stretch"/>

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

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

        <DataTemplate x:Key="CustomPrintFooterTemplate">
            <dxe:TextEdit Text="{Binding Path=Content.View.DataControl.Columns[PlainText].TotalSummaryText, Mode=OneWay}"
                          IsPrintingMode="True"
                          Background="#333E5E"
                          Foreground="White"
                          VerticalAlignment="Stretch"
                          HorizontalAlignment="Right"
                          HorizontalContentAlignment="Center"
                          FontWeight="Bold"
                          FontSize="12"
                          Padding="12"
                          Width="{Binding Path=Content.(dxg:GridPrintingHelper.PrintRowInfo).TotalHeaderWidth}"/>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <dxg:GridControl Name="grid">
            <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.TotalSummary>
                <dxg:GridSummaryItem DisplayFormat="Total cars count: {0}" FieldName="PlainText" SummaryType="Count"/>
            </dxg:GridControl.TotalSummary>
            <dxg:GridControl.View>
                <dxg:TableView Name="view" 
                               ShowTotalSummary="True"
                               
                               PrintHeaderTemplate="{StaticResource CustomPrintHeaderTemplate}"
                               PrintRowTemplate="{StaticResource CustomPrintRowTemplate}" 
                               PrintFooterTemplate="{StaticResource CustomPrintFooterTemplate}"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
        <Button Grid.Row="1" Content="Show Print Preview" Command="{Binding Commands.ShowPrintPreview, ElementName=view}"/>
    </Grid>
</Window>
PrintCustomGroupRows/MainWindow.xaml 
XAML
<Window x:Class="PrintCustomGroupRows.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:PrintCustomGroupRows"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        Height="450" Width="800">
    <Window.Resources>
        <local:RemoveParenthesesConverter x:Key="ParenthesesConverter"/>
        <local:PrintRowInfoToImageSourceConverter x:Key="ImageSourceConverter"/>

        <DataTemplate x:Key="PrintGroupRowTemplate">
            <Grid Width="{Binding Path=Content.(dxg:GridPrintingHelper.PrintGroupRowInfo).CaptionCell.Width}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <dxg:CellFillControl Style="{Binding Path=Content.(dxg:GridPrintingHelper.PrintRowInfo).PrintRowIndentStyle}"/>
                <dxe:ImageEdit Source="{Binding Content.GroupValue.Value, Converter={StaticResource ImageSourceConverter}}"
                               Style="{Binding Path=Content.(dxg:GridPrintingHelper.PrintGroupRowInfo).CaptionCell.PrintGroupRowStyle}"
                               IsPrintingMode="True"
                               Grid.Column="1"
                               Width="32"
                               Height="32"
                               BorderThickness="1,0,0,1"/>
                <dxe:TextEdit EditValue="{Binding Path=Content.(dxg:GridPrintingHelper.PrintGroupRowInfo).CaptionCell.Text, Mode=OneWay}"
                              Style="{Binding Path=Content.(dxg:GridPrintingHelper.PrintGroupRowInfo).CaptionCell.PrintGroupRowStyle}"
                              IsPrintingMode="True"
                              Grid.Column="2"
                              BorderThickness="0,0,0,1"
                              HorizontalAlignment="Stretch"/>
                <dxe:TextEdit EditValue="{Binding Path=Content.(dxg:GridPrintingHelper.PrintGroupRowInfo).FirstColumnCell.Text, Mode=OneWay, Converter={StaticResource ParenthesesConverter}}"
                              Style="{Binding Path=Content.(dxg:GridPrintingHelper.PrintGroupRowInfo).CaptionCell.PrintGroupRowStyle}"
                              IsPrintingMode="True"
                              Grid.Column="3"
                              BorderThickness="0,0,1,1"
                              HorizontalAlignment="Right"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <dxg:GridControl x:Name="grid">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="ID"/>
                <dxg:GridColumn FieldName="Name"/>
                <dxg:GridColumn FieldName="Value"/>
                <dxg:GridColumn FieldName="Category" GroupIndex="0"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.GroupSummary>
                <dxg:GridSummaryItem FieldName="Value" SummaryType="Sum"/>
                <dxg:GridSummaryItem SummaryType="Count"/>
            </dxg:GridControl.GroupSummary>
            <dxg:GridControl.View>
                <dxg:TableView x:Name="view" PrintAllGroups="False" PrintGroupRowTemplate="{StaticResource PrintGroupRowTemplate}"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
        <Button Grid.Row="1" Content="Show Print Preview" Command="{Binding Commands.ShowPrintPreview, ElementName=view}"/>
    </Grid>
</Window>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.