Click here to Skip to main content
15,880,796 members
Articles / Desktop Programming / WPF

Integrated Help System in a WPF Application

Rate me:
Please Sign up or sign in to vote.
4.78/5 (15 votes)
20 Jun 2013CPOL6 min read 43.1K   2K   45  
Quick guideline to understand a workflow of screen without reading long and boring(!!) documentation guide
This is a quick guideline to get rid of reading long and boring documentation and give you very basic information about a screen.
<UserControl x:Class="IntegratedHelpInWPF.DetailsHelpView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:localConverter="clr-namespace:IntegratedHelpInWPF.Converter"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <localConverter:BooleanToTextConverter x:Key="BooleanToTextConverter" />
        <BooleanToVisibilityConverter x:Key="VisibilityOfBool" />
        <Style x:Key="HyperlinkLikeButton" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" />
            <Setter Property="Cursor" Value="Hand" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid Margin="40">
        <FlowDocumentReader Visibility="{Binding ElementName=popupCloseButton, Path=IsChecked, Converter={StaticResource VisibilityOfBool}}" >
            <FlowDocument>
                <Paragraph>
                    <Bold></Bold>
                </Paragraph>
                <Paragraph>
                    <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
                    <Paragraph.FontSize>36</Paragraph.FontSize>
                    <Bold>Integrated Help system in a WPF Application</Bold>
                </Paragraph>
                <Paragraph>
                    <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
                    <Paragraph.FontSize>18</Paragraph.FontSize>
                    <Bold>Intrduction</Bold>
                </Paragraph>
                <Paragraph>
                    I have a WPF application and I am thinking of creating a help documentation for it. If anyone needs help on some screen and press F1, I don’t like to open a traditional CHM or HTML based screen for that. So my plan is that the screen will describe its own help description and controls will give their introduction and also show you the activity flow to make the user understand about the basic flow of the screen. But what if the user also wants an introduction to each control click while working on a screen? OK, then I will also print the basic introduction into the below status bar on the mouse click of the control (if it has any). It is just a quick guideline to get rid of reading long and boring documentation and give you a very basic information of a screen.
                    Still not clear to you?!! No problem. Let us take a simple screen to understand my thinking here:

            A simple Login screen which controls:

    Textbox for user name
    Password box
    Login button
    And a button to open a Wish-List child scre
                </Paragraph>
                <Paragraph>
                    <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
                    <Paragraph.FontSize>18</Paragraph.FontSize>
                    <Bold>Concept</Bold>
                </Paragraph>
                <Paragraph>
                    To do this I have prepared XML documentation, where I have kept all the necessary descriptions of a control like Title, Help Description, URL for an online guide, shortcut key/hot key, and flow index (if any) for ordering the activity flow sequences. You do need to synchronize the XML yourself if you have changes to any workflow or short-cut/hot keys, which is true for other documentation also. It of course is not a replacement for a  documentation guide, just a quick guideline for the user. That is why I have kept an URL here to go to the on-line guide for more details.
                </Paragraph>
            </FlowDocument>
        </FlowDocumentReader>
        <StackPanel Orientation="Vertical" >
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontSize" Value="25" />
                    <Setter Property="FontWeight" Value="Bold" />
                </Style>
            </StackPanel.Resources>
            <TextBlock Name="HelpTitle" />  
            <ToggleButton Name="popupCloseButton" Checked="popupCloseButton_Checked" Unchecked="popupCloseButton_Checked" IsChecked="false" Style="{StaticResource HyperlinkLikeButton}" Height="30" >
                <ToggleButton.Content>
                    <TextBlock Text="{Binding ElementName=popupCloseButton, Path=IsChecked, Converter={StaticResource BooleanToTextConverter}}" />
                </ToggleButton.Content>
            </ToggleButton>
        </StackPanel>
    </Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader PracticePRO Software Systems Inc
United States United States
In my childhood, my uncle has shown me how to see the cloud in a close look and I understand that one can draw some elements of the Earth in the sky-canvas if he/she wants to. After that the cloud becomes closer to me and It teaches me one thing that, a deeper-look to something will give you some clues to draw your imagination. You can able to see that one which you have build-up in your mind.

Years past, I have started my career as a software engineer and has been looking for passion in my coding and development which I should be to enjoy my profession and has started asking myself- 'am I doing any engineering here?!' Is my code becoming that thing which I have designed in my mind? So to find that answer I have tried that old solution here... I have decided to come closer to my code and start analyzing them. And it is really working for me and at least it gives me the confidence that I can build something that I really want to. I can draw my thinking there through my code and can build-up my vision that I have designed in my mind. It also helps me to think out of the box, solve each problems by making blocks and make me careful on each steps.

• Morshed's Technical Blog site: http://morshedanwar.wordpress.com/

• Morshed's Technical articles those are published in Codeproject site: http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=2992452

• Morshed's Linkedin profile: http://www.linkedin.com/in/morshedanwar

• Morshed's Facebook Profile : http://www.facebook.com/morshed.pulok

Beside all these I like to do - photography and music. Here is my Flickr photos : http://www.flickr.com/photos/morshed_anwar/

Comments and Discussions