Windows Phone

Windows Phone 8 – Cách triển khai việc điều hướng trang

Một trong những thao tác mà chúng ta thường hay thực hiện trong các ứng dụng đó là di chuyển từ trang này sang trang khác. Trong Windows Phone 8 thì việc điều hướng trang (Page Navigation) được thực hiện bởi một dịch vụ riêng biệt. Trong bài viết này, tôi sẽ giới thiệu về cách triển khai việc điều hướng trang cơ bản trong một ứng dụng WP8.

Điều hướng cơ bản

Để minh họa cho việc điều hướng trang, chúng ta sẽ tạo một ứng dụng mới với hai trang cơ bản, sau đó sẽ triển khai việc điều hướng qua lại giữa hai trang này.

1. Trước tiên, hãy khởi động Visual Studio và tạo một project mới bằng cách vào File -> New project

 Windows Phone 8   Cách triển khai việc điều hướng trang

2. Tiếp đó, bạn chuột phải vào project vừa tạo chọn Add -> New item

 Windows Phone 8   Cách triển khai việc điều hướng trang

3. Chọn phần tạo một trang mới và đặt tên cho nó, ở đây tôi đặt là SecondPage, và nhấn Ok

Trong MainPage.xaml, bạn kéo thả một nút (Button) vào từ thanh công cụ (ToolBox) như hình dưới đây:

 Windows Phone 8   Cách triển khai việc điều hướng trang

4. Chúng ta tiến hành xử lý sự kiện Click cho nút vừa tạo để nó điều hướng đến trang SecondPage.xaml.

 Windows Phone 8   Cách triển khai việc điều hướng trang

Bây giờ bạn chạy project và bấm vào nút vừa tạo để hưởng thành quả đầu tiên nhé.

5. Tiếp theo là điều hướng quay trở lại, tất nhiên rồi! Sau khi bấm nút và được chuyển sang SecondPage, bạn có thể bấm nút Back của điện thoại để quay lại trang trước, đây là cài đặt mặc định trên WP8. Nhưng nếu không muốn, bạn có thể mở trang SecondPage.xaml, tạo một nút để quay lại MainPage .xaml như hình dưới đây:

 Windows Phone 8   Cách triển khai việc điều hướng trang

Trong phần xử lý sự kiện Click của nút trên, bạn viết đoạn mã như sau:

 Windows Phone 8   Cách triển khai việc điều hướng trang

Như vậy là bạn đã có một nút tương tự nút  Windows Phone 8   Cách triển khai việc điều hướng trang của điện thoại rồi đấy!

Mở rộng một chút

Ở trên tôi đã giới thiệu về thao tác điều hướng cơ bản trên WP8. Trong các ứng dụng thông thường, khi chúng ta điều hướng từ trang này sang trang khác thì chúng ta thường truyền dữ liệu theo cùng, cũng giống như khi các bạn lướt web vậy. Nói cách khác là có sự trao đổi dữ liệu giữa các trang. Để minh họa cho điều này, chúng ta sẽ mở rộng thêm ứng dụng trên một chút bằng cách truyền một thông điệp từ MainPage.xaml sang trang SecondPage.xaml.

1. Đầu tiên, bạn mở lại trang MainPage.xaml của project vừa tạo và tạo thêm một Textbox, một Button như hình dưới đây:

 Windows Phone 8   Cách triển khai việc điều hướng trang

Ở khung Properties của Textbox, bạn đặt tên cho nó, ở đây tôi đặt là txtBox1.

 Windows Phone 8   Cách triển khai việc điều hướng trang

Trong phần xử lí sự kiện của nút Go ở trên, bạn viết đoạn mã như sau:

 Windows Phone 8   Cách triển khai việc điều hướng trang

Bạn để ý rằng chúng ta đang truyền thông điệp sang trang SecondPage.xaml bằng cách thêm vào một QueryString như khi các bạn làm việc với web vậy. QueryString được tạo ra bằng các cặp name-value (tên-giá trị) được thêm vào sau dấu “?”, trong trường hợp của chúng ta thì chỉ có một cặp name-value đó là msg=txtBox1.Text

2. Tiếp theo, bạn chuyển đến SecondPage.xaml, tạo một TextBlock và đặt tên cho TextBlock này, ở đây tôi đặt làTextBlock1. Bây giờ, trong trang SecondPage.xaml.cs, bạn viết đoạn mã như sau:

 Windows Phone 8   Cách triển khai việc điều hướng trang

Chúng ta đã lấy thông điệp nhận được bằng cách sử dụng đối tượng NavigationContext, sau đó hiển thị nó lên thông qua TextBlock1.

Xong rồi chứ! Bây giờ bạn chạy project và thử nhập chuỗi vào TextBox , sau đó bấm nút Go xem.

 Windows Phone 8   Cách triển khai việc điều hướng trang

 Windows Phone 8   Cách triển khai việc điều hướng trang

Với ví dụ nhỏ vừa rồi, tôi đã trình bày cách điều hướng giữa các trang trong WP8, từ điều hướng đơn giản nhất cho đến việc điều hướng có kèm theo dữ liệu dạng chuỗi. Vậy nếu chúng ta muốn truyền một dữ liệu lớn, hoặc một dữ liệu không phải dạng chuỗi (chẳng hạn một đối tượng) thì chúng ta sẽ làm thế nào? Cũng rất dễ dàng thôi các bạn ạ, tôi tin các bạn có thể tự làm được, hãy làm và cùng chia sẻ các bạn nhé.

Theo tapchilaptrinh

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s