But with WPF and FlowDocumentReader and FlowDocument, I actually enjoyed writing the help for a personal application I've developed. (Statement of fact: This is all my code, I own it and I'm not charging for it. I have all rights to it. The XAML code refers to GIMP web uri's and GIMP is Open Source. GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program. I have all rights to all of the images I've provided. I provide them here with no restrictions.)
So here goes.
I start out by adding a Help folder to your project. Under the Help Folder add a WPF Navigationwindow. Here is my XAML code for the Navigation window.
<NavigationWindow x:Class="HelpProject.Help.OverExposureHelp" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="OverExposure Help" Height="600" Width="800" ShowInTaskbar="False" WindowStartupLocation="CenterScreen" Foreground="Blue"> <Navigationwindow.Content > <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="25*" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="75*" /> </Grid.ColumnDefinitions> <TreeView Name="tree" FontSize="10pt" SelectedItemChanged="HelponselectedItemChanged" > <TreeViewItem Header="Program Overview" Tag="Help/Overview.xaml" /> <TreeViewItem Header="Copyright Information" Tag="Help/OverExposureAbout.xaml" /> <TreeViewItem Header="GIMP" Tag="Help/Gimp.xaml" /> </TreeView> <GridSplitter Grid.Column="1" Width="6" HorizontalAlignment="Center" VerticalAlignment="Stretch" /> <Frame Name="frame" Grid.Column="2" /> </Grid> </Navigationwindow.Content> </NavigationWindow>
Notice I've split my window up into 25% for the navigation tree view with 'Program Overview', 'Exploring the Menus', 'Copyright Information', and 'GIMP' tree view items. The grid splitter allows the user to change the real estate used for the tree view and frame that contains the help content.
All that is left to do is to create the 'Page' objects in the XAML referenced in Overview.xaml, OverExposureAbout.xaml,
and GIMP.xaml.
For Overview.xaml, simply add a new WPF Page object to the Help folder. Here is the xaml code.
<Page x:Class="HelpProject.Help.OverView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="OverExposure Overview" Foreground="Blue"> <FlowDocumentReader ViewingMode="Scroll"> <FlowDocument> <Paragraph TextAlignment="Center" FontSize="16pt"> <Bold>Program Overview</Bold> </Paragraph> <Paragraph> OverExposure is an application to help you to manage and enjoy your digital photos. It is like an old 35mm light table updated for today's technology to let you catalog, manipulate and find your photos quickly and easily. </Paragraph> <Paragraph > The left pane resembles the 'folders' pane in Windows Explorer with the additions of items for Keywords and Publishing targets like FaceBook and Flickr. </Paragraph> <Paragraph> The right pane shows thumbnails for the image files found in the selected folder. </Paragraph> <Paragraph> <Image Source="/Images/OverExposureMainwindow.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> <Italic><Bold>Features:</Bold></Italic> </Paragraph> <Paragraph> 1. It will handle hundreds of thousands of photos. </Paragraph> <Paragraph > 2. You can enlarge the thumbnails to see more detail. </Paragraph> <Paragraph> <Image Source="/Images/OverExposureMainWindow_1.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 3. You can easily move photos from folder to folder or from your camera to a folder by simply selecting one or more thumbnails and dragging and dropping them onto a folder. </Paragraph> <Paragraph> <Image Source="/Images/OverExposureMainWindow_2.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 4. You can optionally change the obscure file names assigned by your camera to the your descriptive folder names by dragging and dropping one or more thumbnails onto a folder. </Paragraph> <Paragraph> <Image Source="/Images/OptionallyChangeName.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 5. OverExposure assigns the descriptive folder name as a 'keyword' for your photo and uses the Desktop Search Engine so you can instantly search and find your photos. </Paragraph> <Paragraph> <Image Source="/Images/search.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 6. OverExposure uses your photo's metadata (keywords, title, author, subject, date taken, comment and copyright) with the Desktop Search Engine to find the photos you want when you want them. </Paragraph> <Paragraph> 7. If you double click on a thumbnail you'll see a fullsized image with all of its metadata. You can easily add, change or delete the keywords, title, author, subject, comments, date taken and copyright which help you further catalog and find your photos. </Paragraph> <Paragraph> <Image Source="/Images/FullSizedImageWithMetadata.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 8. As your mouse 'hovers' over a thumbnail, you'll instantly see a larger image of your photo with some of its metadata. </Paragraph> <Paragraph> <Image Source="/Images/MouseHover.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 9. You can add new keywords and keyword categories. Each Keyword has a CheckBox. If you select one or more keyword CheckBoxes and drag and drop a thumbnail onto one of the checked keywords, OverExposure adds all of the checked keywords to the image's metadata. </Paragraph> <Paragraph> <Image Source="/Images/KeywordsHelp.png" Width="450" Margin="5"/> </Paragraph> <Paragraph> 10. OverExposure intfaces with GIMP to allow you to edit your photos. Click on <Hyperlink NavigateUri="http://www.gimp.org/about/introduction.html">Gimp Features</Hyperlink> for information about GIMP. </Paragraph> <Paragraph> Click on <Hyperlink NavigateUri="http://sourceforge.net/projects/gimp-win/">Download and Install GIMP</Hyperlink> for instructions on how to download and install GIMP-2.6 on Windows. </Paragraph> <Paragraph> <Hyperlink NavigateUri="http://www.gimp.org/tutorials/">Gimp Tutorials</Hyperlink> </Paragraph> </FlowDocument> </FlowDocumentReader> </Page>
Notice I've added some screenshots, and links to GIMP web pages. It is easy to write the content within the <Paragraph></Paragraph> sections and simply let the layout engine take care of resizing the controls so everything fits and responds correctly to user actions that change the size of the frame.
Here is a screenshot of the final result.
Notice the controls at the bottom of the help content frame. On the left is a magnifying glass that allows you to search the content in the frame. On the right are controls that let you change the size of the object, organize them in one or two columns. You can look at a page at a time or there is a control that let's you scroll through the entire content.
At the top left of the NavigationWindow, you'll the normal navigation buttons to allow you to go backwards or forwards.
Here are the other xaml files to round out the help system.
First, OverExposureAbout.xaml.
<Page x:Class="OverExposure.Help.OverExposureAbout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="OverExposure Copyright Information" Width="520" Height=" 530" Foreground="Blue"> <FlowDocumentReader ViewingMode="Scroll"> <FlowDocument> <Paragraph TextAlignment="Center" FontSize="16pt"> Copyright Information </Paragraph> <Paragraph TextAlignment="Center" FontSize="12pt"> © 2009 by Windward Rail Software </Paragraph> <BlockUIContainer> <Image Source="/Images/SuspendedAnimation.png" Width="500" /> </BlockUIContainer> </FlowDocument> </FlowDocumentReader> </Page>
Here is what the finished product looks like:
And then GIMP.xaml.
<Page x:Class="OverExposure.Help.GIMP" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="GIMP GNU's Image Manipulation Program" Foreground="Blue"> <FlowDocumentReader ViewingMode="Scroll"> <FlowDocument> <Paragraph TextAlignment="Center" FontSize="16pt"> <Bold>GIMP GNU's Image Manipulation Program</Bold> </Paragraph> <Paragraph> GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as <Bold> <Italic>photo retouching</Italic></Bold>, <Bold><Italic>image composition</Italic></Bold> and <Bold><Italic>image authoring</Italic></Bold>. </Paragraph> <Paragraph> <Italic> <Bold>Features and Capabilities</Bold> </Italic> </Paragraph> <Paragraph> <Bold><Italic>Painting</Italic></Bold> </Paragraph> <Section Margin="40,0,0,0" > <Paragraph> Full suite of painting tools including Brush, Pencil, Airbrush, Clone, etc. </Paragraph> <Paragraph> Sub-pixel sampling for all paint tools for high quality anti-aliasing </Paragraph> <Paragraph> Extremely powerful gradient editor and blend tool </Paragraph> <Paragraph> Supports custom brushes and patterns </Paragraph> </Section> <Paragraph > <Bold><Italic>Advanced Manipulation</Italic></Bold> </Paragraph> <Section Margin="40,0,0,0"> <Paragraph> Full alpha channel support </Paragraph> <Paragraph> Layers and channels </Paragraph> <Paragraph> Multiple Undo/Redo </Paragraph> <Paragraph> Editable text layers </Paragraph> <Paragraph> Transformation tools including rotate, scale, shear and flip </Paragraph> <Paragraph> Selection tools including rectangle, rounded rectangle, ellipse, free, fuzzy </Paragraph> <Paragraph> Foreground extraction tool </Paragraph> <Paragraph> Advanced path tool doing bezier and polygonal selections. </Paragraph> <Paragraph> Transformable paths, transformable selections </Paragraph> <Paragraph> Quickmask to paint a selection </Paragraph> </Section> <Paragraph> Animation </Paragraph> <Section Margin="40,0,0,0"> <Paragraph>Load and save animations in a convenient frame-as-layer format</Paragraph> <Paragraph>MNG support</Paragraph> <Paragraph>Frame Navigator </Paragraph> <Paragraph>Onion Skin</Paragraph> <Paragraph>Bluebox</Paragraph> </Section> <Paragraph> File Handling </Paragraph> <Section Margin="40,0,0,0"> <Paragraph>File formats supported include bmp, gif, jpeg, mng, pcx, pdf, png, ps, psd, svg, tiff, tga, xpm, and many others</Paragraph> <Paragraph>Load, display, convert, save to many file formats</Paragraph> <Paragraph>SVG path import/export</Paragraph> </Section> <Paragraph> <Hyperlink NavigateUri="http://www.gimp.org/screenshots/">GIMP Screen Shots</Hyperlink> </Paragraph> <Paragraph> <Hyperlink NavigateUri="http://www.gimp.org/docs/">Documentation</Hyperlink> </Paragraph> <Paragraph> <Hyperlink NavigateUri="http://www.gimp.org/tutorials/">Gimp Tutorials</Hyperlink> </Paragraph> <Paragraph> <Hyperlink NavigateUri="http://www.gimp.org/">News</Hyperlink> </Paragraph> </FlowDocument> </FlowDocumentReader> </Page>
Here is another screenshot of the final product. In this case I've shown the links to GIMP web pages as
underlined text GIMP Screen Shots, Documentation, GIMP Tutorials and News. You can click on these an they will cause the appropriate GIMP web pages to be shown in the content Frame.
You can easily substitute your own images for mine in the xaml code and see how easily you can build really functional help subsystems for your applications.
I'd be happy to supply all of the files for this tutorial if anyone is interested.
MultiQuote
| 