Bắt đầu lập trình Windows Phone 7

Đây là bài đầu tiên trong loạt bài lập trình Windows Phone viết về các trải nghiệm khi bắt đầu lập trình Windows Phone 7 của mình.

Bài này sẽ giới thiệu với bạn về các công cụ và thủ tục cần thiết để build và test các ứng dụng Silverlight cho Windows Phone 7. Qua bài học bạn sẽ biết cách sử dụng Microsoft Visual Studio để build và design các ứng dụng Windows Phone cũng như biết làm thế nào để deploy và debug các ứng dụng Windows Phone trên Windows Phone Emulator.

1) Đầu tiên ta sẽ tạo ra một ứng dụng sử dụng Windows Phone Application Project Template (category Silverlight for Windows Phone) trong Visual Studio 2010

Đặt tên project là HelloWP7

2) Cấu trúc project được tạo ra từ template với các file như sau:

– App.xaml/App.xaml.cs: Định nghĩa đầu vào của ứng dụng, khởi tạo các resource mức ứng dụng và hiển thị giao diện ứng dụng

– MainPage.xaml/MainPage.xaml.cs: Định nghĩa trang giao diện khởi đầu ứng dụng

– ApplicationIcon.png: Ảnh icon ứng dụng trong application list của phone

– Background.png: Ảnh icon ứng dụng ở màn hình start.

– SplashScreenImage.jpg: Ảnh đầu tiên hiển thị khi launch ứng dụng

– PropertiesAppManifest.xml: File manifest dùng để tạo ra gói ứng dụng

– PropertiesAssemblyInfo.cs: Chứa tên và thông tin phiên bản được nhúng vào trong file assembly khi compile

– PropertiesWMAppManifest.xml: File manifest chứa các thông tin riêng  của ứng dụng Windows Phone Silverlight.

3) File App.xaml với các XAML markup (Extensible Application Markup Language – có thể tham khảo link sau: XAML Overview) gồm một root element là Application và phần Application.Resources chứa các resources mức ứng dụng như color, brushes, style object…

Bên cạnh đó nó khởi tạo 1 thuộc tính ApplicationLifetimeObject để tạo ra đối tượng PhoneApplicationService, đối tượng quản lý các thuộc tính và trạng thái ứng dụng khi nó active hoặc inactive.

File App định nghĩa một instance của lớp Application chứa ứng dụng Silverlight for Windows Phone

Ta hãy cùng xem file code behind của nó:

Ứng dụng Silverlight for Windows Phone chứa 1 thuộc tính là RootFrame định nghĩa Page bắt đầu ứng dụng. Tất cả các ứng dụng Windows Phone chỉ có một thành phần container mức trên cùng với kiểu dữ liệu là PhoneApplicationFrame. Frame này chứa 1 hoặc nhiều PhoneApplicationPage biểu thị nội dung của ứng dụng đồng thời xử lý việc navigate giữa các page.

4) Project cũng chứa 1 page default là MainPage.xaml định nghĩa giao diện chính của ứng dụng.

Bạn có thể dùng designer của Visual Studio để thiết kế UI của ứng dụng ngay trực tiếp. Toàn bộ UI của ứng dụng được xây dựng bằng cách sử dụng XAML – một ngôn ngữ khai báo giống kiểu XML.

5) Để chỉnh sửa một số thuộc tính đặc biệt của phone ta có thể sử dụng Properties window. Các thuộc tính này sẽ lưu trữ trong file WMAppManifest.xml, liên quan đến việc deploy ứng dụng và giao diện của ứng dụng trên thiết bị.

6) Cách build và deploy một ứng dụng Windows Phone 7 lên Emulator

– Cũng giống như các ứng dụng .NET thông thường, để build ứng dụng ta dùng tổ hợp phím Shift+F6 hoặc Ctrl+Shift+B.

– Sau đó xác định muốn deploy thử trên Windows Phone Emulator hay trên 1 Phone thật.

– Chọn Windows Phone Emulator và chỉ cần nhấn F5 để launch tới ứng dụng trên Emulator này. Các công việc còn lại Visual Studio sẽ tự động thiết lập môi trường cho emulator và deploy image của ứng dụng lên emulator.

– Một thủ thuật khi debug ứng dụng Windows Phone: Tránh đóng emulator khi còn thực hiện coding ứng dụng, bởi khi simulator còn chạy nó sẽ mất rất ít thời gian khởi tạo một session debug mới.

7) Thiết kế giao diện cho ứng dụng:

Các kiến thức cơ bản đã xong chúng ta sẽ cùng bắt tay xây dựng một ứng dụng Windows Phone 7 đơn giản.

Giao diện ứng dụng sẽ chứa 1 caption, 1 textbox và 1 button. Khi người dụng nhập text vào textbox và click button, ứng dụng sẽ hiển thị 1 banner với text mà người dùng đã nhập như hình bên dưới:

Các bước thực hiện:

– Mở MainPage.xaml và sử dụng view XAML hoặc Design để thiết kế giao diện cho ứng dụng. Nếu bạn thích kéo thả bạn có thể sử dụng view Design và kéo các control từ Toolbar vào để tạo giao diện. Ở đây mình sẽ dùng view XAML để thiết kế (Các bạn chưa quen về các control Layout của Silverlight có thể xem thêm ở đây: Silverlight Layout System)

– Bổ sung thêm một Row với Height là Auto chứa textbox và button.

– Sửa lại ApplicationTitle thành WINDOWS PHONE 7, PageTile thành HelloWP7

– Layout Grid ContentPanel gồm 2 column, column 1 có width=’*’ mục đích để textbox stretch ra hết các khoảng trống còn chưa dùng, column 2 có width=’auto’ cho vừa đúng bằng kích thước button nó chứa. Sử dụng Margin và padding để căn chỉnh đối tượng cho cân đối

– Thêm một Textblock để chứa text từ Textbox sau khi nhấn Button.

– Sau đó ta đăng ký event handler cho button để respon action từ phía UI. Có thể tạo event handler này bằng cách sử dụng cửa sổ property của button, click trực tiếp vào button trên view Design hoặc bằng view XAML

– Implement handler này trong file Mainpage.xaml.cs thêm đoạn code gán lại Banner text và sau đó clear text trên Textbox

– Việc implement đã hoàn tất, chúng ta hãy F5 để thử nghiệm ứng dụng xem kết quả thực hiện có đúng như mong đợi không nào

Qua bài viết này bạn đã biết cách xây dựng, triển khai và chạy thử một ứng dụng trên Windows Phone Emulator. Riêng cách debug các ứng dụng Windows Phone 7 cũng không khác các ứng dụng .NET truyền thống nên mình không đưa vào trong bài viết này.
Ở các bài viết sau, chúng ta sẽ đi tìm hiểu sâu hơn về thế giới của Windows Phone 7.

Happy Sharing. Stay tuned.