A popular user-interface in the iOS world is the UIPageControl which renders a small set of dots to indicate the number of pages, with the current page highlighted in some way. This is often used in conjunction with a UIScrollView to navigate between pages in a multi-page layout.
Windows Phone 7 has a Pivot control which allows you to swipe in order to navigate content across multiple screens. However, the Pivot control is most often used when each 'page' has some logic header - in some ways it is analogous to a desktop tab control. I decided to use this control, without specifying headers for each PivotItem, then add my own control to render the 'pips'.
The control that displays the location pips is defined in XAML, with the relationship between this control and the Pivot created via an ElementName binding:
Note the negative top margin for the Pivot, this control still allocates some header space, even when no headers are defined.
The PivotLocationView user control is backed by a simple view model, with model-items for each pip. When the view model is associated with a Pivot control, it creates a child view model for each Pivot Item, then handles the SelectionChanged event in order to keep the selection state synchronized:
The view model for each pivot item is a simple model that implements INotifyPropertyChanged. It has an IsSelected property that reflects the selection state of the Pivot, it also exposes a Color property that indicates the color for each 'pip'. This could have been implemented as a value converter, but there is little point as we already have a view model:
The XAML for this control is very simple, using an ItemsControl to render an ellipse for each 'pip':
Note, the use of design-time data. The following file defines a view model instance:
This makes creating the above user control much easier, because it can be visualised in the designer:
And there you have it, a simple user-control, which when used in conjunction with a Pivot, provides an interface where the user can swipe between pages.