Home

Awesome

WPF Chrome Tabs - MVVM

A tab control based on WPF chrome tabs, modified to work with the MVVM pattern. WPF chrome tabs is a tab control modeled after the tabs in Google's Chrome browser.

New features include:

Available on NuGet.

The basic functionality can be done as simple as :

####xaml:

        xmlns:ct="clr-namespace:ChromeTabs;assembly=ChromeTabs"
    
        <ct:ChromeTabControl ItemsSource="{Binding ItemCollection}"
                             SelectedItem="{Binding SelectedTab}"
                             AddTabCommand="{Binding AddTabCommand}"
                             CloseTabCommand="{Binding CloseTabCommand}">

####viewmodel:

        public ObservableCollection<MyTabClass> ItemCollection { get; set; }
        public MyTabClass SelectedTab { get; set; }
        (...)
        void CloseTabCommandAction(MyTabClass tab)
        {
            ItemCollection.Remove(tab);
        }
        void AddTabCommandAction()
        {
            ItemCollection.Add(New MyTabClass());
        }

When using an ObservableCollection and without implementing the ReorderTabsCommand, tab reordering works out of the box by modifying the source collection order. The demo project shows how to implement your own sorting logic using CollectionViewSource, for when you don't wish to modify the source collection or for more advanced sorting.

##New in 1.2:

The demo project has also been updated to show how you can fully style the control by using your own templates.

##New in 1.1:

####Pinned tab implementation:

I strongly advice to check out the new demo project if you upgrade to 1.1 and plan to use pinned tabs. The old demo project contained sorting logic that can break pinned tab functionality if not changed.

Pinning tabs requires the "IsPinned" property to be set on the ChromeTabItem.

Subscribe to the ContainerItemPreparedForOverride event on ChromeTabControl, and set the IsPinned property:

        private void TabControl_ContainerItemPreparedForOverride(object sender, ContainerOverrideEventArgs e)
        {
            e.Handled = true;
            MyViewModel viewModel = e.Model as MyViewModel;
            if (e.TabItem != null && viewModel != null)
            {
                e.TabItem.IsPinned = viewModel.IsPinned;
            }
        }

Then we need to add a SortDescription to the CollectionViewSource to keep the pinned tabs in place. This description needs to be added before any other SortDescriptions:

     ICollectionView view = CollectionViewSource.GetDefaultView(MyTabCollection) as ICollectionView;
     view.SortDescriptions.Add(new SortDescription("IsPinned", ListSortDirection.Descending));

See the demo project for full implementations of functionality like tab tearing, snapping windows to tabs, tab reordering, context menus, pinning tabs, and more.

Example