How to Integrate the .NET MAUI PDF Viewer in a Vertical Stack Layout?

It is essential to understand the unique behaviors arising from the layout structure to integrate the .NET PDF Viewer control in a vertical stack layout. When placing a child control inside a vertical stack layout, the child control renders at its original size or its minimum size within the layout regardless of the VerticalOptions used. The height of the vertical stack layout is determined by the combined height of its child controls.

Like other controls, the PDF Viewer also does not automatically adjust its size within a vertical stack layout with respect to the VerticalOptions used. The height of the PDF Viewer may exceed or fall short of the available space in the vertical stack layout, depending on the document size or control’s minimum size. This can lead to difficulties in viewing the document.

To ensure the PDF Viewer occupies the necessary vertical space, it is required to explicitly set the height of the PDF Viewer by dynamically measuring the available space within the vertical stack layout.

Here is a step-by-step process demonstrating the integration of a PDF Viewer into a vertical stack layout. In this example, the PDF Viewer dynamically adjusts its height to fill the available space whenever the size of the vertical stack layout changes.

Step 1: Define the XAML namespace to enable access to the PDF Viewer.

[XAML]

xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer"

Step 2: Add the PDF Viewer to the vertical stack layout. In this example, the stack Layout has only one child, which is the PDF Viewer. You can modify it depending on your use case.

[XAML]

   <VerticalStackLayout>
       <syncfusion:SfPdfViewer x:Name="PdfViewer"/>
   </VerticalStackLayout>

Step 3: To find out if a vertical stack layout’s size is allocated or changed, wire the SizeChanged event.

[XAML]

   <VerticalStackLayout SizeChanged="VStackLayout_SizeChanged">
       <syncfusion:SfPdfViewer x:Name="PdfViewer"/>
   </VerticalStackLayout>

Step 4: In the SizeChanged event handler, give the PDF Viewer the necessary height.

[C#]

/// <summary>
/// Occurs when the size of the vertical stack layout changes.
/// </summary>
private void VStackLayout_SizeChanged(object sender, EventArgs e)
{
   // Check if the sender is a vertical stack layout.
   if (sender is VerticalStackLayout stackLayout)
   {
       // Check if the PDF Viewer is set to fill the vertical stack layout.
       if (PdfViewer.VerticalOptions == LayoutOptions.Fill)
       {
           // Set the height of the PDF Viewer to the height of the vertical stack layout.
           PdfViewer.HeightRequest = stackLayout.Height;
       }
   }
} 

Note: You can skip steps 3 and 4 if you want to provide a predefined HeightRequest for the PDF Viewer when placing inside the stack layout. Have a look at the following code example.

[XAML]

   <VerticalStackLayout>
       <syncfusion:SfPdfViewer x:Name="PdfViewer" HeightRequest="600"/>
   </VerticalStackLayout>

Download the complete sample on GitHub.

Conclusion

I hope you enjoyed learning how to integrate PDF Viewer in a vertical stack layout.

Refer to our .NET MAUI PDF Viewer’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI PDF Viewer Documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI PDF Viewer and other .NET MAUI components.

Please let us know in the following comments if you have any queries or require clarifications. You can also contact us through our support forums, support ticket or feedback portal, or the feedback portal. We are always happy to assist you!