Navigation using XAML and C# in windows 8 Store Apps
In this article am going to explain about navigation using XAML and C# in windows 8 Store Apps
Implementation of Navigation using C# and Xaml
Step 1: Open VS2012 and select New Project from File Menu.
Step 2: Select template type as Windows Store under Visual C#.
Step 3: We will use Frame object to implement navigation of apps in Windows Store.
Important methods of Frame Object
Navigate method navigates to specified object and
Returns: bool
CanGoBack gets a value that indicates whether there is at least one entry in back navigation history.
Returns: bool - True if there is at least one entry in back navigation history; false if there are no entries in back navigation history or the Frame does not own its own navigation history.
GoBack navigates to the most recent item in back navigation history, if a Frame manages its own navigation history.
Returns: void
CanGoForward gets a value that indicates whether there is at least one entry in forward navigation history.
Returns: bool - True if there is at least one entry in forward navigation history; false if there are no entries in forward navigation history or the Frame does not own its own navigation history.
GoForward navigates to the most recent item in forward navigation history, if a Frame manages its own navigation history.
Returns: void
BackStackDepth gets the number of entries in the navigation back stack.
Returns: int - The number of entries in the navigation back stack.
Step 4: Open MainPage.Xaml and add below code. TextBlock to show page number, and two buttons with event handlers.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="pageTitle" Text="Page 1" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,30,450"/>
<Button Content="Go to Page 2" x:Name="Navigate" Tapped="Navigate_Tapped_1"></Button>
<Button Content="Use Frame's GoForward" x:Name="goForward" Tapped="goForward_Tapped_1" Margin="0,418,0,312" ></Button></Grid>
<TextBlock x:Name="pageTitle" Text="Page 1" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,30,450"/>
<Button Content="Go to Page 2" x:Name="Navigate" Tapped="Navigate_Tapped_1"></Button>
<Button Content="Use Frame's GoForward" x:Name="goForward" Tapped="goForward_Tapped_1" Margin="0,418,0,312" ></Button></Grid>
Step 4: Open MainPage.Xaml.cs and add two methods which will be triggered on click of buttons added in MainPage.Xaml.
private void Navigate_Tapped_1(object sender, TappedRoutedEventArgs e)
{
Frame.Navigate(typeof(BlankPage1));
}
{
Frame.Navigate(typeof(BlankPage1));
}
private void goForward_Tapped_1(object sender, TappedRoutedEventArgs e)
{
if (Frame.CanGoForward)
{
Frame.GoForward();
}
}
{
if (Frame.CanGoForward)
{
Frame.GoForward();
}
}
Step 5: Open BlankPage.Xaml add below code which has one TextBlock and a button.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="pageTitle" Text="Page 2" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,30,450"/>
<Button Content="Go to Page 1" x:Name="Navigate" Tapped="Navigate_Tapped_1"></Button></Grid>
<TextBlock x:Name="pageTitle" Text="Page 2" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,30,450"/>
<Button Content="Go to Page 1" x:Name="Navigate" Tapped="Navigate_Tapped_1"></Button></Grid>
Step 6: Place below code in BlankPage.Xaml.cs.
private void Navigate_Tapped_1(object sender, TappedRoutedEventArgs e)
{
if (Frame.CanGoBack)
{
Frame.GoBack();
}
}
{
if (Frame.CanGoBack)
{
Frame.GoBack();
}
}
Step 7: Now run the application, click of Go to Page 2 button as shown below.
On click of Go to Page 2 button of MainPage you will navigated to second page as shown below.
Step 8: Now run the application again, and click on "Use Frame's GoForward" button. You will notice nothing will happen. Put a debug point in Frame.CanGoForwad as shown below.
Step 9: Now run the application in debug mode if it is not running and click on "Use Frame's GoForward". Select Frame object and go to QuickWatch.. you will notice CanGoForward is false.
And also you will notice BackStackDepth is 0 and CanGoBack is false.
Step 10: Now use "Go to Page 2" button to go to next page. Now put a debug point on BlankPage1.Xaml.cs as shown below.
Step 11: Now click "Go to Page 1" button of BlankPage1.On hitting of above debug point select Frame object and go to QuickWatch.. you will notice CanGoBack has become true as shown below.
And also now you will notice BackStackDepth is 1 but CanGoForward is still false.
Step 12: Now click on "Use Frame's GoForward" button again. The debug point set Step 8 will hit again and now you will notice CanGoForward is true.
Conclusion:
BackStackDepth will be always zero on first page of the application, it will increase incrementally by 1as you move on to next pages.
CanGoBack will be always zero on first page of the application as you don't have any page to go back.
CanGoForward will be zero for any page until you navigate to next page in stack and come back go back to previous page.
This ends the first part of Navigation in Windows Store.
Labels:
Win8MetroApps