Using avalondock to create a WPF multi-tag browser (1)

Avalondock is an open-source project on codeplex, which can easily make a UI effect similar to.

It is a demo in avalondock source code:

We can use this third-party control to create a multi-tag browser.

The following is the final result:

 

You can even drag a tag out of the main form to form an independent window:

Is it like the new texteditor in vs2010.

But observe common browsers, such as IE:

Chrome:

Firefox:

They all have a button to add a new tag, but the documentpane of avalondock does not create a new documentcontent button by default.

Documentpane and documentcontent are two of multiple types in avalondock. documentpane is the parent container of documentcontent, and documentcontent can contain any UI element, such as a webbrowser.

So our first step is to write a button for adding a new documentcontent to documentpane of avalondock.

First, restyle. Find the documentpanestyles. XAML file from the avalondock source code and locate

Code < Button X: Name = "Part_showcontextmenubutton" Dockpanel. Dock = "Right" Width = "18" Height = "18" Style =" {Staticresource paneheadercommandstyle} " Command = "Ad: documentpane. showdocumentslistmenucommand" >
< AD: alignedimage >
< Image X: Name = "Showcontextmenuicon" Source = "Images \ pinmenu.png" Width = "13" Height = "13" Stretch = "Uniform" />
</ AD: alignedimage >
</ Button >

 

 

This sectionCode

Then add the following code:

Code < Button Dockpanel. Dock = "Right" Width = "18" Height = "18" Style =" {Staticresource paneheadercommandstyle} " Command = "Ad: documentpane. addnewcommand" >
< AD: alignedimage >
< Image Source = "Images \ add.png" Width = "13" Height = "13" Stretch = "Uniform" />
</ AD: alignedimage >
</ Button >

 

 

TheAdd.pngIt is an image with a plus sign that I can find on the Internet;

TheAD: documentpane. addnewcommandNext we will add a command to documentpane.

Find the documentpane. CS file and add the Code:

Code Public   Static Routedcommand addnewcommand =   New Routedcommand ();
Private   Void Executedaddnewcommand ( Object Sender, executedroutedeventargs E)
{
Addnew ();
}
Private   Void Addnew ()
{
Documentcontent newcontent =   New Documentcontent ();
Newcontent. Title =   " New Content " ;
Newcontent. isfloatingallowed =   True ;
Items. Add (newcontent );
}
Private   Void Canexecuteaddnewcommand ( Object Sender, canexecuteroutedeventargs E)
{
E. canexecute =   True ;
}

 

 

ThenOninitializedAdd the following sentence to the method:

This. Commandbindings. Add (NewCommandbinding (addnewcommand, executedaddnewcommand, canexecuteaddnewcommand ));

 

 

In this way, we add a plus sign to documentpane and associate it with the addnewcommand command.AddnewMethod. BecauseDocumentpane is a subclass of selector in WPF, and Selector inherits from itemscontrol. Therefore, documentpane has an items attribute. What we do in addnew method is to add a new documentcontent to its items.

Run the demo provided by avalondock again. You can see a small plus icon on the right side. click the button to create a new tab:

OK! The first step is done.

However, each tag is empty. Next, add a webbrowser to each tag.

Do you want to modify the addnew method added earlier to add a webbrowser in it? It is not very good. It doesn't feel like it is modifying but destroying the source code of avalondock. After all, avalondock is a control library, when adding a new tag, the default behavior should be to leave the tag empty.

Adding a webbrowser to each newly added empty tag should be done in the Customer Code.

This part will be written again tomorrow. Wash it and see the 10-4 show. (This is a pretty good video about vs2010 and. Net 4 new features:Http://channel9.msdn.com/shows/10-4/ )

Over and out! Ciao!