Silverlight Tutorial 2 – Dùng User Control để cho phép xem theo dạng Master/Detail (phần 1)


Đây là phần 6 trong loạt 8 bài hướng dẫn các bước để xây dựng một chương trình Digg đơn giản dùng bản Beta 1 của Silverlight 2. Các bài hướng dẫn này nên được đọc theo thứ tự, và sẽ giúp giải thích một số khái niệm cơ bản trong Silverrlight.
Bạn có thể download mã nguồn phiên bản hoàn chỉnh của chương trình mẫu Digg tại đây.
Vì bài này hơi dài nên tôi sẽ tách làm hai phần để tránh lỗi hiển thị trong My Opera.


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)

23 thoughts on “Silverlight Tutorial 2 – Dùng User Control để cho phép xem theo dạng Master/Detail (phần 1)

  1. Anh Nam cho em hoi ti.
    Loi: ‘Digg’ is an undeclared namespace. Line 37, position 10

    The type ‘Digg:StoryDetailsView’ was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been build.

    Xin giup em go loi. Thanks anh Nam nhieu lam. Chuc anh nhieu suc khoe!!!

  2. Em kiểm tra xem ở đầu file (Page.xaml) có khai báo namespace Digg chưa:

    <UserControl x:Class="DiggSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Digg="clr-namespace:DiggSample">

  3. Em da sua duoc loi do roi. Thanks anh Nam nhieu lam. em da hoan tat phan 2. Nhung lai gap van de the nay.

    Loi: Unknown Attribute Name on element StoryDetailView. [Line 184 :Position 39].
    Khi thuc thi no bao loi:
    AG_E_NETWORK_ERROR.

  4. Có thể khi em dùng StoryDetailsView, em đã gõ sai tên tham số nào đó chăng?

  5. Anh Nam cho e hoi cach ket noi CSDL trong Silverlight. Silverlight co su dung duoc mo hinh 3 lop khong? Va cach lam nhu the nao??? Thanks anh Nam truoc!!!

  6. – Trong Silverlight không có kết nối dữ liệu.
    – Silverlight thường được dùng như lớp Presentation trong mô hình 3 lớp.

  7. Y em muon noi la khi client goi yeu cau ket noi den server ay. Thuc hien nhung cau truy van tu client – Server va phan hoi tu server – client the nao? Anh co the goi e mot so tai lieu ve truy van tu client- server khong? Cach lay du lieu va rut trich the nao?

    Mail cua em: thanhviet.ag@gmail.com
    Thanks a nhieu!!!

  8. “There was an error downloading metadata from the address. Please verify that you have entered a valid address.” An additional error is placed in the Add Service Reference dialog: “An error (Details) occurred while attempting to find services at http://localhost:53886/SilverlightApplication1_Web/WebService.asmx.”

    Khi add service Reference no bao loi nhu the. Mac du e da lam theo chi dan.
    thay doi

  9. Em phải start cái web app lên trước khi có thể add được reference

  10. Em da set as startup project cua Web App roi ma van bao loi.
    Loi : there was an error download metadata from the address. Please verify that you have entered a valid address.

  11. Không những set as startup project mà em phải start cả cái Web app lên, web app chưa chạy thì em làm sao kết nối mà lấy thông tin để add reference?

  12. Anh Nam cho e hoi em co mot ham Connection() o service1 chi chua doan code ket noi CSDL. Lam cach nao de bit la minh co ket noi duoc voi CSDL thanh cong hay khong???

  13. Nếu em gọi phương thức Open mà không bị Exception thì có nghĩa đã kết nối thành công, nếu muốn kiểm tra xem connection đã được mở hay chưa, em có thể kiểm tra thuộc tính State của nó, nếu connection.State = ConnectionState.Open thì có nghĩa là connection đã được mở.

  14. Lay du lieu tu DataGrid len Textbox Lam nhu the nao anh Nam???
    Em dung selectionchanged nhung thay vi trong windown form co thuoc tinh CurrenRow.cell con trong silverlight thi khong co.

  15. Em có thể dùng SelectedItem để lấy về dòng đang được chọn và gán giá trị cho textbox

  16. Anh Nam chi em ve cai treeview voi. sao em khong the go duoc lenh trong page.xaml. Cau hinh treeview thi phai lam sao?

  17. Pro chi gium. Em da fill du lieu len mot dataset va chuyen sang file xml. Qua silverlight lam sao dua hinh anh len listbox???
    xml chi nhan dataset thoi phai khong? Kieu du lieu cua hinh anh tu CSDL nhu the nao moi load len listbox duoc???Xin chi em gap. Thanks anh nhieu lam!!!

  18. Anh Nam chỉ e cách xóa nhiều dòng trên datagrid khi ma checkbox được chọn. Thanks !!!

  19. Muốn load dữ liệu từ DB lên silverlight thì sử dụng web service. Không biết ông này đã làm silverlight chưa hay là chỉ đi dịch bài trên blog của người khác rồi post lại mà không ghi rõ là dịch từ đâu. Bó tay luôn.

  20. @Chuối:

    1. Các bài viết Silverlight 2 Tutorial được dịch lại từ blog của ScottGu, tại địa chỉ: http://weblogs.asp.net/scottgu/.
    ScottGu là phó chủ tịch bộ phận phát triển của Microsoft, và cũng là người đứng đầu nhóm phát triển Silverlight, đây là trang nói về ScottGu trên site của MS: http://www.microsoft.com/presspass/exec/guthrie/. Do vậy, tôi tin (có thể bạn thì không) nhưng gì anh ấy nói là chính xác về Silverlight.
    2. Các bài viết trong loạt bài Silverlight 2 Tutorial được viết từ tháng 2/2008 (http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx), bài dịch đầu tiên cũng được thực hiện vào thời điểm đó (http://my.opera.com/namdh/blog/silverlight-2-tutorial-viet-chuong-trinh-hello-world-voi-silverlight-2-va-vs), lúc đó nó còn là Beta 1, ngay cả tựa đề của loạt bài cũng đã thể hiện rõ nó được viết cho phiên bản 2. Do vậy, sự thiếu vắng những công cụ, thư viện mới hơn (ví dụ trong phiên bản 3) là điều hiển nhiên.
    3. Nếu bạn đọc loạt bài này từ phần 1 (https://namdh.wordpress.com/2008/07/30/silverlight-2-tutorial-vi%E1%BA%BFt-ch%C6%B0%C6%A1ng-trinh-hello-world-v%E1%BB%9Bi-silverlight-2-va-vs-2008/), hay trong các bản PDF, bạn sẽ thấy ngay từ những dòng đầu tiên, nó đã giới thiệu xuất xứ của bài viết, do vậy không thể nói là “không ghi rõ là dịch từ đâu”.
    4. Bản thân tôi đã viết cho SL ngay từ những phiên bản đầu tiên, nhưng thiển nghĩ việc tôi có dùng SL hay chưa thực sự cũng không quan trọng, vì tôi là người dịch. Chỉ cần người viết chính xác, và tôi dịch lại chính xác những gì người ta viết, cộng thêm một chút trau chuốt cho dễ hiểu, vậy là đủ. Tôi cũng không dịch các bài viết này cho tôi, mà cho nhiều bạn khác đang học CNTT muốn có thêm tài liệu mới nhưng vốn tiếng Anh hạn chế, để các bạn ấy có thể tiến nhanh hơn, không phải khó khăn vật lộn như tôi trước đây. Đó cũng là lý do vì sao tôi chỉ yêu cầu đảm bảo nội dung chính xác mà không cần đăng lại tên tác giả hay link gốc khi các website/blog khác đăng lại bài viết của mình.

    Hi vọng bạn sẽ quay lại và đọc bài trả lời này.

  21. The write-up features established helpful to me personally.
    It’s extremely informative and you’re simply obviously quite experienced in this area. You get opened my eye to be able to numerous thoughts about this specific subject matter along with intriquing, notable and strong content.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s