Multi Tabs WebBrowser C#

Bằng cách kết hợp giữa TabControl và WebBrowser, ta có thể tạo ra một trình duyệt có chức năng duyệt nhiều tab thú vị như sau:

Từ đây các bạn có thể tự phát triển thêm nhiều chức năng mới cho trình duyệt của mình. Chương trình sẽ rất đơn giản thôi, hãy cùng tìm hiểu nhé.

Giao diện

Giao diện gồm 3 thành phần chính là MenuStrip, 1 panel chứa TabBrowser và 1 panel chứa textbox để nhập đường dẫn cùng với các button chức năng phụ. Các control chính được đặt tên như sau:

Control	Name
TabControl	Tabs
Button Go	btnGo
Textbox	textUrl
Button Forward/Back	btnNext/btnPrev
MenuStrip item	ts***
Label StatusStrip	status

NewTab

Multi tabs dựa trên nguyên tắc sau: mỗi tab chứa 1 WebBrowser. Khi thêm 1 tab mới, gắn WebBrowser vào TabPage và gắn TabPage vào TabControl.

Hãy xem hàm thêm 1 tab TabPage mới sau:

Việc gắn tab.Tag = Tabs.SelectedIndex; có ý nghĩa quan trọng để xác định tên cho WebBrowser browser.Name = "browser_" + tab.Tag;. Vì thuộc tính Tag của Control là 1 object, ta có thể gán bất cứ thứ gì cho nó. Có thể xem đây là phần "Extend Description" của 1 Control.

Và khi Load form hoặc thêm tab mới (Ctrl + T), ta chỉ cần gọi hàm NewTab()

Navigate

Sau khi thêm 1 tab mới, ta đã cũng đã thêm webbrowser vào trong tab đó. Bây giờ nếu nhập đường dẫn vào textbox và click Go, ta chỉ cần thực hiện như sau:

Các bước thực hiện:

1. Đầu tiên là lấy đường dẫn nhập vào từ textbox và format nó. Công việc format chỉ đơn giản là nếu đường dẫn không chứa giao thức http:// thì thêm vào phía trước đường dẫn.
2. Tiếp theo, kiểm tra nếu đường dẫn không hợp lệ thì báo lỗi và thoát xử lý.
3. Cuối cùng, thực hiện Navigate, với hàm BrowserNavigate() được mô tả như sau:

Trong phương thức này có sử dụng hàm lấy WebBrowser ở TabPage hiện tại. Như đã nói lúc đầu, việc gán Tag cho TabPage trở nên quan trọng và Name của WebBrowser được gán theo mẫu "browser_" + Tag. Từ đó ta có thể dễ dàng xác định WebBrowser trong TabPage.

Đoạn code trên khá dễ hiểu, mục đích là tìm trong TabPage các Control con có tên là "browser" + Tag và trả về kết quả.

Tabs_SelectedIndexChanged

Sự kiện này được gọi mỗi khi ta chọn 1 tab trong TabControl. Gọi sự kiện này để thay đổi textbox url cho phù hợp với mỗi webbrowser:

Close current tab

Đơn giản là remove tab đang được chọn, và nếu chỉ còn 1 tab thì xóa hết và thêm mới 1 tab

Close others

Xét mỗi tab có trong Tabs, nếu không phải là tab đang được chọn thì remove

Các công đoạn xử lý phụ bạn có thể tham khảo trong source code đính kèm.

Source code

Multi Tabs WebBrowser Example