Upload
hai-nguyen
View
221
Download
0
Embed Size (px)
Citation preview
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