Skip to content

Templating

Jan-Niklas Schäfer edited this page Apr 13, 2018 · 4 revisions

It is possible to create a custom control template for the whole popup. The demo application contains the OrginalTheme as well as one ExampleTheme that is slightly different.

View Model

The view model, that will be bound to the template, is of type TourViewModel. It has some basic properties and commands:

Properties

  • Content (object) - content of the current step
  • Header (object) - header of the current step
  • Placement (Placement) - the placement, defined for the element of the current step.
  • ActualPlacement (Placement) The actual placement, usually equal to Placement. May change in cases where the popup does not fit on the screen.
  • ContentTemplate (DataTemplate) - the DataTemplate, defined for the current step's content or the default content template.
  • HeaderTemplate (DataTemplate) - the DataTemplate, defined for the current step's header or the default header template.
  • ButtonText (string) - the text shown on the button. Equal to TextLocalization.Next or TextLocalization.Close for the last step
  • ShowDoIt (bool) - indicates if the "do it" button should be shown.
  • ShowNext (bool) - indicates if the "Next / Close" button should be shown.
  • CurrentStepNo (int) - number of the current step
  • TotalStepsCount (int) - total number of all steps of the tour
  • HasTourFinished (bool) - indicates if the current step is the last step.

Commands

  • CmdClose
  • CmdNext
  • CmdDoIt

Custom View Model

With version 1.2.0, it is also possible to use a custom view model behind the popup. That may be helpful for advanced scenarios when using custom templates.

To use a custom view model, just set the factory method as shown below:

FeatureTour.SetViewModelFactoryMethod(tourRun => new CustomTourViewModel(tourRun));

Note that the custom view model has to derive from TourViewModel:

public class CustomTourViewModel : TourViewModel
{
    public CustomTourViewModel(ITourRun run)
        : base(run) { }

    public string CustomProperty => "Any Text";
}
Clone this wiki locally