In a previous post I showed Dragablz and MahApps working together with a few basic pointers.  In this post I will illustrate the specific MahApps styles included in Dragablz, and show how to get a basic app shell up and running using both libraries.

So, starting from scratch, create a new WPF Application in Visual Studio.  Throw a TabControl into your app.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        Title="MainWindow" Height="350" Width="525">
    <TabControl>
        <TabItem Header="One">
            <Button HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</Button>
        </TabItem>
        <TabItem Header="Two">
            <Button HorizontalAlignment="Center" VerticalAlignment="Center">How are you doing</Button>
        </TabItem>
        <TabItem Header="Three">
            <Button HorizontalAlignment="Center" VerticalAlignment="Center">Goodbye</Button>
        </TabItem>
    </TabControl>
</Window>

If you fire it up, you’ll see it looks like tripe. And it’s static. To bring the tab control to life get Dragablz installed. Either from the Package Manager Console or the Manage Nuget Packages dialog install Dragablz.

Install-Package Dragablz

Switcheroo our boring old TabControl to the TabablzControl, and add an InterTabController property to let Dragablz know that the user can tear tabs out:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        Title="MainWindow" Height="350" Width="525">
    <dragablz:TabablzControl>
        <dragablz:TabablzControl.InterTabController>
            <dragablz:InterTabController />
        </dragablz:TabablzControl.InterTabController>
        <TabItem Header="One">
            <Button HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</Button>
        </TabItem>
        <TabItem Header="Two">
            <Button HorizontalAlignment="Center" VerticalAlignment="Center">How are you doing</Button>
        </TabItem>
        <TabItem Header="Three">
            <Button HorizontalAlignment="Center" VerticalAlignment="Center">Goodbye</Button>
        </TabItem>
    </dragablz:TabablzControl>
</Window>

If you fire up the application now you should be able to tear the tabs out.

But it most definitely still looks rubbish. We need styles. Again, use your NuGet delivery mechanism of choice to bring in MahApps.Metro.

Install-Package MahApps.Metro

MahApps handy QuickStart guide should popup in Visual Studio. If it doesn’t, check here.  Follow the guide.  In summary we need to convert our Window to the MetroWindow, and add a include few ResourceDictionary instances in the App.xaml.

Fire the application up, take a look.  Things are improving:

We have a metro/modern UI Window and button.  But the tab control is yet to receive a makeover. You should already made the relevant MahApps ResourceDictionary inclusions in the App.xaml. Now we need to bring in the Dragablz ResourceDictionary which contains the MahApps styles, and specify the default style for the DragablzTabControl, giving you an App.xaml which looks like:

<Application x:Class="DMGMD.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/themes/mahapps.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MahAppsTabablzControlStyle}" />
            
        </ResourceDictionary>
    </Application.Resources>
</Application>

If you fire up the application you will see the tab control is now coloured according to the MahApps accent defined in the App.xaml.

As a bonus, let’s add a Dragablz tool window to the Window, which can also be themed with MahApps colours. Switch back to MainWindow.xml, wrap the TabablzControl in a Layout (notice the FloatingItemContainerStyle property), and add a simple floating item to the Layout:

<controls:MetroWindow x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:dockablz="clr-namespace:Dragablz.Dockablz;assembly=Dragablz"
        Title="MainWindow" Height="350" Width="525">
    <dockablz:Layout FloatingItemHeaderMemberPath="Header" FloatingItemDisplayMemberPath="Content"
                     FloatingItemContainerStyle="{DynamicResource MahAppsToolDragablzItemStyle}">
        <dockablz:Layout.FloatingItems>
            <dragablz:HeaderedItemViewModel Header="Tool Window" Content="Tool window shich is also themed!" />
        </dockablz:Layout.FloatingItems>
        <dragablz:TabablzControl>
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController />
            </dragablz:TabablzControl.InterTabController>
            <TabItem Header="One">
                <Button HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</Button>
            </TabItem>
            <TabItem Header="Two">
                <Button HorizontalAlignment="Center" VerticalAlignment="Center">How are you doing</Button>
            </TabItem>
            <TabItem Header="Three">
                <Button HorizontalAlignment="Center" VerticalAlignment="Center">Goodbye</Button>
            </TabItem>
        </dragablz:TabablzControl>
    </dockablz:Layout>
</controls:MetroWindow>

And here will be your final result, a MahApps Window, ready for all your Metro/Modern UI content, which can also support tear-able tabs, tool windows, and docking!

In a future post I will illustrate how to add and remove tabs, and work in a MVVM environment.

Dragablz now provides its own window, “DragablzWindow”. Please note, it is not mandatory – and is still very much a work in progress!

What the Window will provide, is the ability to push the tabs up a bit, and even better, whatever padding is around the tab can become transparent whilst a tab is being dragged around, in a similar vein to IE. Check out the gif: