Prince Sultan University
College of Computer & Information Sciences
Department of Computer Science
CS387: Mobile Application Development
Practice Sheet 4
Working with Multiple Pages
Objective:
Create an application with multiple pages, share and pass data between the pages
Step 1:
Create the main page for the application (automatically created when the project is created)
1
Step 2:
Insert a ListBox with a Data Template inside the content panel of the page:
<ListBox Name="customerList" SelectionChanged="customerList_SelectionChanged"
Margin="-12,6,12,-6">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Address}"
Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
At the top of the page edit the line:
shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">
Step 3:
Create a second application page: CustomerDetailPage:
2
Step 4:
Modify the layout of the Content Grid of the CustomerDetailPage as follows:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid Name="customerDisplayGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="200"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Height="30" HorizontalAlignment="Left"
VerticalAlignment="Center" Name="nameTextBlock" Text="Name" />
<TextBox Grid.Row="0" Grid.Column="1" Name="nameTextBox" Text="{Binding Name}"
AcceptsReturn="False" />
<TextBlock Grid.Row="1" Grid.Column="0" Height="30" HorizontalAlignment="Left"
VerticalAlignment="Top" Name="addressTextBlock" Text="Address" />
<TextBox Grid.Row="1" Grid.Column="1" Name="addressTextBox" Text="{Binding Address}"
AcceptsReturn="True" />
<TextBlock Grid.Row="2" Grid.Column="0" Height="30" HorizontalAlignment="Left"
VerticalAlignment="Center" Name="idTextBlock" Text="ID" />
<TextBox Grid.Row="2" Grid.Column="1" Name="idTextBox" Text="{Binding ID}"
IsReadOnly="True"></TextBox>
</Grid>
</Grid>
</Grid>
Step 5:
3
Add a new class to your project: CustomerInfo.cs and insert the following class definitions in the new
file:
public class Customer
{
public string Name { get; set; }
public string Address { get; set; }
public int ID { get; set; }
public Customer(string inName, string inAddress, int inID)
{
Name = inName;
Address = inAddress;
ID = inID;
}
}
public class CustomerRoster
{
public string Name { get; set; }
public CustomerRoster(string inName)
{
Name = inName;
CustomerList = new List<Customer>();
}
public List<Customer> CustomerList;
public static CustomerRoster MakeTestCustomers()
{
string[] firstNames = new string[] { "Mohammed", "Ahmed", "Ali", "Salah",
"Mahmoud", "Rasheed" };
string[] lastsNames = new string[] { "Faeiz", "Fauzan", "Radi", "Ridwan",
"Farhan", "Saeed" };
CustomerRoster result = new CustomerRoster("Test Customers");
int id = 0;
foreach (string lastName in lastsNames)
{
foreach (string firstname in firstNames)
{
//Construct a customer name
string name = firstname + " " + lastName;
//Add the new customer to the list
result.CustomerList.Add(new Customer(name, name + "'s House", id));
// Increase the ID for the next customer
id++;
}
}
return result;
}
}
4
Step 6:
Add the following lines to the App class in App.xaml.cs:
public CustomerRoster ActiveCustomerList;
public Customer ActiveCustomer;
Step 7:
Add the following declaration at the bottom of the constructor of the App class in App.xaml.cs:
ActiveCustomerList = CustomerRoster.MakeTestCustomers();
Step 8:
In MainPage.xaml.cs, implement the Phone ApplicationPage_Loaded event as follows:
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
// Get the parent application that contains the customer being edited
App thisApp = Application.Current as App;
customerList.ItemsSource = thisApp.ActiveCustomerList.CustomerList;
}
Step 9:
In MainPage.xaml.cs, implement the Phone customerList_SelectionChanged event as follows:
private void customerList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Set the customer being edited to the selected customer and then open it
// If no customer is selected, just return
if (customerList.SelectedItem == null) return;
// Get the parent application that contains the customer being edited
App thisApp = Application.Current as App;
// Set this to the selected customer
thisApp.ActiveCustomer = customerList.SelectedItem as Customer;
// Navigate to the detail page
NavigationService.Navigate(new Uri("/CustomerDetailPage.xaml",
UriKind.RelativeOrAbsolute));
}
Step 10:
In MainPage.xaml.cs, implement the Phone OnNavigatedTo event as follows:
5
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
customerList.SelectedItem = null;
}
Step 11:
CustomerDetailPage OnNavigateTo event:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
// Get the parent application that contains the customer being edited
App thisApp = Application.Current as App;
// Set the data context for the Grid to the selected
// customer
customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}
6