Download - 3.1 Managing Application Page Layout
-
7/28/2019 3.1 Managing Application Page Layout
1/80
Session 3.1
-
7/28/2019 3.1 Managing Application Page Layout
2/80
Windows Phone
Topics
-
7/28/2019 3.1 Managing Application Page Layout
3/80
Windows Phone
Windows Phone Orientation
3
-
7/28/2019 3.1 Managing Application Page Layout
4/80
Windows Phone
Orientation Warning
4
-
7/28/2019 3.1 Managing Application Page Layout
5/80
Windows Phone
Landscape and Portrait Programs
5
-
7/28/2019 3.1 Managing Application Page Layout
6/80
Windows Phone
Landscape and Portrait Selection
6
SupportedOrientations="Portrait" Orientation="Portrait"
-
7/28/2019 3.1 Managing Application Page Layout
7/80
Windows Phone
Allowing multiple orientations
7
SupportedOrientations="PortraitOrLandscape
Orientation="Portrait"
-
7/28/2019 3.1 Managing Application Page Layout
8/80
Windows Phone
Rotating the Adding Machine
8
-
7/28/2019 3.1 Managing Application Page Layout
9/80
Windows Phone
Silverlight Element positions
9
-
7/28/2019 3.1 Managing Application Page Layout
10/80
Windows Phone
Allowing multiple orientations
10
-
7/28/2019 3.1 Managing Application Page Layout
11/80
Windows Phone
The OrientationChanged event
11
-
7/28/2019 3.1 Managing Application Page Layout
12/80
Windows Phone
Allowing multiple orientations
12
private void PhoneApplicationPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.PortraitUp) {
setPortrait();
}
else {setLandscape();
}
}
-
7/28/2019 3.1 Managing Application Page Layout
13/80
Windows Phone
Setting Landscape Mode
13
private void setLandscape()
{
firstNumberTextBox.Margin = new Thickness(8,19,0,0);
firstNumberTextBox.Width = 207;
secondNumberTextBox.Margin = new Thickness(252,19,0,0);
secondNumberTextBox.Width = 207;
plusTextBlock.Margin = new Thickness(221,35,0,0);resultTextBlock.Margin = new Thickness(538,35,0,0);
}
-
7/28/2019 3.1 Managing Application Page Layout
14/80
Windows Phone
Demo 1: Changing OrientationDemo
14
-
7/28/2019 3.1 Managing Application Page Layout
15/80
Windows Phone
Using Containers
15
-
7/28/2019 3.1 Managing Application Page Layout
16/80
Windows Phone
The StackPanel container
16
-
7/28/2019 3.1 Managing Application Page Layout
17/80
Windows Phone
Creating a StackPanel
17
-
7/28/2019 3.1 Managing Application Page Layout
18/80
Windows Phone
Stack Panel in Action
18
-
7/28/2019 3.1 Managing Application Page Layout
19/80
Windows Phone
19
-
7/28/2019 3.1 Managing Application Page Layout
20/80
Windows Phone
Demo 2: Stack PanelDemo
20
-
7/28/2019 3.1 Managing Application Page Layout
21/80
Windows Phone
Review
21
-
7/28/2019 3.1 Managing Application Page Layout
22/80
Session 3.2
-
7/28/2019 3.1 Managing Application Page Layout
23/80
Windows Phone
Topics
-
7/28/2019 3.1 Managing Application Page Layout
24/80
Windows Phone
Customer Manager
24
-
7/28/2019 3.1 Managing Application Page Layout
25/80
Windows Phone
Application Data
25
-
7/28/2019 3.1 Managing Application Page Layout
26/80
Windows Phone
The Customer class
26
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;}
}
-
7/28/2019 3.1 Managing Application Page Layout
27/80
Windows Phone
The Customers class
27
public class Customers
{public string Name { get; set; }
public Customers(string inName)
{
Name = inName;CustomerList = new List();
}
public List CustomerList;
}
-
7/28/2019 3.1 Managing Application Page Layout
28/80
Windows Phone
Sample Data
28
-
7/28/2019 3.1 Managing Application Page Layout
29/80
Windows Phone
Sample Data
29
string [] firstNames = new string [] { "Rob", "Jim",
"Joe", "Nigel", "Sally", "Tim"} ;string[] lastsNames = new string[] { "Smith", "Jones",
"Bloggs", "Miles", "Wilkinson", "Brown" };
-
7/28/2019 3.1 Managing Application Page Layout
30/80
Windows Phone
Sample Data Generator
30
public static Customers MakeTestCustomers()
{int id = 0;
foreach (string lastName in lastsNames) {
foreach (string firstname in firstNames) {
//Construct a customer namestring 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 customerid++;
}
}
return result;
}
-
7/28/2019 3.1 Managing Application Page Layout
31/80
Windows Phone
Sample Data
31
customers = Customers.MakeTestCustomers();
-
7/28/2019 3.1 Managing Application Page Layout
32/80
Windows Phone
Displaying a List using a StackPanel
32
-
7/28/2019 3.1 Managing Application Page Layout
33/80
Windows Phone
Sample Data
33
-
7/28/2019 3.1 Managing Application Page Layout
34/80
Windows Phone
Sample Data
34
foreach (Customer c in customers.CustomerList)
{TextBlock customerBlock = new TextBlock();
customerBlock.Text = c.Name;
customersStackPanel.Children.Add(customerBlock);
}
-
7/28/2019 3.1 Managing Application Page Layout
35/80
Windows Phone
StackPanel Children
35
-
7/28/2019 3.1 Managing Application Page Layout
36/80
Windows Phone
Stackpanel Display
36
-
7/28/2019 3.1 Managing Application Page Layout
37/80
Windows Phone
Adding a ScrollViewer
37
-
7/28/2019 3.1 Managing Application Page Layout
38/80
Windows Phone
Demo 1: Stackpanel DisplayDemo
38
-
7/28/2019 3.1 Managing Application Page Layout
39/80
Windows Phone
Creating Silverlight Elements
39
-
7/28/2019 3.1 Managing Application Page Layout
40/80
Windows Phone
The Silverlight ListBox element
40
-
7/28/2019 3.1 Managing Application Page Layout
41/80
Windows Phone
Binding Complicated Data
41
-
7/28/2019 3.1 Managing Application Page Layout
42/80
Windows Phone
Creating a DataTemplate
42
-
7/28/2019 3.1 Managing Application Page Layout
43/80
Windows Phone
Using a DataTemplate in a ListBox
43
-
7/28/2019 3.1 Managing Application Page Layout
44/80
Windows Phone
Setting the ItemSource
44
customers = Customers.MakeTestCustomers();
customerList.ItemsSource = customers.CustomerList;
-
7/28/2019 3.1 Managing Application Page Layout
45/80
Windows Phone
Displaying the ListBox
45
-
7/28/2019 3.1 Managing Application Page Layout
46/80
Windows Phone
An Improved DataTemplate
46
-
7/28/2019 3.1 Managing Application Page Layout
47/80
Windows Phone
DataTemplates are Wonderful
47
-
7/28/2019 3.1 Managing Application Page Layout
48/80
Windows Phone
Selecting Items in a ListBox
48
-
7/28/2019 3.1 Managing Application Page Layout
49/80
Windows Phone
Selection Changed Events
49
-
7/28/2019 3.1 Managing Application Page Layout
50/80
Windows Phone
Selection Changed Events
50
private void customerList_SelectionChanged(object sender,
SelectionChangedEventArgs e){
// when we get here the user has selected a customer
Customer selectedCustomer =
customerList.SelectedItem as Customer;
MessageBox.Show(selectedCustomer.Name +
" is selected");
}
-
7/28/2019 3.1 Managing Application Page Layout
51/80
Windows Phone
Demo 2: Selecting ItemsDemo
51
-
7/28/2019 3.1 Managing Application Page Layout
52/80
Windows Phone
Review
52
-
7/28/2019 3.1 Managing Application Page Layout
53/80
Session 3.3
-
7/28/2019 3.1 Managing Application Page Layout
54/80
Windows Phone
Topics
-
7/28/2019 3.1 Managing Application Page Layout
55/80
Windows Phone
The Story So Far
55
-
7/28/2019 3.1 Managing Application Page Layout
56/80
Windows Phone
Multi-page applications
56
-
7/28/2019 3.1 Managing Application Page Layout
57/80
Windows Phone
Adding another page
57
-
7/28/2019 3.1 Managing Application Page Layout
58/80
Windows Phone
Pages and projects
58
-
7/28/2019 3.1 Managing Application Page Layout
59/80
Windows Phone
Page Navigation
59
private void page2Button_Click(object sender,
RoutedEventArgs e){
NavigationService.Navigate(
new Uri("/CustomerDetailPage.xaml",
UriKind.RelativeOrAbsolute));
}
-
7/28/2019 3.1 Managing Application Page Layout
60/80
Windows Phone
The UriKind
60
private void page2Button_Click(object sender,
RoutedEventArgs e){
NavigationService.Navigate(
new Uri("/CustomerDetailPage.xaml",
UriKind.RelativeOrAbsolute));
}
-
7/28/2019 3.1 Managing Application Page Layout
61/80
Windows Phone
Missing page exceptions
61
-
7/28/2019 3.1 Managing Application Page Layout
62/80
Windows Phone
Using the Back button
62
-
7/28/2019 3.1 Managing Application Page Layout
63/80
Windows Phone
Overriding the Back button
63
-
7/28/2019 3.1 Managing Application Page Layout
64/80
Windows Phone
Disabling the Back Button
64
private void PhoneApplicationPage_BackKeyPress(object sender,
System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true;
}
-
7/28/2019 3.1 Managing Application Page Layout
65/80
Windows Phone
Using a MessageBox
65
private void PhoneApplicationPage_BackKeyPress(object sender,
System.ComponentModel.CancelEventArgs e)
{
if (MessageBox.Show("Do you really want to exit?",
"Page Exit",
MessageBoxButton.OKCancel)
!= MessageBoxResult.OK)
{
e.Cancel = true;
}
}
-
7/28/2019 3.1 Managing Application Page Layout
66/80
Windows Phone
Passing data between pages
66
-
7/28/2019 3.1 Managing Application Page Layout
67/80
Windows Phone
Assembling a data uri
67
// Get the selected customer from the list
Customer selectedCustomer = customerList.SelectedItemas Customer;
// Build a navigation string containing the information
NavigationService.Navigate(
new Uri("/CustomerDetailPage.xaml?" +
"name=" + selectedCustomer.Name + "&" +"address=" + selectedCustomer.Address,
UriKind.Relative));
-
7/28/2019 3.1 Managing Application Page Layout
68/80
Windows Phone
Page navigated events
68
-
7/28/2019 3.1 Managing Application Page Layout
69/80
Windows Phone
Loading data from the uri
69
protected override void OnNavigatedTo
(System.Windows.Navigation.NavigationEventArgs e){
string name, address;
if (NavigationContext.QueryString.TryGetValue("name",
out name))
nameTextBlock.Text = name;}
-
7/28/2019 3.1 Managing Application Page Layout
70/80
Windows Phone
Demo 2: Passing DataDemo
70
-
7/28/2019 3.1 Managing Application Page Layout
71/80
Windows Phone
Sharing objects between pages
71
-
7/28/2019 3.1 Managing Application Page Layout
72/80
Windows Phone
The App.xaml page
72
-
7/28/2019 3.1 Managing Application Page Layout
73/80
Windows Phone
The App class
73
public partial class App : Application
{// To be used from all pages in the application
public Customer ActiveCustomer;
}
-
7/28/2019 3.1 Managing Application Page Layout
74/80
Windows Phone
Getting a reference to the App
74
protected override void OnNavigatedTo(
System.Windows.Navigation.NavigationEventArgs e){
base.OnNavigatedTo(e);
// Get the parent App containing the active customer
App thisApp = Application.Current as App;
// Set the data context for the Grid to the selected
// customer
customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}
-
7/28/2019 3.1 Managing Application Page Layout
75/80
Windows Phone
Getting a reference to the App
75
protected override void OnNavigatedTo(
System.Windows.Navigation.NavigationEventArgs e){
base.OnNavigatedTo(e);
// Get the parent App containing the active customer
App thisApp = Application.Current as App;
// Set the data context for the Grid to the selected
// customer
customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}
-
7/28/2019 3.1 Managing Application Page Layout
76/80
Windows Phone
Getting a reference to the App
76
protected override void OnNavigatedTo(
System.Windows.Navigation.NavigationEventArgs e){
base.OnNavigatedTo(e);
// Get the parent App containing the active customer
App thisApp = Application.Current as App;
// Set the data context for the Grid to the selected
// customer
customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}
-
7/28/2019 3.1 Managing Application Page Layout
77/80
Windows Phone
Getting a reference to the App
77
protected override void OnNavigatedTo(
System.Windows.Navigation.NavigationEventArgs e){
base.OnNavigatedTo(e);
// Get the parent App containing the active customer
App thisApp = Application.Current as App;
// Set the data context for the Grid to the selected
// customer
customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}
-
7/28/2019 3.1 Managing Application Page Layout
78/80
Windows Phone
Setting the Edit Data Context
78
protected override void OnNavigatedTo(
System.Windows.Navigation.NavigationEventArgs e){
base.OnNavigatedTo(e);
// Get the parent App containing the active customer
App thisApp = Application.Current as App;
// Set the data context for the Grid to the selected
// customer
customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}
-
7/28/2019 3.1 Managing Application Page Layout
79/80
Windows Phone
Demo 3: Shared DataDemo
79
-
7/28/2019 3.1 Managing Application Page Layout
80/80
Review