Convert Figma logo to code with AI

ButchersBoy logoDragablz

Dragable and tearable tab control for WPF

2,263
333
2,263
140

Top Related Projects

27,472

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Google's Material Design in XAML & WPF, for C# & VB.Net.

2,598

Modern UI for WPF

All the controls missing in WPF. Over 1 million downloads.

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Shared Controlz for WPF and ... more

Quick Overview

Dragablz is a set of .NET controls and extensions for WPF (Windows Presentation Foundation) that enables dragging, docking, and layout management for tabbed interfaces. It provides a flexible and customizable solution for creating dynamic user interfaces with tab-based navigation and organization.

Pros

  • Highly customizable tab control with drag and drop functionality
  • Supports docking and layout management for complex UI designs
  • Integrates well with MVVM (Model-View-ViewModel) pattern
  • Active development and community support

Cons

  • Limited to WPF applications, not compatible with other .NET UI frameworks
  • Steeper learning curve compared to standard WPF controls
  • May require additional styling effort to match specific design requirements
  • Documentation could be more comprehensive for advanced scenarios

Code Examples

  1. Basic TabablzControl setup:
<dragablz:TabablzControl>
    <TabItem Header="Tab 1">
        <TextBlock Text="Content for Tab 1" />
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBlock Text="Content for Tab 2" />
    </TabItem>
</dragablz:TabablzControl>
  1. Implementing a custom tab header:
<dragablz:TabablzControl>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Source="icon.png" Width="16" Height="16" Margin="0,0,5,0" />
                <TextBlock Text="Custom Tab" />
            </StackPanel>
        </TabItem.Header>
        <TextBlock Text="Content with custom header" />
    </TabItem>
</dragablz:TabablzControl>
  1. Adding interTabController for dragging between windows:
<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <!-- Tab items here -->
</dragablz:TabablzControl>

Getting Started

  1. Install the Dragablz NuGet package:

    Install-Package Dragablz
    
  2. Add the Dragablz namespace to your XAML:

    xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
    
  3. Use the TabablzControl in your XAML:

    <dragablz:TabablzControl>
        <TabItem Header="Tab 1">
            <TextBlock Text="Content for Tab 1" />
        </TabItem>
    </dragablz:TabablzControl>
    
  4. Customize the control using various properties and styles as needed.

Competitor Comparisons

27,472

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Pros of Avalonia

  • Cross-platform UI framework supporting Windows, macOS, Linux, iOS, Android, and WebAssembly
  • Modern, flexible architecture inspired by WPF but with improved performance
  • Active development and growing community support

Cons of Avalonia

  • Steeper learning curve for developers new to XAML-based frameworks
  • Smaller ecosystem of third-party controls compared to more established frameworks

Code Comparison

Avalonia XAML:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Avalonia Example">
    <Button Content="Click me!" />
</Window>

Dragablz (WPF-based) XAML:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" />
    <TabItem Header="Tab No. 2" />
</dragablz:TabablzControl>

While Avalonia is a comprehensive UI framework, Dragablz focuses specifically on providing advanced tab controls for WPF applications. Avalonia offers broader cross-platform support and a more modern architecture, while Dragablz excels in its specialized tab functionality within the WPF ecosystem.

Google's Material Design in XAML & WPF, for C# & VB.Net.

Pros of MaterialDesignInXamlToolkit

  • Comprehensive Material Design implementation for WPF
  • Extensive set of controls and themes
  • Active development and community support

Cons of MaterialDesignInXamlToolkit

  • Steeper learning curve due to its extensive feature set
  • May require more resources due to its comprehensive nature

Code Comparison

MaterialDesignInXamlToolkit:

<materialDesign:Card Padding="32" Margin="16">
    <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
        My First Material Design App
    </TextBlock>
</materialDesign:Card>

Dragablz:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" IsSelected="True">
        <TextBlock>Hello World</TextBlock>
    </TabItem>
</dragablz:TabablzControl>

Summary

MaterialDesignInXamlToolkit offers a comprehensive Material Design implementation for WPF with a wide range of controls and themes. It has active development and community support but may have a steeper learning curve. Dragablz, on the other hand, focuses specifically on providing advanced tab controls with drag-and-drop functionality. The code comparison shows the different focus areas of each library, with MaterialDesignInXamlToolkit demonstrating a Material Design card and Dragablz showcasing its tab control implementation.

2,598

Modern UI for WPF

Pros of MUI

  • More comprehensive UI toolkit with a wider range of components
  • Follows Material Design principles, offering a modern and consistent look
  • Active development with frequent updates and a large community

Cons of MUI

  • Steeper learning curve due to its extensive feature set
  • Potentially heavier in terms of bundle size compared to Dragablz
  • May require more configuration for custom styling

Code Comparison

MUI (Tab component):

import { Tabs, Tab } from '@mui/material';

<Tabs value={value} onChange={handleChange}>
  <Tab label="Item One" />
  <Tab label="Item Two" />
</Tabs>

Dragablz (TabablzControl):

<dragablz:TabablzControl>
    <TabItem Header="Tab No. 1">
        <TextBlock>I'm in tab 1</TextBlock>
    </TabItem>
    <TabItem Header="Tab No. 2">
        <TextBlock>I'm in tab 2</TextBlock>
    </TabItem>
</dragablz:TabablzControl>

MUI offers a more React-oriented approach with JavaScript/JSX, while Dragablz uses XAML for WPF applications. MUI provides a more flexible and customizable tab system, whereas Dragablz focuses on drag-and-drop functionality for tabs in desktop applications.

All the controls missing in WPF. Over 1 million downloads.

Pros of wpftoolkit

  • Comprehensive set of WPF controls and components
  • Well-documented with extensive samples and tutorials
  • Regular updates and active community support

Cons of wpftoolkit

  • Larger footprint and potential performance overhead
  • Some features require a commercial license
  • Steeper learning curve due to the extensive feature set

Code Comparison

Dragablz (TabControl implementation):

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" IsSelected="True">
        <TextBlock>Hello World</TextBlock>
    </TabItem>
</dragablz:TabablzControl>

wpftoolkit (TabControl implementation):

<xctk:TabControl>
    <xctk:TabItem Header="Tab 1">
        <TextBlock Text="Content for Tab 1" />
    </xctk:TabItem>
    <xctk:TabItem Header="Tab 2">
        <TextBlock Text="Content for Tab 2" />
    </xctk:TabItem>
</xctk:TabControl>

While both libraries offer TabControl implementations, Dragablz focuses on providing a more interactive and customizable tabbing experience, whereas wpftoolkit offers a broader range of controls and functionality beyond just tabbing.

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Pros of MahApps.Metro

  • More comprehensive UI toolkit with a wider range of controls and styles
  • Actively maintained with frequent updates and a large community
  • Extensive documentation and examples available

Cons of MahApps.Metro

  • Larger library size, which may impact application performance
  • Steeper learning curve due to its extensive feature set
  • May require more effort to customize and override default styles

Code Comparison

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                      Title="MahApps.Metro Window"
                      Height="600" Width="800">
    <!-- Window content -->
</Controls:MetroWindow>

Dragablz:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <!-- Tab items -->
</dragablz:TabablzControl>

MahApps.Metro offers a complete Metro-style UI framework, while Dragablz focuses specifically on providing advanced tab control functionality. MahApps.Metro is better suited for full application styling, whereas Dragablz excels in scenarios requiring flexible and customizable tab layouts. The code examples demonstrate the different approaches: MahApps.Metro provides a styled window, while Dragablz showcases its tab control implementation.

Shared Controlz for WPF and ... more

Pros of ControlzEx

  • More actively maintained with recent updates
  • Broader focus on WPF controls and behaviors
  • Larger community and more contributors

Cons of ControlzEx

  • Less specialized for tab control functionality
  • May require more setup for specific draggable tab scenarios
  • Steeper learning curve due to broader feature set

Code Comparison

ControlzEx:

<controls:WindowChrome.WindowChrome>
    <controls:WindowChrome 
        GlassFrameThickness="1"
        CornerRadius="0"
        CaptionHeight="30"/>
</controls:WindowChrome.WindowChrome>

Dragablz:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" />
    <TabItem Header="Tab No. 2" />
</dragablz:TabablzControl>

ControlzEx offers a more general-purpose approach to WPF controls and window chrome customization, while Dragablz focuses specifically on providing a flexible and feature-rich tab control with drag-and-drop functionality. ControlzEx may be better suited for projects requiring a wide range of control enhancements, whereas Dragablz excels in scenarios where advanced tab management is a primary requirement.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Dragablz

Gitter NuGet Build Issues Twitter

Tearable tab control for WPF, which includes docking, tool windows and MDI.

Alt text

Illustrates basic theme, more themes at end of page

Minimal XAML:

XAML as simple as this will give you a tab the tears out (using the basic theme).

<dragablz:TabablzControl Margin="8">
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" IsSelected="True">
        <TextBlock>Hello World</TextBlock>
    </TabItem>
    <TabItem Header="Tab No. 2">
        <TextBlock>We Have Tearable Tabs!</TextBlock>
    </TabItem>
</dragablz:TabablzControl>

Features:

  • Drag and tear tabs
  • User friendly docking
  • Floating tool windows & MDI
  • Supports MVVM
  • IE style transparent Windows
  • Fully style-able, included styles:
  • Chrome style trapzoid tabs
  • Custom (and optional) Window which supports transparency, resizing, snapping, full Window content.
  • Miminal XAML required, but hooks provided for advanced control from client code
  • Single light weight assembly targeting .net 4.* frameworks, no additional dependencies
  • Demos in source (make sure you restore NuGet packages)

Want to say thanks?

  • Hit the :star: Star :star: button
  • Click here to lend your support to: Material Design In XAML Toolkit/Dragablz and make a donation at pledgie.com !

Getting Started:

Here are some helpful blog posts to help you get started:

In the pipeline:

  • Layout persistance and restore
  • Extra themes

Some examples:

Material Design theme (see Material Design in XAML Toolkit):

Alt text

Docking:

Alt text

MDI:

Alt text

MahApps theme:

Alt text