How to control a back key for diffrent pages designed on the main page(single page) only?

Question

I have design three buttons in three different stack panel in windows phone project,i.e button1,button2,button3. I have set the visibility property of button1 to visible,i.e visibilty="visible" and rest button visibilty property to collapse,so that on runnning the project,main page should show the button1 only, I have also done the coding for all three different button such as on clickin button1,button 2 should display,and on clicking button2,button3 should display,here is the code..

private void button1_Click_1(object sender, RoutedEventArgs e)
{
    button1.Visibility = Visibility.Collapsed;
    stackPanel1.Visibility = Visibility.Visible;
}


    private void button2_Click(object sender, RoutedEventArgs e)
    {
        stackPanel1.Visibility = Visibility.Collapsed;
        stackPanel2.Visibility = Visibility.Visible;

    }

I want to handle the back key button in such a manner that when I click on button1,button2 sholud display,whn i click on button2,buttton3 sholud display,now if I click on back button(hardware) i sholud move to button2,and again if i click on back key,i should move to button1. What i am experiencing momentarily,when i click on the back button after any button click,app is closed which is the defalut behavior of windows phone. Please help me out. Here is my complete xamal code`

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <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 x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <StackPanel Height="244" HorizontalAlignment="Left" Margin="77,166,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="316">
            <Button Content="Button1" Height="71" Name="button1" Width="160" Click="button1_Click" />
        </StackPanel>

        <StackPanel Height="247" HorizontalAlignment="Left" Margin="129,240,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="267" Visibility="Collapsed">
            <Button Content="Button2" Height="71" Name="button2" Width="160" Click="button2_Click" />
        </StackPanel>



        <StackPanel Height="247" HorizontalAlignment="Left" Margin="129,240,0,0" Name="stackPanel3" VerticalAlignment="Top" Width="267" Visibility="Collapsed">
            <Button Content="Button3" Height="71" Name="button3" Width="160" Click="button3_Click" />
        </StackPanel>

    </Grid>
</Grid>

<!--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>-->

here is my .cs code:

 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 backkeybehave
  {
    public partial class MainPage : PhoneApplicationPage
    {
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }



    private void button3_Click(object sender, RoutedEventArgs e)
    {


    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        stackPanel1.Visibility = Visibility.Collapsed;
        stackPanel2.Visibility = Visibility.Visible;
    }

    private void button2_Click(object sender, RoutedEventArgs e)
    {
        stackPanel2.Visibility = Visibility.Collapsed;
        stackPanel3.Visibility = Visibility.Visible;
    }


   }
 }

Answer 1

You need to implement your own logic to track what should happen when you override the onbackkeypress.

For example, if pressing back when button3 is visible should always show button2 you could use

if (button3.visibility == visibility.visible)
{
  button3.visibility = visibility.collapsed;
  button2.visibility = visibility.visible;
  e.cancel = true;
}

But it's something you need to think carefully about, and include all the possible navigation paths.

Answer 2

Don't do that, back key is for back-stack navigation, not for in-page navigation.

On the other hand, if you really want to do it anyway, take a look at PhoneApplicationPage.OnBackKeyPress and use that for your app logic.