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)
– 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
– 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  – 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) – 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… – 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. – 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.
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 |
