Display PDFs with the view state in UWP

The view state is the data we capture, store, and eventually use to restore what the user is currently looking at after recreating a PdfView — for example, after suspending and restoring your app.

This guide aims to provide an explanation of the concepts behind the view state and how it is used inside Nutrient.

What’s in the ViewState

The ViewState class is convenient for examining the entire current view state. This class can be used via the relevant JSON methods to persist the state. In order to restore ViewState properties, there are corresponding asynchronous methods provided by the UI Controller for the individual properties, or you can set them all at once with SetViewStateAsync.

For example, CurrentPageIndex is the currently visible dominant page. Just like the page index returned by Controller.GetCurrentPageIndexAsync, the view state’s page index that relates to the first page in a document is 0. To restore the current page, use the method SetCurrentPageIndexAsync.

LayoutMode describes how pages inside a view are displayed, e.g. a value of Double means pages will always be displayed in groups of two.

ZoomMode describes the current zoom factor, e.g. a value of FitToViewPort means the view will fit the current page into the viewport completely.

ScrollMode describes the mode of page scrolling in the viewport — either continuous or per spread (paginated). Continuous scrolling allows users to scroll vertically through a document using a mouse wheel, scrollbar, or touch. There is no horizontal scrolling available. When set to per spread (paginated), the user may change the current page by using the page controls in the toolbar or by clicking with mouse. When on a device with touch enabled, the user may change the current page by touching either side of the displayed pages.

This video demonstrates pinching to zoom in per spread mode, followed by touching beside the document page to change the current page. Notice the light circles indicating where the user is touching the device.

InteractionMode describes the current interaction mode, e.g. a value of Pan means the pan tool is active and allows the user to navigate using mouse dragging or touch dragging. A value of Text means a text edit box is currently active and taking input from a keyboard. A value of None means no interaction mode is currently active. There are several interaction modes, but these are just three examples.

Additional properties of the ViewState include SidebarMode, SidebarPlacement, ShowToolbar, ShowAnnotations, ReadOnly, KeepFirstSpreadAsSinglePage, AllowPrinting, and PreventTextCopy.