Tour Definition

There are 2 model classes that are used to define tours: Tour and Step.

Tour class

The Tour class has basically a list of Steps and a method Start that starts the tour. The property ShowNextButtonDefault determines if the next button for each step is shown or not. The behavior can be overwritten for each step separately (Step.ShowNextButton).

Usually, the Next button is only enabled if the element, associated with the next step, is already loaded. If the property EnableNextButtonAlways is set to true, the next button will be always enabled. In cases where the next element becomes not loaded (e.g. during IFeatureTourNavigator.OnStepEntering), the behavior is undefined.

public class Tour
{
    public string Name { get; set; }
    public bool ShowNextButtonDefault { get; set; }
    public bool EnableNextButtonAlways { get; set; }
    public Step[] Steps { get; set; }
    public void Start() { /* ... */ }
}

Step class

The Step class has an ID that is used to identify the step.

The ElementID is used to identify the UIElement where the step's popup is shown.

The Header and Content properties are the content that are shown in the header / content areas of the popup. In the simplest case, the content can be text that is shown automatically within a TextBlock.

In a more advanced senario, the content may be a view model that is visualized with a specific data template. The data template must be defined in a resource dictionary of an element above the targeted UIElement. The key of the data template to use can be defined by the HeaderDataTemplateKey and the ContentDataTemplateKey properties.

Values for read-only properties have to be passed during object creation to the constructor.

public class Step
{
    // .ctors
    public Step(string elementID, object header, object content) { \* ... *\ }
    public Step(string elementID, object header, object content, string id) { \* ... *\ }

    // IDs
    public string ID { get; }
    public string ElementID { get; }    

    // Content
    public object Header { get; }
    public object Content { get; }

    // Content Templates
    public string HeaderDataTemplateKey { get; set; }
    public string ContentDataTemplateKey { get; set; }    

    // Configuration
    public bool? ShowNextButton { get; set; }
}

Usage

A tour can be created and started as following:

var tour = new Tour()
{
    Name = "My Demo Tour",
    ShowNextButtonDefault = true,
    Steps = new []
    {
        new Step("Element01", "Header 01", "Content 01", "StepID01"),
        new Step("Element02", new HeaderViewModel(), new ContentViewModel(), "StepID02")
        {
            ContentDataTemplateKey = "ContentTemplate02",
            HeaderDataTemplateKey = "HeaderTemplate02"
        },
        // ...
    }
};

tour.Start();