Silverlight 2 Tutorial – Xây dựng giao diện dùng Style


WPF và Silverlight hỗ trợ một cơ chế cho phép lưu giá trị thuộc tính của các control theo cách có thể dùng lại. Chúng ta có thể lưu giữ những khai báo đó trong các file riêng biệt, và dùng lại nó cho nhiều control và trang khác nhau trong ứng dụng, hoạc thậm chí có thể dùng nó trong những ứng dụng khác nhau. Khái niệm này tương tự như CSS khi bạn làm việc với HTML để thực hiện các phép tùy biến cơ bản.

Ngoài khả năng định nghĩa các cài đặt cho các thuộc tính cơ bản (như Color, Font, Size, Margins…), các kiểu định dạng trong WPF và Silverlight cũng có thể được dùng để định nghĩa và dùng lại các Control Template, cho phép bạn có thể tạo ra các control có hình thức và cấu trúc được tùy biến một cách tối đa (và hỗ trợ nhiều cách định dạng tiên tiến hơn so với CSS). Tôi sẽ nói thêm về Control Templates trong phần 7 của loạt bài này.
Đối với ứng dụng mẫu Digg, chúng ta sẽ định nghĩa các khai báo Style bên trong file App.xaml. Điều này cho phép chúng ta có thể dùng lại trong suốt toàn bộ các trang và control trong toàn ứng dụng.


Hãy bắt đầu bằng việc tạo dựng các kiểu định dạng cho control <Border> (và cả <TextBlock> chứa bên trong nó):


Chúng ta cũng có thể tạo hai thành phần Style bên trong file App.xaml để lưu giữ các cài đặt cho <Border> và <TextBlock> đã được khai báo trước đó:

Chú ý rằng chúng ta đã đặt cho mỗi Style một giá trị duy nhất cho “Key”. Chúng ta có thể cập nhật lại <Border> và <TextBlock> để tham chiếu đến các Style bằng cách dùng các Key. Chúng ta sẽ dùng một đặt tính trong XAML được gọi là “markup extensions” để làm điều này. “Markup extensions” được dùng khi có các giá trị không là literal (literal là các giá trị được đưa vào cụ thể như 1, 100, “abc” – khác với các giá trị chỉ biết được khi chạy chương trình như các giá trị được lưu trong các biến, kết quả trả về của hàm, hoặc dùng các biểu thức gắn nối dữ liệu…)

Khi chúng ta cập nhật các điều khiển khác bên trong trang Page.xaml để dùng các style, chúng ta sẽ có một file trông như sau:

Lưu giữ các cài đặt định dạng theo cách này cho phép người phát triển có thể tập trung hơn vào việc xây dựng các chức năng của chương trình, và cũng giúp chúng ta có thể dùng lại các style trong toàn bộ các control hoặc các trang.
Ghi chú: Một điều bạn cần chú ý với bản Beta1 là báo cáo lỗi khi bạn gõ vào tên kiểu định dạng hay khai báo thuộc tính sai là không rõ ràng (nó sinh ra một exception nhưng lại không báo cho bạn biết bạn sai ở chỗ nào). Vấn đề này sẽ được sửa lại trong bản Beta2, hiện tại thì bản nên chú ý kỹ vào những gì gõ vào nếu thấy một thông báo lỗi nạp một kiểu định dạng.

Bước tiếp theo
Bạn đã loại bỏ hoàn toàn các thẻ định dạng trong trang Page.xaml và dùng Style, giờ hãy đến bước tiếp theo để tùy chỉnh thêm hình thức của dữ liệu Story.
Để làm điều này, hãy đọc tiếp bài Dùng ListBox và DataBinding để hiển thị dữ liệu.

2 thoughts on “Silverlight 2 Tutorial – Xây dựng giao diện dùng Style

  1. Pingback: Silverlight 2 Tutorial - Kết nối mạng để lấy dữ liệu vào một DataGrid. « Nam Già

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s