Navigating directly to a specific screen inside a Panorama or Pivot page


When using a Panorama or Pivot control in your Windows Phone application, you might be tempted to allow the user to pin a specific screen of the control and hence, enable to navigate directly to it. I came across that need in some occasions as part of the applications we are helping developers to build so I came up with a small PoC to demonstrate how you can achieve this (sample code here):

appNavigationMap

 

It basically consists of a Main Panorama Page with 4 buttons that prove the concept of navigating specifically to a screen within a Panorama or Pivot control:

  1. Navigate to a different screen in the same Panorama control:
    PanoramaControl.DefaultItem = Item2;

    Where PanoramaControl and Item2 are:

    <controls:Panorama x:Name="PanoramaControl" Title="my application">
        <controls:Panorama.Background>
            <ImageBrush ImageSource="PanoramaBackground.png"/>
        </controls:Panorama.Background>
     
        <controls:PanoramaItem Name="Item1" Header="first item">
            <StackPanel Height="354">
                <Button Content="This Panorama: item 2" Height="72" Name="thisPA2" Click="thisPA2_Click" />
                <Button Content="Other Panorama" Height="72" Name="otherPA" Click="otherPA_Click"/>
                <Button Content="Other Panorama: item 2" Height="72" Name="otherPA2" Click="otherPA2_Click" />
                <Button Content="Other Pivot: item 2" Height="72" Name="otherPV2" Click="otherPV2_Click" />
            </StackPanel>
        </controls:PanoramaItem>
     
        <controls:PanoramaItem Name="Item2" Header="second item">
        </controls:PanoramaItem>
    </controls:Panorama>

    Important: this approach in particular is actually NOT a navigation, so it doesnโ€™t add a navigation point to the navigation stack.
  2. Navigate to a different Panorama page: I just added this sample for completeness of the PoC, but it is the regular navigation to a page:
    NavigationService.Navigate(new Uri("/Panorama.xaml", UriKind.Relative));

  3. Navigate to a different Panorama page but specifically to one of its screens, in this case the one with index 1:
    NavigationService.Navigate(new Uri("/Panorama.xaml?goto=1", UriKind.Relative));

     
    Then in Panorama.xaml.cs, I catch the navigation event, take the parameter and change the DefaultItem to be the item of MyPanorama with the specified index:
     
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        string strItemIndex;
        if (NavigationContext.QueryString.TryGetValue("goto", out strItemIndex))
            MyPanorama.DefaultItem = MyPanorama.Items[Convert.ToInt32(strItemIndex)];
     
        base.OnNavigatedTo(e);
    }

  4. Navigate to a different Pivot page but specifically to one of its screens, in this case the one with index 1:
    NavigationService.Navigate(new Uri("/Pivot.xaml?goto=1", UriKind.Relative));

     
    Then in Pivot.xaml.cs, I catch the navigation event, take the parameter and change MyPivotโ€™s SelectedIndex:
     
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        string strItemIndex;
        if (NavigationContext.QueryString.TryGetValue("goto", out strItemIndex))
            MyPivot.SelectedIndex = Convert.ToInt32(strItemIndex);
     
        base.OnNavigatedTo(e);
    }

Hope it helps!

Comments (4)

  1. Anonymous says:

    hello ๐Ÿ™‚

    oyeaah, at last i found this ๐Ÿ™‚

    thanks a lot dude ๐Ÿ™‚ u solve my problem ๐Ÿ™‚

    keep posting >_____<

    -bookmarked

  2. Anonymous says:

    How do i navigate to a different screen not on the same page?

  3. Anonymous says:

    Can u post a more clear example?  Don't get it ๐Ÿ™

  4. Anonymous says:

    I have this weird problem when navigating to item. The actual navigation works perfectly just the same way as in the example but when I click the panorama it re-navigates to the first item as a "New". The OnNavigatedTo handler is called twice only if I have the "?goto1" at the end of URI.