2009-01-27 3 views
15

Tôi có một cửa sổ có nhiều nội dung. Tôi muốn có thể tách nội dung bằng cách sử dụng bảng và có dấu phân cách mà người dùng có thể nhấp vào nút chuyển đổi giữa mỗi bảng (với hoạt ảnh di chuyển dấu phân cách từ trái sang phải, hiển thị một phần và ẩn phần kia) . Hãy suy nghĩ về Microsoft Office (2007) navigation pane. Có cách nào dễ dàng để thực hiện việc này không?Có một điều khiển WPF mà tôi có thể sử dụng để mở rộng/thu gọn các bảng (hoạt ảnh)

Cảm ơn!

Trả lời

6

Tôi nghĩ rằng những gì bạn đang tìm kiếm là một "Accordion" kiểm soát, đây là một bài abotu làm thế nào để xây dựng một từ một chồng Expander điều khiển:

http://www.rooijakkers.net/Blog/post/2007/11/WPF-implementation-of-a-basic-Accordion-control.aspx

Và đối với các hình ảnh động hãy xem xét điều khiển "Tiết lộ" từ thủ thuật túi của Kevin tại http://j832.com/bagotricks/

Tôi nghĩ rằng ngay cả mẫu điều khiển Expander hoạt hình dựa trên điều khiển Hiển thị trong dự án mẫu.

+0

Liên kết chết. Blog tồn tại, bài viết không. Tháng 12 năm 2015 – kaplooeymom

7

Tôi sử dụng Expander.

<Expander Header="Items" IsExpanded="False"> 
    ... 
</Expander> 
+1

Điều đó không có động out-of-the-box. –

13

Tôi cũng cần điều này cho các ứng dụng WPF của tôi, và tốt nhất mà tôi đã tìm thấy là sự kiểm soát Accordion đầy đủ tính năng trong Silverlight Toolkit:

alt text http://www.sitechno.com/Blog/ct.ashx?id=a7c3c2d9-9446-4236-bc6e-c436427002ff&url=http%3a%2f%2fwww.sitechno.com%2fBlog%2fcontent%2fbinary%2fWindowsLiveWriter%2fAccordionpart1_102BB%2fimage_2.png

Mã nguồn có sẵn here, và một live demo here. Có thể dễ dàng chuyển sang WPF. Có một số 5 part blog entry bởi Ruurd Boeke thảo luận chi tiết. Trong part 4, ông thảo luận làm thế nào để lại sắc thái của accordion sử dụng các mẫu để có được cái nhìn accordion vĩ đại này:

alt text http://www.sitechno.com/Blog/content/binary/WindowsLiveWriter/AccordionPart4templatingexample_1219A/image_thumb_7.png alt text http://www.sitechno.com/Blog/content/binary/WindowsLiveWriter/AccordionPart4templatingexample_1219A/image_thumb_8.png