NAM GIÀ

User Control là gì ?
Một trong những mục tiêu thiết kế Silverlight và WPF là cho phép các nhà phát triển có thể dễ dàng đóng gói các thành phần giao diện thành những control có thể dùng lại được. Các nhà phát triển có thể tạo ra các control mới bằng cách tạo một lớp thừa kế từ một lớp Control đã có (có thể là chính bản thân lớp Control, cũng có thể là một lớp nào đó thừa kế từ Control, chẳng hạn như TextBox, Button...). Hoặc bạn cũng có thể tạo một lớp User Control một cách dễ dàng từ các file XAML để tạo ra giao diện cho một control, và các lớp này cũng có thể dễ dàng dùng lại.
Đối với Digg, chúng ta muốn tạo ra một ứng dụng hoạt động theo kiểu master/details, nó sẽ cho phép người dùng tìm dữ liệu về một chủ đề nào đó rồi đưa vào danh sách, và cho phép người dùng chọn một kết quả để xem thông tin chi tiết. Chẳng hạn, nếu chọn một kết quả trong danh sách:

sẽ xuất hiện các thông tin chi tiết như sau:

Chúng ta dự định sẽ xây dựng bảng thông tin chi tiết này bằng cách tạo ra một đối tượng UserControl có tên "StoryDetailsView".

Tạo User Control "StoryDetailsView"
Chúng ta sẽ bắt đầu bằng cách nhấn chuột phải lên trên tên dự án DiggSample trong Visual Studio và nhấn chọn "Add new item". Trong cửa sổ mới xuất hiện, bạn chọn UserControl và đặt tên cho control muốn tạo là "StoryDetailsView":

Bạn sẽ thấy một UserControl với tên đã chọn được thêm vào danh sách:


Xây dựng một cửa sổ modal đơn giản bằng cách dùng một User Control:
Chúng ta dự định sẽ dùng control StoryDetailsView để hiển thị một hộp thoại chứa nội dung chi tiết của kết quả tìm kiếm. Khi nó được hiển thị, chúng ta muốn rằng nó sẽ hiện lên trên tất cả các nội dung khác trên trang, và phải đảm bảo rằng người dùng sẽ không thể can thiệp vào bất kỳ phần nào khác nếu chưa đóng hộp thoại này lại.
Có một số cách để làm ra hộp thoại dạng modal này. Trong trường hợp này chúng ta sẽ làm bằng cách mở file StoryDetailsView.xaml và thêm vào đoạn XAML sau:

Thẻ <Rectangle> ở trên dùng để chiếm lấy toàn bộ diện tích trên màn hình. Màu nền của nó sẽ màu xám tối mờ mờ (vì thuộc tính Opacity của nó là 0.765 nên bạn có thể nhìn thấy một chút phía sau nó). Thẻ <Border> thứ hai sẽ nằm lên trên hình chữ nhật trước, và chiếm một phần trên trang. Nó có màu nền xanh, và chứa một nút Close.
Khi chạy, control StoryDetailsView sẽ hiển thị như sau:

Chúng ta có thể tạo hàm xử lý sự kiện "CloseBtn_Click" trong file code-behind của user control. Khi nhấn lên, hàm này sẽ đặt thuộc tính Visibility của UserControl thành "Collapsed", đối tượng sẽ biến mất và người dùng sẽ trở lại màn hình bên dưới nó.


Hiển thị control StoryDetailsView
Một cách dễ dàng để hiển thị control StoryDetailsView trên màn hình là thêm nó vào cuối file Page.xaml, và đặt giá trị mặc nhiên cho thuộc tính Visibility của nó là Collapsed (do vậy mặc nhiên nó sẽ không hiển thị khi ứng dụng được nạp):

Chúng ta có thể bắt sự kiện "SelectionChanged" từ ListBox bên trong file code-behind của Page.xaml:

Khi một người dùng chọn một mục nào dó trong danh sách, chúng ta sẽ dùng hàm xử lý sự kiện SelectionChanged của ListBox để đặt giá trị cho thuộc tính Visibility của control ShowDetailsView thành "Visible":

Nó sẽ làm xuất hiện hộp thoại mà chúng ta đã tạo. Khi người dùng nhấn nút "Close", nó sẽ biến mất, và người dùng lại có thể tiếp tục chọn một kết quả khác.

(Xem tiếp phần 2)