Click here to Skip to main content
12,356,616 members (67,664 online)
Click here to Skip to main content

Stats

20.8K views
1.4K downloads
44 bookmarked
Posted

Integrated Help system in a WPF Application

, 20 Jun 2013 CPOL
Quick guideline to understand a workflow of screen without reading long and boring(!!) documentation guide.
IntegratedHelpInWPF
IntegratedHelpInWPF
AttachProperties
bin
Debug
DynamicHelpReference
IntegratedHelpInWPF.vshost.exe.manifest
Commands
DynamicHelpReference
IntegratedHelpInWPF.csproj.user
Languages
Popup
Properties
Resources
IntegratedHelpInWPF.exe
IntegratedHelpInWPF.vshost.exe
IntegratedHelpInWPF.vshost.exe.manifest
Release
IntegratedHelpInWPF.csproj.user
obj
Debug
Resources
TempPE
IntegratedHelpInWPF.vshost.exe.manifest
Converter
IntegratedHelpInWPF.csproj.user
DetailsHelpView.baml
DynamicHelpView.baml
IntegratedHelpInWPF.g.resources
IntegratedHelpInWPF.Properties.Resources.resources
IntegratedHelpInWPF_MarkupCompile.lref
MainWindow.baml
CommonResource.baml
WishlistView.baml
IntegratedHelpInWPF.v11.suo
Assembly
System.Windows.Interactivity.dll
IntegratedHelpInWPF.exe
IntegratedHelpInWPF.pdb
IntegratedHelpInWPF.vshost.exe
IntegratedHelpInWPF.vshost.exe.manifest
System.Windows.Interactivity.dll
IntegratedHelpInWPF.csproj.user
DesignTimeResolveAssemblyReferences.cache
DesignTimeResolveAssemblyReferencesInput.cache
DetailsHelpView.baml
DynamicHelpView.baml
IntegratedHelpInWPF.csproj.GenerateResource.Cache
IntegratedHelpInWPF.csprojResolveAssemblyReference.cache
IntegratedHelpInWPF.exe
IntegratedHelpInWPF.g.resources
IntegratedHelpInWPF.pdb
IntegratedHelpInWPF.Properties.Resources.resources
IntegratedHelpInWPF_MarkupCompile.cache
IntegratedHelpInWPF_MarkupCompile.i.cache
IntegratedHelpInWPF_MarkupCompile.lref
MainWindow.baml
CommonResource.baml
Properties.Resources.Designer.cs.dll
WishlistView.baml
IntegratedHelpInWPF.v11.suo
<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)

Share

About the Author

Morshed Anwar
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." ----- says Morshed Anwar.

• 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 Morshed like to do - photography and music. Here is Morshed's Flickr photos : http://www.flickr.com/photos/morshed_anwar/

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160621.1 | Last Updated 20 Jun 2013
Article Copyright 2012 by Morshed Anwar
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid