Introducing SinglePageViewer

posted 2005-10-10

SinglePageViewer is a new control for viewing flowing text that was introduced at PDC -- astute observes may have noticed it during the keynotes (both Tuesday and Wednesday).

Here's a screenshot and markup sample to get us started:

Screenshot of the SinglePageViewer control, showing some flowing text

<SinglePageViewer xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
                  ZoomIncrement="20" MinZoom="80" MaxZoom="180">
  <FlowDocument>
    <Paragraph FontFamily="Candara" FontSize="16">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Curabitur sodales, sem nec scelerisque aliquam, ipsum nibh
      tristique nisl, eu dictum ipsum neque nec dolor. Nullam
      magna lacus, mollis faucibus, auctor eget, placerat sit
      amet, odio. Morbi feugiat, ligula tristique condimentum
      luctus, eros nisi vestibulum ante, a porta dolor nibh sed
      nisl. Cras a libero vitae leo eleifend tristique. Fusce
      consequat, urna in consectetuer aliquet, felis purus luctus
      nisl, at sollicitudin sem augue quis ante. Fusce convallis
      nibh quis nisl. Fusce dictum faucibus velit. Proin tempus
      orci a leo. Integer suscipit. Vestibulum nisl libero, congue
      at, mollis sed, fringilla nec, lorem. Vestibulum ante ipsum
      primis in faucibus orci luctus et ultrices posuere cubilia
      Curae; Donec ac leo ut lectus tempus vestibulum. Proin vel
      enim eget nisi rhoncus mollis. Duis dolor mauris, dictum
      adipiscing, posuere nec, blandit et, orci.
    </Paragraph>
  </FlowDocument>
</SinglePageViewer>

The UI is a little ugly, and fortunately temporary -- you'll see the new, more graceful version in the next pre-release.

SinglePageViewer does a good job of highlighting Avalon/WPF's ability to dynamically scale and reflow content by bringing the zoom functionality to the forefront. You can use the Zoom, MinZoom, MaxZoom, and ZoomIncrement propeties to tweak the zoom behavior for the viewer.

In the next post, we'll learn how to customize the UI to create a branded look for the document.