• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

[VB.NET] Bài 2: Sử dụng Microsft Expression Blend 4

Lập trình cho Windows Phone

Điều hành viên: tummosoft

Hình đại diện của người dùng
tummosoft
Điều hành viên
Điều hành viên
Bài viết: 331
Ngày tham gia: T.Hai 19/05/2014 2:23 pm
Has thanked: 7 time
Been thanked: 57 time
Liên hệ:

[VB.NET] Bài 2: Sử dụng Microsft Expression Blend 4

Gửi bàigửi bởi tummosoft » CN 14/09/2014 7:56 am

Để thiết kế giao diện cho ứng dụng Windows Phone, thay vì phải làm việc với các file XAML, 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)

Hình ảnh

- 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

Hình ảnh

- 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

Hình ảnh

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)

Hình ảnh

- 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…

Hình ảnh

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

Hình ảnh

Hình ảnh

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

Hình ảnh

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

Hình ảnh

Xeo video sử dụng Microsft Expression Blend 4 tại đây: http://cione.com.vn/Videos/535/bai-3-su ... -phone-7-1

Xem thêm hướng dẫn khác: http://www.expressionblendstepbystep.com/

Nguồn: http://tungnt185.wordpress.com/tag/l%E1 ... s-phone-7/


:) Tummo Software :D
http://tummosoft.com

Quay về “Windows Phone”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách