Windows Phone Application Pivot Control

The Pivot control is the base application control and inside that we will have a Pivotitem control
where we can have multiple items inside a Pivot control.


The Pivot Control is layered into 2
layers; with each layer contains a Grid inside, as the layout root

1)Pivot Headers – This layer is for showing the header title.
2)Pivot Items – This layer is for showing a single Pivotitem to display data.

please make a project with name PivotControlExample and follow the following steps

Note you may need an external  Microsoft.Phone.Controls.dll for this project example. make sure it is available and added to references.

1) copy the following code to MainPage.xaml



   <phone:PhoneApplicationPage
       xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    x:Class="PivotControlExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <controls:Pivot Title="BABY NAMES">
        <controls:PivotItem Header="boys">
            <ListBox x:Name="boyList" Margin="0,0,-12,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17" >
                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PivotItem>
        <controls:PivotItem Header="girls">
            <ListBox x:Name="girlList" Margin="0,0,-12,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17" >
                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PivotItem>
        <controls:PivotItem Header="either">
            <ListBox x:Name="allList" Margin="0,0,-12,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,17" >
                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PivotItem>
    </controls:Pivot>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>


2) copy the following code to MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PivotControlExample
{
    public partial class MainPage : PhoneApplicationPage
    {
        ChildName[] names = new ChildName[10] {new ChildName("Ram", 1, 0),
new ChildName("Shyam", 2, 0),
new ChildName("Manoj", 1, 2),
new ChildName("Manmohan", 1, 2),
new ChildName("Gopal", 1, 2),
new ChildName("Seeta", 1, 0),
new ChildName("Reeta", 2, 0),
new ChildName("Geeta", 2, 1),
new ChildName("Meeta", 2, 0),
new ChildName("Preeta", 1, 0)};

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            boyList.ItemsSource = from n in names
                                  where (n.Gender1 == 1 || n.Gender2 == 1)
                                  orderby n.Name
                                  select new ChildName(n.Name, n.Gender1, n.Gender2);

            girlList.ItemsSource = from n in names
                                   where (n.Gender1 == 2 || n.Gender2 == 2)
                                   orderby n.Name
                                   select new ChildName(n.Name, n.Gender1, n.Gender2);

            allList.ItemsSource = from n in names
                                  orderby n.Name
                                  select new ChildName(n.Name, n.Gender1, n.Gender2);
        }
    }
}


3) make a class with name ChildName.cs and copy the following code to ChildName.cs


using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace PivotControlExample
{
    public class ChildName
    {
public string Name { get; set; }
public int Gender1 {get; set; }
public int Gender2 { get; set; }

        public ChildName()
{

}

public ChildName(string name, int gender1, int gender2)
{
Gender1 = gender1;
Gender2 = gender2;
Name = name;
}
}
}

 please run the example and you can see the output on emulator.