As we saw in the previous post, it’s pretty complicate to create a custom design in WPF to override the default style of the TabControl, but it’s pretty simple to extend the behavior of it.
As a senior dev, I usually don’t like to: 1) touch what is already working, 2) reinvent the wheel just to write the same code twice. For that there is the refactoring process, at most!
So, let’s start by the requirement we had in the previous post, we need to emulate the VS IDE in our applications, that’s it! We also saw that Prism has the RegionAdapter, so now we just need a cool control. Well there is the Avalon Dock project that is open source, really well done, flexible and ready for WPF 4. So let’s use it for our purposes. The final result should be something like this:
Avalon dock is crazy powerful and allows you to build a complete system of docking and modal windows into your WPF application. But before doing that you need to write a custom region adapter for it!
So, this is the basic concept of a custom Region Adapter in Prism. You create you custom adapter class by inheriting from RegionAdapterBase<T> in the following way:
Region adapter for Avalon Dock
- public sealed class AvalonRegionAdapter : RegionAdapterBase<DocumentPane>
- {
- public AvalonRegionAdapter(IRegionBehaviorFactory factory)
- : base(factory)
- {
-
- }
Avalon dock has a lot of future, and you should create a Region adapter able to attach any type of dock view. In my case I will use only the Tab region adapter that is called DocumentPane. Now the RegionAdapterBase requires that you implement three methods:
Create region
- protected override IRegion CreateRegion()
- {
- return new AllActiveRegion();
- }
The create region which specify what base adapter you want to use. In this case we want to handle any type of view added to this adapter, like an ItemsContainer or a TabControl.
Adapt
- protected override void Adapt(IRegion region, DocumentPane regionTarget)
- {
- region.Views.CollectionChanged += delegate(Object sender, NotifyCollectionChangedEventArgs e)
- {
- OnViewsCollectionChanged(sender, e, region, regionTarget);
- };
- }
Then we override the adapt method. This method is called once so in my case, because I have a DocumentPane I will then listen for the event Views.CollectionChanged. In this way I know every time if a view has been added or removed from the region.
Code Snippet
- private void OnViewsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e, IRegion region, DocumentPane regionTarget)
- {
- if (e.Action == NotifyCollectionChangedAction.Add)
- {
- //Add content panes for each associated view.
- foreach (object item in e.NewItems)
- {
- UIElement view = item as UIElement;
-
- if (view != null)
- {
- DockableContent newContentPane = new DockableContent();
- newContentPane.Content = item;
- //if associated view has metadata then apply it.
- newContentPane.Title = view.GetType().ToString();
- //When contentPane is closed remove the associated region
- newContentPane.Closed += (contentPaneSender, args) =>
- {
-
- };
- regionTarget.Items.Add(newContentPane);
- newContentPane.Activate();
- }
- }
- }
- else
- {
- if (e.Action == NotifyCollectionChangedAction.Remove)
- {
-
- }
- }
- }
Now, here there are two major steps. First we want to know if the item has been added or removed from the collection. If it’s added we create a new DockableContent and we set the Content to our view. Then we need to set a couple of properties like Title and name. In my case I am just adding the view, we will see later how to implement our TabModel property. What we can do then is to attach a listener to the close event of this tab. Why? Because when avalon will close a dock document we need also to destroy the corresponding view.
Then the second part is when the regionAdapter has a request of closing a view. We want to destroy the corresponding tab control.
Now go back a little bit and change the code in this way:
Code Snippet
- TabViewModel viewModel = ((UserControl)view).DataContext as TabViewModel;
- if (view != null)
- {
- DockableContent newContentPane = new DockableContent();
- newContentPane.Content = item;
- if (viewModel != null)
- {
- Image img = new Image();
- img.Source = new BitmapImage(new Uri(@"Resources/Alerts.png", UriKind.Relative));
- newContentPane.Title = viewModel.TabModel.Title;
- newContentPane.IsCloseable = viewModel.TabModel.CanClose;
- newContentPane.Icon = img.Source;
- }
It’s a little bit dirty but what we are trying to do here is to cast the View.DataContext to a type TabViewModel. It it’s the right type, as NET won’t throw an exception but simply returns an empty instance … we will populate the tab controls with our info.
The final result is this one:
The first can’t be closed and the second one can be, also we added a special icon to the context menu. More than that, this is still a WPF controls where you can apply your custom style. That’s it!
Ops, this is the new code in the MainView, of course:
XAML Avalon Dock adapter
- <ad:DockingManager Grid.Column="1" Grid.Row="1" >
- <ad:DocumentPane cal:RegionManager.RegionName="TabRegion" Name="TabRegion">
- <ad:DockableContent Title="Some title">
-
- </ad:DockableContent>
- </ad:DocumentPane>
- </ad:DockingManager>
Final Note: As you can see building a custom region adapter is easy but you must know the control behind that, the one that will act as a region adapter. When you know that part you can play as you want. For example I have a region adapter for the ToolBar so every time you load a view, I pass the corresponding Toolbar to the main toolbar region. Same for the ribbon and for the Outlook bar.