How to: Stretch the Detail Area to Fill the Entire Page

• Jun 07, 2019
• 3 minutes to read

The following example demonstrates how to calculate the height of a usable page area without a page header and a page footer. This might be required to specify the size of a detail area, which fills the entire page.

To do this, it is necessary to implement a converter class that subtracts the height of a page header and footer from the entire usable page height. Then, this converter should be used in a DataTemplate for a detail area.

View Example

Window1.xaml

<Window x:Class="PageHeightDemo.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing" 
        xmlns:local="clr-namespace:PageHeightDemo" 
        Title="Window1"
        Height="300" Width="300">
    <Window.Resources>
        <system:Double x:Key="pageHeaderHeight">40</system:Double>
        <system:Double x:Key="pageFooterHeight">20</system:Double>
        <DataTemplate x:Key="pageHeader">
            <dxe:TextEdit Text="This is a page header" Background="LightGray" Height="{StaticResource pageHeaderHeight}" />
        </DataTemplate>
        <DataTemplate x:Key="detail">
            <dxe:TextEdit Text="This is a sample text." HorizontalAlignment="Center" VerticalAlignment="Center" 
                          dxp:ExportSettings.BorderColor="Blue" dxp:ExportSettings.BorderThickness="1" 
                          Width="{Binding Path=UsablePageWidth, Mode=OneWay}">
                <dxe:TextEdit.Height>
                    <MultiBinding Converter="{local:UsableDetailPageHeightConverter}">
                        <Binding Path="UsablePageHeight" Mode="OneWay"/>
                        <Binding Source="{StaticResource pageHeaderHeight}" />
                        <Binding Source="{StaticResource pageFooterHeight}" />
                    </MultiBinding>
                </dxe:TextEdit.Height>
            </dxe:TextEdit>
        </DataTemplate>
        <DataTemplate x:Key="pageFooter">
            <dxe:TextEdit Text="This is a page footer" Background="Yellow" Height="{StaticResource pageFooterHeight}" />
        </DataTemplate>
    </Window.Resources>
    <Button Content="Show preview" Click="Button_Click" />
</Window>

UsableDetailPageHeightConverter.cs

using System;
using System.Windows.Data;
using System.Windows.Markup;
using System.Globalization;

namespace PageHeightDemo {
    public class UsableDetailPageHeightConverter : MarkupExtension, IMultiValueConverter {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
            double height = (double)values[0];

            for (int i = 1; i < values.Length; i++) {
                height -= (double)values[i];
            }

            return height;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) {
            throw new NotSupportedException();
        }


        public override object ProvideValue(IServiceProvider serviceProvider) {
            return this;
        }
    }
}

Window1.xaml.cs

using System.Windows;
using System.Windows.Controls;
using DevExpress.Xpf.Printing;

namespace PageHeightDemo {

    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e) {
            SimpleLink link = new SimpleLink((DataTemplate)Resources["detail"], 1);
            link.PageHeaderTemplate = (DataTemplate)Resources["pageHeader"];
            link.PageFooterTemplate = (DataTemplate)Resources["pageFooter"];
            link.ShowPrintPreviewDialog(this);
        }
    }
}

Window1.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows
Imports System.Windows.Controls
Imports DevExpress.Xpf.Printing

Namespace PageHeightDemo

    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim link As New SimpleLink(CType(Resources("detail"), DataTemplate), 1)
            link.PageHeaderTemplate = CType(Resources("pageHeader"), DataTemplate)
            link.PageFooterTemplate = CType(Resources("pageFooter"), DataTemplate)
            link.ShowPrintPreviewDialog(Me)
        End Sub
    End Class
End Namespace

UsableDetailPageHeightConverter.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows.Data
Imports System.Windows.Markup
Imports System.Globalization

Namespace PageHeightDemo
    Public Class UsableDetailPageHeightConverter
        Inherits MarkupExtension
        Implements IMultiValueConverter
        Public Function Convert(ByVal values() As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IMultiValueConverter.Convert
            Dim height As Double = CDbl(values(0))

            For i As Integer = 1 To values.Length - 1
                height -= CDbl(values(i))
            Next i

            Return height
        End Function

        Public Function ConvertBack(ByVal value As Object, ByVal targetTypes() As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object() Implements IMultiValueConverter.ConvertBack
            Throw New NotSupportedException()
        End Function


        Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
            Return Me
        End Function
    End Class
End Namespace