MSDN TV Demo Part 1 Continued: Creating an Easy and Enjoyable Reading Experience in WPF

  • Article

Hi world! I’ve grabbed hold of Chris Han’s blogging coattails and will be posting some info about our MSDN TV Demo. Specifically about the built in (free!!) flow and dynamic layout capabilities.

Hyphenation and Optimal Paragraph

Hyphenation is an age old technique to aid in evenly breaking up the content of lines.  Optimal Paragraph is a new optimization technique for the even distribution of content among lines as well as spacing between words.  Both these features work together to offer an attractive reading visual.  The following is a brief demonstration of setting these 2 properties.

 

<FlowDocument IsHyphenationEnabled="False"

IsOptimalParagraphEnabled="False">

 

 

<FlowDocument IsHyphenationEnabled="True"

IsOptimalParagraphEnabled="False">

 

 

<FlowDocument IsHyphenationEnabled="True"

IsOptimalParagraphEnabled="True">

 

Reflow on Zoom and Resize

The user can resize the App window however she sees fit and the content will automatically be laid out to provide the best possible reading experience.  She can also zoom in and out of the content in order for her to discover her best possible reading experience.  The slider zoom control for the FlowDocumentPageViewer provides this functionality.

 

Similarly holding down the Ctrl key and turning the mouse wheel will achieve the same result.  Roll up for zooming in and down for zooming out.

 

Setting the ColumnWidth property indicates a minimum column width that will be used when laying out the content on a large viewing area into multiple columns.  This is done to offer the best reading experience possible.  On a window resize or content zoom, the content will reflow accordingly as demonstrated below.

 

Original

 

 

Content Zoom (note the change in slider position)

 

 

Window Resize

 

And finally when you combine these free built in features with other free rich media capabilities you can end up with something like the following.

Now the overall effect is a little diminished since you can not actually see the movie playing, the 3d animation or hear the sound. Just download the attachment and try it out.

 

Unfortunately the movie file is much too large to post here so I’ve removed it from the demo. I’ve simply commented out the code to make it work.

 

Here are some relevant articles:

FlowDocument.IsHyphenationEnabled Property:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref30/html/P_System_Windows_Documents_FlowDocument_IsHyphenationEnabled.asp

FlowDocument.IsOptimalParagraphEnabled Property: https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref30/html/P_System_Windows_Documents_FlowDocument_IsHyphenationEnabled.asp

Flow Content Element - Reference:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/c7a822f8-aeca-45bd-a258-2852ff28005c.asp

Animation Overview:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/bd9ce563-725d-4385-87c9-d7ee38cf79ea.asp

3-D Graphics Overview:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/67f31ed4-e36b-4b02-9889-dcce245d7afc.asp

Amar Atwal

 

Demo.zip