Bài giảng Lập trình Windows Phone (Module 2): Bài 4 - Trần Duy Thanh

ườ Tr ọ ự ng ĐH Khoa H c T  Nhiên TP.HCM

TRUNG TÂM TIN H CỌ

ậ

ạ ứ

ụ

ể

L p trình Windows Phone Bài 4: Các lo i  ng d ng  và chuy n trang trong Windows Phone

ạ

ầ

GV Biên so n: Tr n Duy Thanh

2014

Nội dung

• Các loại ứng dụng

• Chuyển trang (Navigation)

2

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1. Các loại ứng dụng

• Single Page

• Pivot

• Panorama

3

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.1 Single Page

v Đây là loại ứng dụng cơ bản nhất của Windows

Phone

v Bao gồm những trang riêng lẻ

v Di chuyển giữa các trang bằng cách sử dụng

NavigationService.

4

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.1 Single Page

v Để tạo project dạng Single Page, ta chọn

template mặc định khi tạo mới project

5

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1. Các loại ứng dụng

• Single Page

• Pivot

• Panorama

6

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Pivot control tạo ra ứng dụng kiểu tabbed

v Bản chất pivot control là 1 container chứa 1

hay nhiều PivotItem control.

v Ta có thể di chuyễn giữa các view bằng cách

ü Panning

ü Flick

ü Tap on header

7

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Khi nào sử dụng Pivot

ü Lọc các bộ dữ liệu lớn

ü Xem nhiều bộ dữ liệu

8

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Để tạo một Pivot application, ta có thể:

ü Chọn template “Windows Phone Pivot App” khi tạo

project mới

9

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Để tạo một Pivot application, ta có thể:

ü Chọn template mặc định và kéo thả control Pivot từ

ToolBox

10

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Để tạo một Pivot application, ta có thể:

ü Thêm 1 page dạng “Windows Phone Pivot Page”

vào project hiện tại

11

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Cấu trúc 1 trang Pivot

12

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Cách khai báo 1 trang Pivot

13

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.2 Pivot

v Các lưu ý khi thiết kế trang Pivot

ü Rút ngắn số trang pivot (tối đa 4 trang)

ü Các trang pivot nên hiển thị cùng loại dữ liệu

ü Rút ngắn tiêu đề từ 1 đến 2 từ

ü Không thể thay đổi chiều cao của header

ü Không nên dùng các control như slider, Toogle

Button, hay map trong trang pivot

14

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1. Các loại ứng dụng

• Single Page

• Pivot

• Panorama

15

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.3 Panorama

v Panorama control tạo ra một ứng dụng gồm

nhiều trang trải dài theo chiều ngang

16

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.3 Panorama

v Để tạo một Panorama application ta có thể

ü Chọn template project dạng Windows Phone

Panorama App khi tạo mới project

17

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.3 Panorama

ü Kéo thả panorama control từ toolbox vào giao diện

18

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.3 Panorama

ü Thêm 1 trang dạng Windows Phone Panorama

Page

19

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.3 Panorama

v Cấu trúc 1 panorama control

20

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

1.3 Panorama

v Cách khai báo panorama control

21

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2. Chuyển trang (Navigation)

• Chuyển trang giữa các page

• Truyền tham số giữa các trang

• Làm việc với Navigation Backstack

22

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.1 Chuyển trang giữa các page v Sử dụng phương thức Navigate() trong lớp

NavigationService

NavigationService.Navigate(new Uri("/Pages/Page2.x

aml",

UriKind.Relative));

23

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.1 Chuyển trang giữa các page v UriKind

ü Absolute : đường dẫn tuyệt đối

ü Relative : đường dẫn tương đối

ü RelativeOrAbsolute: chưa xác định

24

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.1 Chuyển trang giữa các page v Các sự kiện quan trọng

ü OnNavigatedTo() : sự kiện navigate từ trang khác

đến trang hiện tại

ü OnNavigatedFrom(): sự kiện navigate từ trang hiện

tại đến trang khác

ü Loaded: sự kiện khi page đã load hoàn tất.

25

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.2 Truyền tham số giữa các trang v Tương tự cách truyền tham số trên web

VD: Truyền giá trị ID từ page1 sang page2 khi chuyển trang từ page1 qua page2

Trên page 1:

NavigationService.Navigate(new Uri("/Page2.xaml? ID=2",UriKind.Relative));

26

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.2 Truyền giá trị giữa các trang Trên page 2: nhận tham số

protected override void OnNavigatedTo(NavigationEventArg s e) {

base.OnNavigatedTo();

if (NavigationContext.QueryString.ContainsKey("ID") )         {

int ketqua = int.Parse(NavigationContext

.QueryString["ID"]);

}

}

27

Lớp NavigationContext cung cấp thuộc tính kiểu collection tên là QueryString, chứa toàn bộ tham số được truyền đến dưới dạng. ạ ứ

ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.2 Truyền giá trị giữa các trang Hoặc có thể dùng cách sau

protected override void OnNavigatedTo(NavigationEventArg s e) {

base.OnNavigatedTo();

string parameter = string.Empty;

if (NavigationContext.QueryString.

TryGetValue("parameter", out parameter))

{

//do something with the parameter

}

}

28

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.2 Truyền giá trị giữa các trang v Sử dụng ký tự ‘&’ để truyền nhiều tham số

cùng lúc

NavigationService.Navigate(

new Uri("/page1.xaml? ID=2&Ten=abv", UriKind.Relative));

v Sử dụng string format

string stringVariable = "This is a test string";             NavigationService.Navigate(new Uri(

string.Format("/Page1.xaml? parameter={0}",stringVariable),

UriKind.Relative));

29

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

2.3 Làm việc với Navigation BackStack v BackStack chứa danh sách các trang mà

người dùng đã di chuyển đến trong quá trình sử dụng app.

v Khi người dùng nhấn phím Back, trang cuối cùng được lưu trong BackStack sẽ được lấy ra.

v Để trở về trang trước đó, dùng phương thức

GoBack() trong lớp NavigationService.

v Để xóa BackStack, sử dụng phương thức

RemoveBackStackEntry().

30

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone

Thảo luận

31

ạ ứ ụ ể Bài 4: Các lo i  ng d ng và chuy n trang trong Windows Phone