Page 1 of 1

Write WPF App Help In XAML Using FlowDocumentReader and FlowDocument Write Help in XAML

#1 StCroixSkipper  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 121
  • Joined: 23-December 08

Posted 21 January 2010 - 10:14 AM

I remember when writing the application's help was such drudgery. It wasn't fun. You had to worry about issues like translation and format and myriad other issues that weren't exciting things to spend time on.

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.
Attached Image

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:
Attached Image

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.
Attached Image

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Write WPF App Help In XAML

#2 sonu11185  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-June 11

Posted 26 June 2011 - 04:08 AM

View PostStCroixSkipper, on 21 January 2010 - 10:14 AM, said:

I remember when writing the application's help was such drudgery. It wasn't fun. You had to worry about issues like translation and format and myriad other issues that weren't exciting things to spend time on.

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.
Attachment attachment

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:
Attachment attachment

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.
Attachment attachment

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.


Can you send me all files for this tutorial.
Was This Post Helpful? 0
  • +
  • -

#3 StCroixSkipper  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 121
  • Joined: 23-December 08

Posted 28 June 2011 - 01:54 PM

I think I supplied all of the code in the tutorial. They won't let you submit a tutorial unless you do. I can look them up but it has been awhile ago....

Are you sure all of the code isn't in the tutorial?

It is the pictures that are missing but you can simply substitute you own. These just happen to be my personal pictures that I've collected over the years. The code is all there.
Was This Post Helpful? 0
  • +
  • -

#4 sonu11185  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-June 11

Posted 28 June 2011 - 09:52 PM

View PostStCroixSkipper, on 28 June 2011 - 01:54 PM, said:

I think I supplied all of the code in the tutorial. They won't let you submit a tutorial unless you do. I can look them up but it has been awhile ago....

Are you sure all of the code isn't in the tutorial?

It is the pictures that are missing but you can simply substitute you own. These just happen to be my personal pictures that I've collected over the years. The code is all there.



The tutorial posted by you are just "*.xaml" files. Can you post "*.xaml.cs" file for this tutorial.
Thank you.
Was This Post Helpful? 0
  • +
  • -

#5 StCroixSkipper  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 121
  • Joined: 23-December 08

Posted 29 June 2011 - 12:21 PM

Sure, Good point.
Was This Post Helpful? 0
  • +
  • -

#6 danielcohee  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 04-July 11

Posted 04 July 2011 - 01:57 PM

Great article. Is there anyway I could download your code?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1