How to drag and move TabItem with DragaBlz

I discover a good thing for all your #WPF Applications you can use it with the two popular Themes Mahapps and Material Design. You can find they own Github project Mahapps and Material Design and DragaBlz

Today we focus on DragaBlz with Material Design With the demo project you can view the XAML for each objects.

1. How have all the Library ?

• In Visual Studio Community Create an WPF Application and you can manage your nuget package.

• And we can search Material Design Themes

• In your Visual Studio you can Install the nuget package Dragablz

  Install-Package Dragablz -Version 0.0.3.203
  

• When done you can retrieve all the library in your source directory.

2. Namespace in your XAML file ?

In your XAML file you can add in specify the namespace. In this example I have Mahapps Windows.

<Window 
        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:materialDesign="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
        Title="DragaBlz WPF Demo" Height="350" Width="525"
        ResizeMode="NoResize"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen">

You can add this line xmlns:materialDesign=”clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf” in order to create some Material Design Objects. For the Dragablz in the namespace you can add the line xmlns:dragablz=”clr-namespace:Dragablz;assembly=Dragablz”

Then you need add some ressources in the ResourceDictionary.

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary>
                  <!-- Primary colour -->
                    <ResourceDictionary.MergedDictionaries>
                          <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Blue.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                    
                    <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}"/>
                </ResourceDictionary>
 
                <!-- secondary colour -->
                <ResourceDictionary>
                     <ResourceDictionary.MergedDictionaries>
                     <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Yellow.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                     <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 Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />  
                </ResourceDictionary.MergedDictionaries>
 
            <!-- tell Dragablz tab control to use the Material Design theme -->
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
        </ResourceDictionary>
    </Window.Resources>        

You need Add in your on Style for the Control dragablz:TabablzControland you specify BasedOn=”{StaticResource MaterialDesignTabablzControlStyle}”

3. Dragablz Control

This Example create a TabControl Dragablz.

<dragablz:TabablzControl Margin="8">
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Dragablz" IsSelected="True">
        <TextBlock>Hello World</TextBlock>
    </TabItem>
    <TabItem Header="#WPF">
        <TextBlock>We Have Tearable Tabs!</TextBlock>
    </TabItem>
    <TabItem Header="#XAML">
        <TextBlock>Wellcom in XAML and WPF!</TextBlock>
    </TabItem>
</dragablz:TabablzControl>

3. My Application

This application is a example for Dragablz preview in Windows Presentation Foundation with XAML and PowerShell

My Application is available on my Github depot here.

Written by Jérôme Bezet-Torres @JM2K69.