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

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

<Window x:Class="PageHeightDemo.Window1" 
        Height="300" Width="300">
        <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 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}">
                    <MultiBinding Converter="{local:UsableDetailPageHeightConverter}">
                        <Binding Path="UsablePageHeight" Mode="OneWay"/>
                        <Binding Source="{StaticResource pageHeaderHeight}" />
                        <Binding Source="{StaticResource pageFooterHeight}" />
        <DataTemplate x:Key="pageFooter">
            <dxe:TextEdit Text="This is a page footer" Background="Yellow" Height="{StaticResource pageFooterHeight}" />
    <Button Content="Show preview" Click="Button_Click" />