Introducing the PivotIndicator control for Windows Phone

Update: source code is now available on GitHub.

Today I would like to share a nice control which is part of my mysterious Windows Phone 7 app which will be released later this month. I call this control the PivotIndicator control. It can be used in order to show the user all the items in a PivotControl on a single screen, as shortcuts. A small rectangle (which use the phone’s accent color as background) is animated when the current pivot item changes. The user can press any item to immediately go to the associated pivot item.

You can grab the source code here.

Here is a short video showing the control in action:

Now let’s see the details…

  • How to use it?
  1. Adjust the layout of your page to be able to display the PivotIndicator. Typically this involves adding a row with a ‘*’ height.
  2. Use a binding with an ElementName in order to set the Pivot property of the PivotIndicator control
  3. Define the HeaderTemplate property of the PivotIndicator with a DataTemplate which will be used to render each item in the PivotIndicator
  4. You’re done :-)
Here is what is looks like in the demo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
 
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="PIVOT INDICATOR" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="demo" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
 
    <!-- here is the PivotIndicator control -->
    <control:PivotIndicator
        Grid.Row="1"
        Pivot="{Binding ElementName=pivot}">
        <control:PivotIndicator.HeaderTemplate>
            <DataTemplate>
                <!-- this the datatemplate used for each item in the PivotIndicator
                        the DataContext is a PivotItemViewModel in our case -->
                <TextBlock 
                    Text="{Binding Title}"
                    HorizontalAlignment="Center"/>
            </DataTemplate>
        </control:PivotIndicator.HeaderTemplate>
    </control:PivotIndicator>
 
    <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0">
        <controls:Pivot x:Name="pivot" ItemsSource="{Binding PivotItems}">
            <controls:Pivot.HeaderTemplate>
                <DataTemplate>
                    <!-- this is the datatemplate used for the header of the pivot item -->
                    <TextBlock Text="{Binding Title}"/>
                </DataTemplate>
            </controls:Pivot.HeaderTemplate>
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <!-- this is the datatemplate of the content of the pivot item -->
                    <TextBlock
                        Text="{Binding Content}"
                        FontSize="40"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"/>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
        </controls:Pivot>
    </Grid>
</Grid>
  • How it works?
Behind the scene, the PivotIndicator control is actually made of 3 parts:
  • SplitPanel: this is a panel (it derives from Panel) which arrange its children on a single line, and where each item has the same width. The width is computed as the total available width divided by the number of items
  • PivotRectange: this is a small control which contains a rectangle. The rectangle uses the phone’s accent color. Its position is animated based on the currently selected index.
  • PivotIndicator: is the control you will use. It is made of an ItemsControl with a SplitPanel as ItemsPanelTemplate and the PivotRectangle
Source code is documented so you might want to dig in it for more details :-)
Note that I didn’t try but I think the PivotIndicator control should works just fine with a Panorama (and few code adjustments…)

3 thoughts on “Introducing the PivotIndicator control for Windows Phone

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>