Freigeben über


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

  • Anonymous
    December 18, 2012
    hello :)oyeaah, at last i found this :)thanks a lot dude :) u solve my problem :)keep posting >_____<-bookmarked
  • Anonymous
    March 15, 2013
    How do i navigate to a different screen not on the same page?
  • Anonymous
    January 06, 2014
    Can u post a more clear example?  Don't get it :(
  • Anonymous
    June 15, 2014
    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.