WPF Designing Material Design Tabs with Dragablz

In this post let’s see how we can create WPF Tabs with Material Design using Dragablz Tabs. Firstly, you will need to download the Dragablz dll files for WPF Tab control and reference them in your WPF Projects.

Step 1 : 

Click on Manage NuGet Packages from Solution explorer of your Project.

Search for “Dragablz” from the search box and install the package in your WPF Project.

Similarly search for Material Design and install the NuGet Package in your Project

See the reference of the Project to see the references.

Now let’s start our Project to create WPF Material Tabs using Dragablz.

Open your MainWindow.xaml file and edit it as below :

MainWindow.xaml:

<Window x:Class="WPFMaterialDesign.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" WindowState="Maximized">
<dragablz:TabablzControl>
<dragablz:TabablzControl.InterTabController>
<dragablz:InterTabController />
</dragablz:TabablzControl.InterTabController>
<TabItem Header="Tab 1">
<StackPanel Background="White" Height="500" Orientation="Vertical">
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 1</TextBlock>
</StackPanel>
</TabItem>
<TabItem Header="Tab 2">
<StackPanel Background="White" Height="500" Orientation="Vertical">
<TextBlock FontSize="25" Padding="25" Foreground="#013284" FontWeight="ExtraBold" >Tab 2</TextBlock>
</StackPanel>
</TabItem>
<TabItem Header="Tab 3">
<StackPanel Background="White" Height="500" Orientation="Vertical">
<TextBlock FontSize="25" Padding="25" Foreground="DarkGreen" FontWeight="ExtraBold" >Tab 3</TextBlock>
</StackPanel>
</TabItem>
</dragablz:TabablzControl>
</Window>

This will WPF Page will have 3 Material Design tabs, which can be dragged within the window page.

Now open your  App.xaml file of your WPF Project and edit it as below :\

App.xaml :

<Application x:Class="WPFMaterialDesign.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:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ListBox.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />

<!-- primary color -->
<ResourceDictionary>
<!-- include your primary palette -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Teal.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--
include three hues from the primary palette (and the associated forecolours).
Do not rename, keep in sequence; light to dark.
-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary700}"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="{StaticResource Primary700Foreground}"/>

<!-- MAHAPPS BRUSHES -->
<SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource Primary700}" />
<SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource Primary500}" />
<SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource Primary400}" />
<SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource Primary300}" />
<SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource Primary200}" />
<SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource Primary700}"/>
<SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource Primary500Foreground}" />

<LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5">
<GradientStop Color="{StaticResource Primary700}" Offset="0" />
<GradientStop Color="{StaticResource Primary300}" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource Primary500}" />
<SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource Primary500}" />
<SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{StaticResource Primary500Foreground}" />
<SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{StaticResource Primary500}" Opacity="0.4" />

</ResourceDictionary>

<!-- secondary colour -->
<ResourceDictionary>
<!-- include your secondary pallette -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Amber.xaml" />
</ResourceDictionary.MergedDictionaries>

<!-- include a single secondary accent color (and the associated forecolour) -->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
</ResourceDictionary>

<!-- Include the Dragablz Material Design style -->
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>

</ResourceDictionary.MergedDictionaries>

<!-- tell Dragablz tab control to use the Material Design theme -->
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
</ResourceDictionary>
</Application.Resources>
</Application>

On running this project now, you will be able to see Material Design Tabs in your WPF application like below :

Thank You.