Chào mừng đến với Diễn đàn lập trình - Cộng đồng lập trình.
Trang 1 của 3 123 CuốiCuối
Kết quả 1 đến 10 của 22
  1. #1
    Ngày tham gia
    Sep 2015
    Bài viết
    0

    Thiết kế bố cục chương trình sử dụng TabControl trong DevExpress

    chào tất cả mọi người, bài này mình lấy từ bên trang web vn-zoom.com vì mình thấy bài này quá hay và rất thiết thực cho dân lập trình tụi mình nên mình xin được phép post lại, đây là bài viết gốc (ko bít cái này có phải không nữa[IMG]images/smilies/clap_grin.gif[/IMG]) bài gốc tại đây

    Tham khảo sơ mấy đề tài của tụi bạn thì thấy là về ý tưởng và code thì mấy bạn làm rất tốt, có điều về phần giao diện thì quá dễ giải. Không biết mọi người nghĩ sao, chứ theo mình một chương trình không nên cứ nhấn một button thì bay ra một form, cứ nhấn button là bay ra form. Nhìn bố cục không đẹp tý nào mặc dù là về quản lý và code thì nó thuận tiện việc chia việc và chỉnh sửa.


    Từ trước giờ mình rất thích TabControl, nhìn nó đẹp, gọn và dễ sử dụng. Nên mỗi khi thiết kế bố cục cho một chương trình thì giải pháp đầu tiên là mình nghĩ tới nó. Có nhiều người không thích thiết kế bằng TabControl vì rườm rà trong việc Show() và Hide() các control. Vã lại các bạn làm tab tĩnh nên có form sẽ có một dãy cả chục tab trong khi đó chỉ cần thao tác với một vài tab thôi.


    Mình không tab tĩnh. Mình thiết kế theo dạng tab động, là chỉ khi nào cần thao tác với form đó thì 1 tab mới sẽ được tạo ra và dock form cần thao tác vào. Xong rồi bạn có thể đóng tab đó lại, khi nào cần thì mở ra. Form và tab là 2 object riêng biệt, nên bạn không cần lo về vấn Show() và Hide() các control làm gì, vì nó là hoàn toàn giống 1 form riêng lẻ bình thường nên cũng dễ dàng trong việc phân công công việc.


    Đây là ví dụ, mình đã áp dụng nó vào đề tài CRM vừa rồi của mình.


    Mình thiết kế theo dạng parent-child tab. Đối với các loại chương trình có chức năng quản lý thì quy mô và số lượng form nó không phải ít, nên mình thiết kế thế này:


    Bottom TabControl
    Left TabControl
    Top TabControl


    Top nằm trong Left, Left nằm trong Bottom, Bottom nằm trong Client panel của main form.




    Đây là giao diện chính khi mới mở lên, chỉ có 1 tab ở Bottom TabControl, cần làm gì thì mở form đó lên, tab mới sẽ được tạo bên cạnh và dock form đó vào.




    Khi ribbon chuyển qua ribbpage là "Khách Hàng" thì tự động Bottom TabControl sẽ tạo tabpage là "Khách Hàng" và dock form khách hàng vào. Trong form khách hàng có 1 TabControl khác mình chọn Header Location là "Left" => Left TabControl. Trong form quản lý khách hàng thì có TabControl để hiển thị tên khách hàng được lọc theo chữ cái đầu tiên, mình cho Header Location = Top => Top TabControl.



    Khi nhấn vào nút thêm khách hàng thì tự động sẽ tạo thêm tabpage mới và dock form thêm khách hàng đã được design sẵn trước đó vào. Cùng lúc bạn cũng có thể thao tác với tabpage quản lý lúc nảy, chỉ cần chọn tabpage quản lý, hoặc khi bạn nhấn vào nút khách hàng, chương trình sẽ kiểm tra nếu tabpage hoặc tabcontrol đó đã được tạo rồi thì nó sẽ được chọn.




    Tương tự như vậy, khi chuyển sang ribbonpage khác (vì do mình phân bố mỗi ribbonpage là một nhóm khác nhau nên mỗi nhóm sẽ là mỗi tabpage trong Bottom TabControl) thì chương trình tự tạo nếu chưa tạo, hoặc chọn tabpage đó nếu đã tạo.





    Bạn có thể đóng bất kỳ tabpage nào, bất cứ lúc nào, và cũng có thể mở lại bất cứ lúc nào.



    Các tabcontrol khác cũng tương tự, bạn đều có thể đóng bất cứ tabpage nào.



    Không cần phải theo đúng thứ tự, không theo 1 thứ tự nào cả, do vậy bạn không cần lo về vấn đề rườm rà rối rắm. Cứ tạo tabpage mới là sẽ kế tiếp theo tabpage đã có.



    Trong DevExpress bạn có thể điều khiển được tất cả các tabcontrol bằng sub menu, popup menu, application menu đều được. Chọn form đó, nếu chưa tạo, thì tạo, đã tạo rồi thì chọn tabcontrol đó và active tabpage đó.


    Đây là phần code mình đã tách ra từ đề tài để dễ coi.
    Viết bằng VS 2010 và sử dụng DevExpress 10.1

    http://www.mediafire.com/?4gewxadccsgagkh
    VS 2008
    http://www.mediafire.com/?yz141njqy4wauyp

    Video: http://www.mediafire.com/file/96sf5k...d%20layout.mp4
    VS 2008: http://www.mediafire.com/file/yz141n...ayout_2008.rar
    VS 2010: http://www.mediafire.com/file/4gewxa...g%20layout.rar

    Do lần đầu làm cái dụ quay phim này nên mọi người thông cảm nha

  2. #2
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    rất hay. cám ơn bạn. nếu bạn demo video full cách làm thì hay quá

  3. #3
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    hic mình chỉ là người copy lại thôi bạn ơi, chứ mình có làm đâu, nếu mình làm được mình sẽ up

  4. #4
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    Đỉnh cao vô đối.
    con mắt nghệ thuật tuyệt vời luôn.
    khâm phục, khâm phục thật.
    thanks.

  5. #5
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    Cho mình hỏi bộ thư viện DevExpress sao khi cài cho phiên bản Visual Studio 2010. Mình hok add nó vào Toolbox được. ! hix mong các bạn chỉ giáo . Thanks

  6. #6
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    Bạn vào thư mục cài đặt chương trình đường dẫn là "C:\Program Files\DevExpress 2011.1\Components\Tools" tìm file "Toolbox" chạy là nó cập lại các control chương trình DevExpress 201 lên Toolbox của viusal 2010 cho bạn,chúc bạn thành công!

  7. #7
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    uhm, mình cũng dùng chương trình của mình hoàn toàn 100% là Devexpress.
    Mình cũng làm tương tự của bạn, chỉ là các thanh công cụ đang chạy nằm dưới thanh Ribbon. Giao diện của nó thì có rất nhiều nên tha hồ chọn.
    Nhìn của bạn làm cũng đc lắm.

  8. #8
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    Khi cài Devexpress thì có phải bản quyền gì không bạn ơi?? Nếu có bản không tính phí thì share nhé

  9. #9
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    hay wwa,hay ahay

  10. #10
    bác này là Oops bên vn-zoom, hiện nay đã đi làm rồi![IMG]images/smilies/smile.png[/IMG]

    có thể nói về devexpress là lão trùm luôn [IMG]images/smilies/applause.gif[/IMG][IMG]images/smilies/applause.gif[/IMG][IMG]images/smilies/17.gif[/IMG]

    pm lão suốt[IMG]images/smilies/2.gif[/IMG]

 

 
Trang 1 của 3 123 CuốiCuối

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •