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

Rate this post

Đâ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

lập trình Windows Phone 7

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

lập trình Windows Phone 7App.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…

lập trình Windows Phone 7

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ó:

lập trình Windows Phone 7

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

lập trình Windows Phone 7

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.

lập trình Windows Phone 7

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:

lập trình Windows Phone 7

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

Comments

  1. halybobo says

    Anh ơi có tài liệu về code này không, emm không hiểu chỗ thêm button lắm, cái đó mình phải viết code bằng tay hay insert vào đc

    • tungnt says

      Hi Halybobo,

      Thanks góp ý của em, anh sẽ thêm link download code vào bài post ngay.
      Chỗ thêm button thì em có thể kéo vào từ Toolbar hoặc code luôn trên XAML nếu đã quen.

      Regards.

  2. says

    Bài viết của anh rất dễ hiểu!
    Đã có cách nào để gõ trực tiếp nội dung text từ bàn phim máy tính mà không phải gõ trên emulator chưa hả anh?

  3. tungnt says

    Hi Lương,

    Để có thể sử dụng keyboard của Laptop em có thể sử dụng phím PageUp/PageDown hoặc phím Pause.

    Thử xem nhé :)

  4. thaidoan says

    Hay !!! Hy vọng a sẽ post các phần tiếp theo trong thời gian gần.Hè này e định tìm hiểu về cái này mà 😀

  5. thanhsuong says

    anh ơi, em làm mà nó bị lỗi”Error 1 The interface is unknown.” la sao hả anh.Giup em với

  6. thanhsuong says

    hic, anh oi, cùng 1 bài, lần 1 em chạy thì ra lỗi khac, lần 2 chạy thì hiện ra lôi khác trong khi built thì hôk có lỗi j.lạ ghê” Error 1 The object invoked has disconnected from its clients.”

    • tungnt says

      Hi bạn Thanhsuong,

      Cảm ơn bạn đã ghé thăm blog của mình.
      Theo như những gì bạn mô tả thì có thể nguyên nhân xuất phát từ cấu hình máy không đủ RAM, bạn tham khảo cấu hình khuyến nghị để chạy emulator tại đây: http://msdn.microsoft.com/en-us/library/ff626524(v=VS.92).aspx.
      Nếu không phải do cấu hình, bạn hãy mô tả chi tiết lỗi xảy ra từng bước như thế nào mình sẽ dễ hình dung và giúp bạn hơn.

      Tùng

      • thanhsuong says

        dạ, em cảm ơn anh nhiều.May bua nay lo on thi nen ko vo blog cua anh, anh oi,bị lỗi Error 1 The interface is unknown là lỗi cấu hiNhf hả anh.hjc.NHƯ THẾ CẤU HÌNH MÁY EM :
        processor GenuineIntel cpu 2140 @1.60Ghz 1.60ghz
        Installel memory (Ram) 1.00GB
        Cau hinh nhu the cai wp7 hok dc ha anh .hjc.pun ghe, em dang dinh lam de tai tot nghiep ben wp7 nay chu.Gio muon chay dc, em phai thay Ram hay lam sao ha anh.hjc.Met ghe i.Anh giup em voi

  7. Le Thanh Dai says

    Cảm ơn bạn đã chia sẽ. bai viet rất hay. cho minh hoi win XP cai dc phần mềm nay kg?

  8. dakem says

    anh tung oi em chưa biet gi về lập trình.nhưng em muốn lập trình ứng dụng cho wp7 .em phải học bắt đầu từ đâu cho nhanh nhất a.

    • tungnt says

      Em nên đọc quyển sách 101 Windows Phone 7 Apps. Là một quyển sách dạng cook book rất hay giúp em có thể xây dựng các ứng dụng ngay mà không cần phải học thêm gì nữa :)

  9. akhoenuolit says

    anh tùng ơi. cho em hỏi mình muốn tạo fi resource thì mình phải bắt đầu như thế nào ạh.

  10. tungnt says

    Hi file resource trong silverlight bản chất cũng như các file resource thông thường trong ứng dụng .NET.
    Em cứ Add New Item -> Resources File là được.

  11. tan tri says

    a cho e hỏi tại sao khi mình chạy ứng dụng wp7 thì bị lỗi này: “the interface is unknown”. a chỉ cách em sửa với. em cám ơn.

Trackbacks

Leave a Reply to dakem Cancel reply

Your email address will not be published. Required fields are marked *