[Dragablz] はじめに

Dragablz は、WPFアプリで使用できるドラッグ可能でタブを分離可能にするオープンソースライブラリです。Dragablz を使用することでとても簡単にドッキング可能なWindowsアプリケーションを作成可能です。使用ライセンスは当初「Ms-PL」でしたが、2016年に "MIT Licence" へ変更になったようです。

 

 

 

1. ライブラリを取得する

「Dragablz」 は、以下の方法で取得可能です。

GitGub

下記より入手できます。
https://github.com/ButchersBoy/Dragablz

 

NuGet

下記より入手できます。
https://www.nuget.org/packages/Dragablz/

 

 

2. まずはやってみよう

まずは WPF で TabControl を使ったシンプルなプログラムを作ってみます。
これをリファレンスにして Dragablz を使って少しずつ改造していきます。

 

[評価環境１]

コンパイラ : Visual Studio 2015  
OS : Windows 10 home, バージョン1511（November Update）
ライブラリ : Dragablz, 0.0.3.160

 

[評価環境２]

コンパイラ : Visual Studio 2026, 18.3.0
OS : Windows 11 Home, 25H2
ライブラリ : Dragablz, 0.0.3.234

 

 

ベースとなる WPF アプリの画面です。

MainWindow

 

このソースコード(xaml)です。

["MainWindow.xaml"] 
<Window x:Class="Dragablz.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Dragablz"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TabControl>
            <TabItem Header="Tab No.1">
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Center"/>
                </Grid>
            </TabItem>
            <TabItem Header="Tab No.2">
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="This is No.2 tab." VerticalAlignment="Center"/>
                </Grid>
            </TabItem>
            <TabItem Header="Tab No.3">
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Here we go !" VerticalAlignment="Center"/>
                </Grid>
            </TabItem>
        </TabControl>

    </Grid>
</Window>

 

これを元に Dragablz を適用していきます。

 

 

2-1. Dragablz 入手

最初に NuGet で Dragablz をインストールします。

 

NuGet で Dragablz をインストール
NuGet 画面 (Visual Studio 2026)

 

Dragablz を入手
NuGet 画面 (Visual Studio 2015)

 

 

2-2. タブをドラッグ移動可能にする

ソースコードを以下のように修正します。色のついている３行（6, 11, 27 行目）を修正するだけです。

 

["MainWindow.xaml"]

<Window x:Class="Dragablz_step1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:local="clr-namespace:Dragablz_step1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <dragablz:TabablzControl Margin="10">
            <TabItem Header="Tab No.1">
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Center"/>
                </Grid>
            </TabItem>
            <TabItem Header="Tab No.2">
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="This is No.2 tab." VerticalAlignment="Center"/>
                </Grid>
            </TabItem>
            <TabItem Header="Tab No.3">
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Here we go !" VerticalAlignment="Center"/>
                </Grid>
            </TabItem>
        </dragablz:TabablzControl>

    </Grid>
</Window>

 

上記３行を修正するだけでタブをドラッグ移動可能になりました。

[動画] Dragablz - タブをドラッグで移動

 

すばらしい！

ただし、Visual Studio の XML エディター および Blend 上で <dragablz:TabablzControl> の子要素をマウス操作できなくなる、という課題がありました。
残念ながらそういうものらしく、簡単な解決策を現時点は見つけることができていません。

これについては少しずつ改善策を考えていきたいと思います。XAML を直接編集する、で良ければ全く問題ありません。

 

 

2-3. タブを分離可能にする

今度はタブを掴んでドラッグすることで、ウィンドウを分離できるようにします。

 

タブを分離可能になった様子

 

下記の３行（12-14行目）を追加するだけです。

 

["MainWindow.xaml"] 
<Window x:Class="simpleWindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:local="clr-namespace:simpleWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" ResizeMode="CanResizeWithGrip">
    <Grid>
        <dragablz:TabablzControl Margin="10">
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController />
            </dragablz:TabablzControl.InterTabController>
            <TabItem Header="Tab No.1" Margin="0">
                <Grid Background="#FFE5E5E5">
                    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Top"/>
                </Grid>
            </TabItem>
            <TabItem Header="Tab No.2" Margin="0">
                <Grid Background="#FFE5E5E5">
                    <TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="This is No.2 tab." VerticalAlignment="Top"/>
                </Grid>
            </TabItem>
            <TabItem Header="Tab No.3" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
                <Grid Background="#FFE5E5E5">
                    <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Here we go !" VerticalAlignment="Top"/>
                </Grid>
            </TabItem>
        </dragablz:TabablzControl>

    </Grid>
</Window>

 

[動画] Dragablz - タブを分離・合体

 

３行追加するだけで簡単に分離ウィンドウを作成できるようになりました。すばらしい。

 

 

2-4. ドラッグによるレイアウト変更 を可能にする

続いて、タブ部分をドラッグ操作することで下図のようなレイアウト変更を行えるようにします。

 

レイアウト変更の様子１

 

レイアウト変更の様子３

 

レイアウト変更の様子４

 

ソースコードは以下の通りです。
黄色部分が追加したところです。水色部分はこれまでに既に追加した部分です。

"Partition" として指定しているキーワード（下記例では "Beginning"）は何でもよいようですが、これが一致しているタブのみをレイアウトとして取り込めるようです。

 

["MainWindow.xaml"] 
<Window x:Class="WithDragablz.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:dockablz="clr-namespace:Dragablz.Dockablz;assembly=Dragablz"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:WithDragablz"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.Resources>
        <system:String x:Key="Partition">Beginning</system:String>
    </Window.Resources>
    
    <Grid>
        <dockablz:Layout Partition="{StaticResource Partition}">
            <dragablz:TabablzControl Margin="10" >
                <dragablz:TabablzControl.InterTabController>
                    <dragablz:InterTabController Partition="{StaticResource Partition}"/>
                </dragablz:TabablzControl.InterTabController>
            
                <TabItem x:Name="tabItem01" Header="Tab No.1" Margin="0">
                    <Grid Background="#FFE5E5E5">
                        <TextBlock x:Name="textBlock0" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Top"/>
                    </Grid>
                </TabItem>
                <TabItem x:Name="tabItem02" Header="Tab No.2" Margin="0">
                    <Grid Background="#FFE5E5E5">
                        <TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="This is No.2 tab." VerticalAlignment="Top"/>
                    </Grid>
                </TabItem>
                <TabItem Header="Tab No.3" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
                    <Grid Background="#FFE5E5E5">
                        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Here we go !" VerticalAlignment="Top"/>
                    </Grid>
                </TabItem>
            </dragablz:TabablzControl>
        </dockablz:Layout>
    </Grid>
</Window>

 

[動画] Dragablz - ドラッグによるレイアウト変更

 

こんなに簡単にできてしまいました。恐るべし、Dragablz !!

 

 

3. TablzControl のプロパティ

ConsolidateOrphanedItems

分離したタブを Close した時の挙動を設定するプロパティです。

 

ShowDefaultCloseButton

ShowDefaultAddButton

 

FixedHeaderCount

固定タブ（ドラッグを許さず、またデフォルトの Close ボタンを表示しない）とするタブの数です。
この値は画面左側からのタブの数です。
この値はプログラム動作中に動的に変更可能です。

Allows a the first adjacent tabs to be fixed (no dragging, and default close button will not show).

 

DissallowDragDrop

Issue #18 に記載されているプロパティなのですが、Dragablz Ver. 0.0.3.165 のソース中にコードを確認できません。

 

DissallowDragOut

Issue #18 に記載されているプロパティなのですが、Dragablz Ver. 0.0.3.165 のソース中にコードを確認できません。

 

ItemContainerStyle

 

["MainWindow.xaml"] 
<Window x:Class="WpfApplication.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">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <dragablz:TabablzControl ShowDefaultCloseButton="True"
                             ShowDefaultAddButton="True"
                             ItemContainerStyle="{StaticResource TrapezoidDragableTabItemStyle}"
                             AdjacentHeaderItemOffset="-10">
        <TabItem Header="One">Content One</TabItem>
        <TabItem Header="Two">Content Two</TabItem>
        <TabItem Header="Three">Content Three</TabItem>
    </dragablz:TabablzControl>
</Window>

 

 

ライセンス

本ページの情報は、特記無い限り下記 MIT ライセンスで提供されます。

The MIT License (MIT)

Copyright 2016 Kinoshita Hidetoshi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

 

 

参考

 

 

変更履歴

2026-02-19 - 評価環境として VS2026 を追加
    デモ動画を3本追加
2025-06-09 - Dragablz のライセンスが "MIT Licence" へ変更になっていたことを追記
2022-10-10 - ページデザイン更新
2016-04-16 - 新規作成

 

Programming Items トップページ

プライバシーポリシー