Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

Do một số giới hạn của wordpress.com nên mình quyết định chuyển sang sử dụng blog tại địa chỉ mới: http://tungnt.net

Xem thông tin mới nhất về bài viết tại đây: http://tungnt.net/su-dung-expression-blend-thiet-ke-giao-dien-ung-dung-windows-phone-7/


Trong bài viết trước về chúng ta đã biết cách thiết kế giao diện của các ứng dụng Windows Phone 7 sử dụng Visual Studio 2010.

Trong bài học này chúng ta sẽ đi tìm hiểu một công cụ mạnh mẽ hơn, chuyên nghiệp hơn dùng để thiết kế giao diện cho các ứng dụng Windows Phone. Đó là Microsoft Expression Blend for Windows Phone có sẵn khi bạn cài đặt Windows Phone Developer Tool. Nếu bạn chưa có ứng dụng này, bạn có thể theo địa chỉ này để download Microsoft Expression Blend 4 for Windows Phone

1)  Bây giờ chúng ta sẽ cùng tạo thử một custom button trong Expression Blend.

–   Thông thường, các control silverlight tách biệt logic và giao diện của nó bằng cách dùng các template.  ControlTemplate chỉ ra cấu trúc và trạng thái hiển thị của một control. Chúng ta có thể tùy biến giao diện của hầu hết control bằng cách chỉnh sửa các thiết lập ControlTemplate mặc định của chúng. Cách này cho phép bạn thay đổi giao diện của control mà không thay đổi các chức năng của nó. VD: bạn có thể tùy chỉnh một button là hình bo tròn thay thế hình chữ nhật mặc định nhưng button sẽ vẫn raise sự kiện Click của nó.

Hãy cùng thử làm điều này với Expression Blend:

–  Chúng ta sẽ sử dụng lại Solution đã được tạo trong bài tập trước. Từ Visual Studio, chuột phải và MainPage.xaml để mở file này bằng Expression Blend (Bỏ qua cảnh báo về security risk nếu nó xuất hiện)

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

–  Trong Expression Blend chắc chắn rằng MainPage.xaml đang được mở trong designer window. Sau đó chuột phải vào “Click Me” button, trỏ đến Edit Template và chọn Create Empty

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

–  Tại cửa sổ Create ControlTemplate Resource, đặt tên template này là FancyButton, giữ nguyên các thiết lập khác và click OK

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

– Tới đây ta đã tạo ra được một ControlTemplate trắng cho control button và template này sẽ được tự động lưu trong Resources của PhoneApplicationPage. (Khái niệm Resource cung cấp một cách đơn giản để sử dụng lại các đối tượng và các giá trị dùng chung như: control template, styles, brushes, colors, animations và lưu nó trong resource dictionary, một từ điển đối tượng lưu theo khóa có thể dùng được cả trong mã XAML và code-behind. Bạn có thể tạo ra các resource dictionaries ở các scope khác nhau: mức page – lưu tại chính page hoặc mức application – lưu trong file App.xaml)

– Tiếp theo ta cần chỉnh sửa lại template trắng này. Từ panel Object and Timeline, chuột phải vào Grid của ControlTemplate, trỏ đến Change Layout Type và lựa chọn Border. (Một ControlTemplate phải có duy nhất một root element và thành phần này thường chứa các object FrameworkElement khác. Sự kết hợp các đối tượng đó tạo nên cấu trúc hiển thị của control)

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

– Thiết lập các thuộc tính của border như hình: chúng ta sẽ chỉnh BorderThickness, CornerRadius, Background cũng như BorderBrush theo kiểu Gradient hoặc Solid Color

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

– Bước kế tiếp là thêm Caption cho button bằng cách sử dụng panel Assets để thêm TextBlock control vào bên trong Border của template (Sau khi thêm control cần ấn V hoặc lựa chọn Selection Tool từ panel Tools để thoát khỏi insertion mode). Sau đó ta có thể thiết lập các thuộc tính cho TextBlock này bằng panel Properties.

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

– Bước cuối cùng là liên kết thuộc tính Text của TextBlock này đến thuộc tính Content của button sử dụng template bằng cách dùng Template Binding.

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

Vậy là bạn đã tạo ra được một button kiểu mới. Hãy cùng build và chạy thử ứng dụng xem kết quả ra sao 🙂

Sử dụng Expression Blend thiết kế giao diện ứng dụng Windows Phone 7

Advertisements

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

Do một số giới hạn của wordpress.com nên mình quyết định chuyển sang sử dụng blog tại địa chỉ mới: http://tungnt.net

Xem thông tin mới nhất về bài viết tại đây: http://tungnt.net/bat-dau-lap-trinh-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

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

Properties\AppManifest.xml: File manifest dùng để tạo ra gói ứng dụng

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

Properties\WMAppManifest.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 WP7 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.

Have funs.

Lập trình với Windows Phone 7

Do một số giới hạn của wordpress.com nên mình quyết định chuyển sang sử dụng blog tại địa chỉ mới: http://tungnt.net

Xem thông tin mới nhất về bài viết tại đây: http://tungnt.net/lap-trinh-windows-phone-7/


Hôm nay nhân sự kiện sắp diễn ra Microsoft Technology Day vào 17/3/2011 và nhận được lời mời trình bày về các trải nghiệm khi lập trình với Windows Phone 7 từ anh Trịnh Minh Cường (9/3/2011), mình sẽ viết lại các trải nghiệm của mình khi lập trình Windows Phone 7 (WP7). Rõ ràng đây là một công nghệ rất mới và cũng rất cool trong thời gian tới. Điển hình là bây giờ giá con HTC có WP7 hơi bị đắt, ngang ngửa Iphone (IP) mà ở công ty mình mới có mỗi chú “Trung Đông Loan” sở hữu thôi 🙂 Cũng may là mình đã có một chút kiến thức về Silverlight nên đỡ bỡ ngỡ.

Các bài viết này sẽ chủ yếu dựa trên tài liệu: Windows Phone 7 Training Kit và cuốn sách Programming Windows Phone 7 của Microsoft.

Trước tiên mọi người cần cài đặt:

  1. Windows Phone Developer Tool
  2. Windows Phone 7 Training Kit (Training Kit)
  3. Programming Windows Phone 7 (eBook tham khảo)

Các bài viết bao gồm:

  1. Bắt đầu lập trình Windows Phone 7
  2. Sử dụng Expression Blend xây dựng giao diện ứng dụng Windows Phone 7
  3. Xây dựng ứng dụng Windows Phone 7 đầu tiên
  4. Các control và navigation trong Windows Phone 7
  5. Sử dụng Push Notifications trong Windows Phone 7
  6. Launchers và Choosers trong Windows Phone 7
  7. Vòng đời 1 ứng dụng trong Windows Phone 7
  8. Sử dụng Bing Maps trong Windows Phone 7
  9. Sử dụng control Panorama và Pivot trong Windows Phone 7
  10. Truy cập các thiết bị có trong Windows Phone 7

Come on…