Skip to content

Commit 9ca7937

Browse files
authored
Update Scrolling.md
1 parent 0d4e0c4 commit 9ca7937

File tree

1 file changed

+36
-34
lines changed

1 file changed

+36
-34
lines changed

MAUI/PDF-Viewer/Scrolling.md

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,32 @@
11
---
22
layout: post
33
title: Scrolling in .NET MAUI PDF Viewer Control | Syncfusion
4-
description: Learn here all about scrolling functionality in .NET MAUI PDF Viewer including programmatically setting scroll positions and detecting scroll changes.
4+
description: Explore scrolling features in .NET MAUI PDF Viewer, including how to set scroll positions programmatically and detect scroll changes in real time.
55
platform: MAUI
66
control: SfPdfViewer
77
documentation: ug
88
---
99

1010
# Scrolling in .NET MAUI PDF Viewer (SfPdfViewer)
1111

12-
The NET MAUI PDF Viewer has scrolling capabilities that allow users to navigate through content seamlessly. This section will walk you through various aspects of scrolling, including programmatically setting scroll positions and detecting scroll changes.
12+
The .NET MAUI PDF Viewer provides built-in scrolling capabilities that allow users to navigate through PDF content smoothly. This guide covers how to control scroll positions programmatically, detect scroll changes, and manage scroll-related UI elements.
1313

14-
W> Please note that since the PDF Viewer has built-in scrolling capability, it is advised to avoid placing the PDF Viewer inside other controls that also offer scrolling, such as [ScrollView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-8.0). Nesting within such controls may cause unexpected issues.
14+
W> Since the PDF Viewer includes built-in scrolling, avoid placing it inside other scrollable containers like [ScrollView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-8.0), as this may lead to unexpected behavior.
1515

16-
## Scroll Head
16+
## Programmatic Scrolling
1717

18-
You can scroll through pages by simply dragging the scroll head within the UI on Android and iOS platforms.
19-
20-
![Scroll Head](Images\ScrollHead.png)
21-
22-
### Page navigation using scroll head
23-
To navigate to a specific page, tap the scroll head to open the page navigation dialog. Enter a valid page number in the input field present in the dialog, then tap the OK button. Then it navigates to the selected page of the PDF document. Refer to below reference video.
24-
25-
![Page navigation by tapping scroll head](Images\PageNavigationUsingScrollHead.gif)
26-
27-
### Show or hide the scroll head
28-
29-
The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to show or hide the scroll head thumb displayed using the [ShowScrollHead](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowScrollHead) property. Refer to the following code example.
30-
31-
{% tabs %}
32-
{% highlight c# %}
33-
// Hide the scroll head thumb
34-
PdfViewer.ShowScrollHead = false;
35-
{% endhighlight %}
36-
{% endtabs %}
37-
38-
N> The Scroll Head is not available for the Desktop platform (Windows and MAC)
39-
40-
## Navigate to the desired offset programmatically
41-
42-
The [ScrollToOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ScrollToOffset_System_Double_System_Double_) method moves the scroll position of the SfPdfViewer to the specified horizontal and vertical offsets. If the specified offset value is wrong, the scroll will not happen, and the older position will be retained. The offset values are represented in device-independent units.
18+
Use the [ScrollToOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ScrollToOffset_System_Double_System_Double_) method to scroll to a specific horizontal and vertical offset. Offset values are measured in **device-independent units**. If the specified offset is invalid or out of bounds, the scroll action will be ignored and the viewer will retain its current position.
4319

4420
{% tabs %}
4521
{% highlight c# %}
46-
// Navigate to the scroll offset position (100,1000).
22+
// Scroll to position (100, 1000)
4723
PdfViewer.ScrollToOffset(100, 1000);
4824
{% endhighlight %}
4925
{% endtabs %}
5026

51-
## Scroll changes detection
27+
## Detect Scroll Changes
5228

53-
The `PropertyChanged` event can be used to identify the scroll changes in the PDF Viewer effectively. By monitoring the [HorizontalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_VerticalOffset) property changes, you can respond to both the horizontal and vertical scroll movements respectively.
29+
You can monitor scroll changes using the `PropertyChanged` event. By monitoring the [HorizontalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_VerticalOffset) property changes, you can respond to both the horizontal and vertical scroll movements respectively.
5430

5531
The following is the code example for subscribing to the `PropertyChanged` event.
5632

@@ -73,7 +49,7 @@ void SubscribeToPropertyChangedEvent()
7349
{% endhighlight %}
7450
{% endtabs %}
7551

76-
Handle scroll changes by implementing the event handler method. The following code example illustrates how to respond to both horizontal and vertical scroll changes:
52+
The following code example illustrates how implement the event handler and to respond to both horizontal and vertical scroll changes:
7753

7854
{% tabs %}
7955
{% highlight c# %}
@@ -94,7 +70,7 @@ private void PdfViewer_PropertyChanged(object sender,
9470
{% endhighlight %}
9571
{% endtabs %}
9672

97-
## Detecting the end of the document
73+
## Detecting End of Document
9874

9975
You can determine if the control has reached the vertical end of the document by evaluating the following properties:
10076

@@ -133,5 +109,31 @@ private void PdfViewer_PropertyChanged(object sender,
133109
PdfViewer.ClientRectangle.Width >= PdfViewer.ExtentWidth);
134110
}
135111
}
112+
136113
{% endhighlight %}
137114
{% endtabs %}
115+
116+
## Scroll Head (Mobile Platforms)
117+
118+
On Android and iOS platforms, the scroll head offers a quick way to move through pages. Users can drag the thumb indicator to scroll within the PDF document.
119+
120+
![Scroll Head](Images\ScrollHead.png)
121+
122+
### Page Navigation via Scroll Head
123+
124+
Tap the scroll head to open a page navigation dialog. Enter a valid page number and tap **OK** to jump directly to that page.
125+
126+
![Page navigation by tapping scroll head](Images\PageNavigationUsingScrollHead.gif)
127+
128+
### Show or Hide the Scroll Head
129+
130+
Use the [ShowScrollHead](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowScrollHead) property to control the visibility of the scroll head.
131+
132+
{% tabs %}
133+
{% highlight c# %}
134+
// Hide the scroll head thumb
135+
PdfViewer.ShowScrollHead = false;
136+
{% endhighlight %}
137+
{% endtabs %}
138+
139+
N> The scroll head is available only on **mobile platforms**. It is not supported on **Windows** or **macOS**.

0 commit comments

Comments
 (0)