Developing a Windows Phone 7 Jump List Control

<phone:PhoneApplicationPage 
    x:Class="WP7JumpList.Selection"
     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"
    xmlns:l="clr-namespace:JumpListControl;assembly=JumpListControl"
   xmlns:local="clr-namespace:WP7JumpList"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">  
  
  <phone:PhoneApplicationPage.Resources>
    <local:MonthIndexToStringConverter x:Key="MonthIndexToStringConverter"/>
  </phone:PhoneApplicationPage.Resources>

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock Text="Demonstrates SelectedItem binding, and indicates when the SelectionChanged event is fired by playing a WAV file"
                 TextWrapping="Wrap"
                 Margin="9,-7,0,0" Style="{StaticResource PhoneTextSmallStyle}"/>
    </StackPanel>

    <StackPanel Grid.Row="1"
          Margin="0,20,0,20"
          Height="100"
          DataContext="{Binding Path=SelectedItem, ElementName=list}">
      <TextBlock Text="SELECTED ITEM:"/>
      <TextBlock Text="{Binding Name}"
                 Style="{StaticResource PhoneTextLargeStyle}"/>
    </StackPanel>

    <Grid Grid.Row="2" Margin="12,0,12,0">
      <l:JumpList x:Name="list"
                  ScrollDuration="400">
        
        <!-- create full width category buttons-->
        <l:JumpList.CategoryButtonStyle>
          <Style TargetType="Button">
            <Setter Property="Width" Value="420"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Padding" Value="8"/>
          </Style>
        </l:JumpList.CategoryButtonStyle>     

        <!-- the jump button template renders the month as a string -->
        <l:JumpList.JumpButtonItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Path=., Converter={StaticResource MonthIndexToStringConverter}}"/>
          </DataTemplate>
        </l:JumpList.JumpButtonItemTemplate>
        
        <!-- the category template renders the month as a string -->
        <l:JumpList.CategoryButtonItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Path=., Converter={StaticResource MonthIndexToStringConverter}}"/>
          </DataTemplate>
        </l:JumpList.CategoryButtonItemTemplate>

        <!-- category provider groups by month-->
        <l:JumpList.CategoryProvider>
          <l:DistinctPropertyValueCategoryProvider
                PropertyName="Month"/>
        </l:JumpList.CategoryProvider>

        <l:JumpList.ItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Name}"
                       Padding="5"
                       FontSize="{StaticResource PhoneFontSizeMedium}"/>
          </DataTemplate>
        </l:JumpList.ItemTemplate>
      </l:JumpList>
    </Grid>
    
    
  </Grid>


</phone:PhoneApplicationPage>