https://github.com/v4ss3ur/guideline.wpf

GuideLine is a C# WPF library designed to create interactive, step-by-step tutorials within your application. It highlights specific controls, dims the rest of the interface, and provides dialog-based explanations to guide users through various features.
https://github.com/v4ss3ur/guideline.wpf

guide guideline overlay tool tutorial wpf

Last synced: 28 days ago
JSON representation

GuideLine is a C# WPF library designed to create interactive, step-by-step tutorials within your application. It highlights specific controls, dims the rest of the interface, and provides dialog-based explanations to guide users through various features.

• Host: GitHub
• URL: https://github.com/v4ss3ur/guideline.wpf
• Owner: V4SS3UR
• License: bsd-3-clause
• Created: 2024-05-29T19:56:52.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-08-29T10:05:20.000Z (5 months ago)
• Last Synced: 2024-12-16T15:23:10.100Z (about 1 month ago)
• Topics: guide, guideline, overlay, tool, tutorial, wpf
• Language: C#
• Homepage:
• Size: 41 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GuideLine: Interactive Tutorial Overlay for WPF Applications

GuideLine is a powerful library for C# WPF applications that allows developers to create interactive, step-by-step tutorials. Enhance user experience by guiding users through your application with highlighted controls and explanatory dialogs.



              



## Features

- **Highlight Controls**: Draw attention to specific controls while dimming the rest of the application.

- **Explanatory Dialogs**: Provide contextual information and instructions for each step of the tutorial.

- **Navigation**: Easily navigate through tutorial steps with options to go to the previous step, next step, or skip the tutorial entirely.

- **Customization**: Customize the appearance and behavior of the tutorial overlays and dialogs to fit your application’s style.

## Getting Started

### Prerequisites

- .NET Framework or .NET Core with WPF support.

- Visual Studio or any compatible IDE for WPF development.

### Installation

Install the [GuideLine.WPF NuGet package](https://www.nuget.org/packages/GuideLine.WPF/) :

```

Install-Package GuideLine.WPF

```

### Usage

#### 1. Add the GuideLine View to Your XAML root view

Include the GuideLine_View control in your main window or the appropriate user control.

```xml

    

        

        

            

        

        

```

Code behind :

```cs

private void MainGuideline_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)

{

    var guideLine_View = (GuideLine_View)sender;

    GuideLine_Dialog_View guideLine_Dialog_View = guideLine_View.FindChild();

    if (e.Key == System.Windows.Input.Key.Left)

    {

        var guideLineManager = guideLine_View.DataContext as GuideLineManager;

        guideLineManager.CurrentGuideLine.ShowPreviousStep();

        FocusManager.SetFocusedElement(guideLine_Dialog_View, this);

    }

    if (e.Key == System.Windows.Input.Key.Right)

    {

        var guideLineManager = guideLine_View.DataContext as GuideLineManager;

        guideLineManager.CurrentGuideLine.ShowNextStep();

        FocusManager.SetFocusedElement(guideLine_Dialog_View, this);

    }

}

```

#### 2. Define GuideLine Steps in the ViewModel or anywhere else

Create instances of GuideLineStep to define each step in your guideline. Each step should specify the title, message, and the UI element to highlight (UIElement object or name).

```cs

using GuideLine.WPF;

private void ShowGuide()

{

    UIElement DateDropdown = FindTheUIElement();

    GuideLineManager guideLineManager = new GuideLineManager();

    guideLineManager.AddGuideLine(new GuideLineItem(new GuideLineStep[]

    {

        new GuideLineStep(

            title: "Change Date",

            message: "You can change the calendar year by selecting a year from the dropdown list.",

            uiElement: DateDropdown),

        new GuideLineStep(

            title: "Add Topics to Report",

            message: "To allocate hours, check or drag and drop a topic into the reporting section.",

            uiElementNames: new string[] { "subjectListPanel", "reportPanel" }),

        // Access Guide

        new GuideLineStep(

            title: "Access Guide",

            message: "Thank you for following this guide. To access it again, click on the following button.",

            uiElementName: "GuideButton"),

    }));

    guideLineManager.StartGuideLine("MainGuideline");

}

```

## Customization

#### Highlight Appearance

You can customize the highlight appearance by setting the HighlightCornerRadius and HighlightMargin properties on the GuideLine_View control.

#### Animation

Enable or disable animations using the AnimateDialog property. You can also set the duration of the animation using the AnimationDuration property.

#### Dialog template

Here is the default template : [Default GuideLine_Dialog_View template](https://github.com/V4SS3UR/GuideLine/blob/master/GuideLine/WPF/View/GuideLine_Dialog_View.xaml)



              



## Contributing

Contributions are welcome! Please submit pull requests or open issues to discuss potential improvements.

---

Enhance your application’s user onboarding experience with GuideLine!