Điều hướng trang trong Windows Phone 8

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

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

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:

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.

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:

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

Như vậy là bạn đã có một nút tương tự nút 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:

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

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

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:

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.

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é.

Đào Văn Đức