Popup Placement

The location for each step's popup can be defined in XAML using attached properties of the class TourHelper. The properties can be attached to any UIElement.

The following code example marks a TabItem to be usable by the FeatureTour component:

<TabItem Header="Variables"
    tour:TourHelper.ElementID="Variables"
    tour:TourHelper.Placement="BottomCenter">
    <!--Content -->
</TabItem>`

ElementID attaches an ID to the UIElement. That ID is used by the FeatureTour component to identify an UIElement for a specific step.

The Placement property defines the placement of the popup relative to the associated UIElement.

Supported placements are:

Center (popup is displayed without arrows)
TopLeft, TopCenter, TopRight
LeftTop, LeftCenter, LeftBottom
BottomLeft, BottomCenter, BottomRight
RightTop, RightCenter, RightBottom