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

Rate this post

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

Comments

  1. tungnt says

    @ Hùng: Hiện tại mình chưa thấy lớp nào dạy WP7 ở HN. Nhưng chắc chắn trong thời gian không xa tới sẽ có nhiều khóa học về lập trình trên WP7. Bạn chờ xem nhé :)
    @Tuannguyencrt: Mình chưa hiểu crack emulator là như nào. Bạn cài dev tool là có luôn cái emulator, sau cứ thế mà lập trình rồi thử nghiệm trên emulator đó thôi.

  2. says

    Anh có tài liệu về wpf kg ạ? Hay bất cứ tài liệu nào liên quan, hướng dẫn sử dụng Expression Blend để viết ứng dụng với wpf. Share cho em với, em đang cần lắm. Cám ơn anh nhiều!

  3. tronghung says

    anh ui! a cho e xin tài liệu về wpf sử dụng blend được hok ạh??? e đang rất cần nó! e xin cảm ơn!

  4. xuanchien says

    Em có ý tưởng làm 1 cái video từ hình ảnh và audio trong express blend 3, anh và mọi người có tài liệu hay có bài hướng dẫn về cái này thì share cho em nhé, mail của em là: [email protected]

    Cảm ơn mọi người

  5. says

    Chào anh ! Em cũng đang tìm hiểu về WPF thì đọc được blog của anh, anh có tài liệu nào về style cho các control trong Expression Blend không ạ ? Anh cho em đọc ké với nha, email của em là: [email protected] . Em cảm ơn anh nhiều.

  6. tungnt says

    Hi all,

    Mình đã gửi cho các bạn tài liệu Expression Blend tham khảo.
    Có gì cần trao đổi các bạn cứ comment trực tiếp trên này nhé

    Regards.

  7. says

    Cảm ơn anh vì blog rất hay và thiết thực.

    @all: ai có windows phone muốn deploy trên máy thật và chưa biết cách thì pm mình sẽ giúp unlock. (free tax ^^)

  8. says

    Chào anh!
    Em cần làm một phần mềm có UI tương tự như thế này>

    Tìm hiểu một vài hôm và định hướng sẽ theo đường này:
    Thiết kế giao diện trên photoshop -> import vào expressionblend -> vs2010
    Thực ra thì em học bên điện tử 😀 món design UI học thêm vì thích. :)
    Em có thể xin anh vài lời khuyên được không?
    Anh có tài liệu về Ex blend cho em xin nhé email : [email protected]
    Cảm ơn anh!

    • tungnt says

      Hi em,

      Nếu em có skill về Photoshop thì có thể thiết kế trên đấy tồi import vào blend để dựng bản mẫu của ứng dụng. Còn nếu chưa có skill PS thì có thể sử dụng luôn Blend để thiết kế. Blend thì có ưu điểm là thiết kế nhanh, có khả năng tạo ra các tương tác như thật, publish thành web để xin được feedback về sản phẩm.

  9. says

    Cám ơn Tungnt. Bài Blog này hay quá.
    Nãy mình vừa làm thử và thành công rồi. Nhưng thật sự vẫn tò mò và muốn biết nhiều hơn về cái này. Cậu có thể gửi cho mình xin 1 ít tài liệu được không? Mail mình là [email protected]. Mình cám ơn cậu trước nhé :)

Trackbacks

Leave a Reply to tungnt185 Cancel reply

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