How Navigation works in Windows Phone Application using XAML

+3 votes

54 views

Introduction

Navigation means moving from one page to another page on a click. So today I will explain navigation from one page to another page. This article shows how to navigate to the next page with data. So let's start.

First create a Windows Phone blank app and put some controls in the MainPage.xaml. I have put only a single button for navigation but it depends on the kind of page you want to create and what controls you want to add. In my case I am using a single button control just to navigate from main page to my second page with data.

So when the navigate button is clicked the properties will assign some values and navigate to the next page. Now add a blank page to the project and put some controls on the page. Here I am using two controls, a button control and a TextBlock control. The TextBlock control will be used to display the value of the name property of the class and the button will be used to navigate as in the mainpage.

When page3 is loaded in the navigated to method of this page we will check the number of pages in the stack and then remove the number of pages by the BackStackDepth method and we will directly navigate to the mainpage rather than navigating page by page. It will display the number of pages in the stack as well.

Related Articles

We can use the Arc XAML element to draw arcs in XAML. Besides drawing arcs using the Arc element, we can also use the ArcSegment element. The ArcSegment is useful when an arc becomes a part of a graphics path or a larger geometric object.

In this article, we will see how to use the ArcSegment to draw arcs in XAML and WPF.

The ArcSegment object represents an elliptical arc between two points. The ArcSegment class has the five properties Point, Size, SweepDirection, IsLargeArc and RotationAngle.

Data passing means to get data from a page and show that data on another page or getting input from the user and showing what the user has entered into the text box. For that I have added the two pages MainPage.xaml and page1.xaml and I will enter some text into the text box and on clicking Enter or the the submit button it will show the entered text in the second page.

In the mainpage.xaml I have put a stack panel and in the stack panel I have used two controls, a TextBox control and a Button control. Here when I enter any text into the text box and click the button it will navigate to page1.xaml and show the entered text in the Page1.xaml as a message dialog.

In Page1.xaml.cs under the initialize component Page1_loaded method was called and in the Page1_loaded method definition a string variable val was declared to return the incoming data in the string variable val and showing that data in a message dialog box.

XAML is mostly used at design-time but there may be a time when you want to create XAML dynamically and/or load XAML in your code. The XamlWriter and the XamlReader classes are used to create and read XAML in code.

The XamlWriter and the XamlReader classes are defined in the System.Windows.Markup namespace and must be imported to use the classes as in the following:

using System.Windows.Markup;

The XamlWriter.Save method takes an object as an input and creates a string containing the valid XAML.

The code snippet in Listing 1 creates a Button control using code and saves it in a string using the XamlWriter.Save method.

// Create a Dynamic Button.

Button helloButton = newButton();

helloButton.Height = 50;

helloButton.Width = 100;

helloButton.Background = Brushes.AliceBlue;

helloButton.Content = "Click Me";

// Save the Button to a string.

string dynamicXAML = XamlWriter.Save(helloButton);

Listing 1

The XamlReader.Load method reads the XAML input in the specified Stream and returns an object that is the root of the corresponding object tree.

The code snippet in Listing 2 creates a XmlReader from a XAML and then creates a Button control using the XamlReader.Load method.

The GroupBox element in XAML is used to add a header to an area and within that area you can place controls. By default, a GroupBox can have one child but multiple child controls can be added by placing a container control on a GroupBox such as a Grid or StackPanel.

How to create a GroupBox in WPF and Windows phone application,.

The GroupBox element in XAML represents a GroupBox control. The following code snippet creates a GroupBox control and sets its background and font. The code also sets the header using GroupBox.Header.

Besides the normal control events, the Calendar control has three events calendar related events. These events are the DisplayDateChanged, DisplayModeChanged and SelectedDatesChanged. The DisplayDateChanged event is fired where the DisplayDate property is changed. The DisplayModeChanged event is fired when the DisplayMode property is changed. The SelectedDatesChanged event is fired when the SelectedDate or SelectedDates properties are changed. The following code snippet sets these three events attributes.

Normally, on a date selection, you may want to capture that event and know what the current selected date is. Now how about we add a TextBox control to the page and on the date selection, we will set the text of the TextBox to the currently selected date.

We add the following code to the XAML just below the Calendar control. <TextBox Width="200" Height="30" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,10,10,10" x:Name="SelectedDateTextBox"> </TextBox>

On the SelectedDateChanged event handler, we set the TextBox.Text property to the SelectedDate property of the Calendar control as you can see from the code in Listing 5.

Now when you run the application, you will see the output that looks as in Figure 10. When you select a date in the Calendar, it will be displayed in the TextBox.

Figure 10

Formatting a Calendar

How about we create a Calendar control with a border formatting, background and foreground of the Calendar?

The BorderBrush property of the Calendar sets a brush to draw the border of a Calendar. You may use any brush to fill the border. The following code snippet uses a linear gradient brush to draw the border with a combination of the colors Red and Blue.

The Background and Foreground properties of the Calendar set the background and foreground colors of a Calendar. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a Calendar.

To set an image as the background of a Calendar, we can set an image as the Background of the Calendar. The following code snippet sets the background of a Calendar to an image. The code also sets the opacity of the image.

The code listed in Listing 6 creates a Calendar control programmatically. First, it creates a Calendar object and sets its DisplayMode and SelectedMode and other properties and later the Calendar is added to the LayoutRoot.

In this article, I discussed the calendar control using XAML and C#. We also saw how to set display modes, selection modes, blackout dates, selected dates, border, background and foreground properties. After that, we saw you to set an image as the background of a Calendar. In the end of this article, we saw how to create a Calendar dynamically.

We can do this by adding the code listed in Listing 2. As you can see from Listing 3, the BlackoutDates.Add method takes a CalendarDateRange object, that is a collection of two DateTime objects. The first date is the start date of the range and the second date is the end date of the date range.

The Calendar control allows you to set the start and end display dates using the DisplayDateStart and DisplayDateEnd properties. If you see Figure 5 in the previous section, you may notice the March 2010 month calendar display starts with the March 01, 2010 date. But now, what if you want to display the dates for only the month of March 2010? We can use the DisplayStartDate and DisplayEndDate properties to control the start and end dates of a month.

DisplayDate property represents the current date to display.

The following code snippet sets the DisplayDate, DisplayDateStart and DisplayDateEnd attributes of the Calendar element in XAML.

The new calendar looks as in Figure 7, where you can see the start day of the week is Tuesday.

Figure 7

Selected Date and Selected Dates

The SelectedDate property represents the current selected date. If multiple date selection is true then the SelectedDates property represents all the selected dates in a Calendar. The following code snippet sets the SelectedDates in XAML at design-time.

A calendar control is used to create a visual calendar that lets users pick a date and fire an event on the selection of the date. This article demonstrates how to create and use a calendar control using XAML and C# in WPF.

Creating a Calendar

The Calendar element represents a calendar control in XAML as in the following:

<Calendar/>

The Calendar control is defined in the System.Windows.Controls namespace. When you drag and drop a Calendar control from the Toolbox to the page, the XAML code will look like the following code where you can see a Calendar XAML element has been added within the Grid element and its Width, Height, Name and VerticalAlignment and HorizontalAlignment attributes are set.

<Grid>

<CalendarHeight="170"HorizontalAlignment="Left"Margin="58,32,0,0"

Name="calendar1"VerticalAlignment="Top"Width="180"/>

</Grid>

The default view of the Calendar control looks as in Figure 1.

Figure 1

The Width and Height attributes of the Calendar element represent the width and the height of a Calendar. The Content attribute represents the text of a Calendar. The Name attribute represents the name of the control, that is a unique identifier of a control.

The code snippet in Listing 1 creates a Calendar control and sets the name, height and width properties of a Calendar control.

<CalendarName=" MonthlyCalendar"Height="30"Width="100">

</Calendar>

Listing 1

Display Modes

The DisplayMode property of the Calendar class represents the format of the display of a Calendar, that can be a month, year, or decade. Month is the default mode. Setting the DisplayMode to Year and Decade generates Figure 2 and Figure 3 respectively.

Figure 2

Figure 3

The Month view that is also the default view looks as in Figure 4.

Figure 4

If you use an example of the Decade and click on the year 2008 in Figure 3, you will get another Calendar format with all the months in the year 2008 and if you click on any month, you will eventually get the month view of the Calendar.

The following code snippet sets the DisplayMode property to Decade.

<CalendarDisplayMode="Decade">

</Calendar>

Selection Modes and Selection Dates

The SelectedDate property represents the currently selected date. If multiple dates selection is true, the SelectedDates property represents a collection of currently selected dates.

The SelectionMode of type CalendarSelectionMode enumeration represents the selection mode of calendar. Table 1 describes the CalendarSelectionMode enumeration and its members.

CalendarSelectionMode

Description

None

No selections are allowed.

SingleDate

Only a single date can be selected, either by setting SelectedDate or the first value in SelectedDates. AddRange cannot be used.

SingleRange

A single range of dates can be selected. Setting SelectedDate, adding a date individually to SelectedDates, or using AddRange will clear all previous values from SelectedDates.

MultipleRange

Multiple non-contiguous ranges of dates can be selected. Adding a date individually to SelectedDates or using AddRange will not clear SelectedDates. Setting SelectedDate will still clear SelectedDates, but additional dates or range can then be added. Adding a range that includes some dates that are already selected or overlaps with another range results in the union of the ranges and does not cause an exception.

The following code snippet sets the SelectionMode property to a single range.

<CalendarSelectionMode="SingleRange">

</Calendar>

BlackoutDates

The BlackoutDates property of the Calendar class represents a collection of dates that are not available for selection. All non-selection dates are marked by a cross. For example, say in the month of March of the year 2010, we would like to block the dates from Jan 1st to Jan 7th and then all Sundays and the final calendar should look as in Figure 5.