Tabalonia

Tabalonia

Draggable tab items on Avalonia here!

This is a port of the Draggablz

Features

• Drag tabs to reorder them within the strip (with animations)
• Tear a tab off into its own floating window — just drag it out of the strip
• Drag a tab over another window's strip to dock it there, Chrome-style: the tab attaches while you hold the button, keeps following the pointer, and detaches again if you drag it away
• Built-in add / close tab buttons
• Pin the first N tabs (FixedHeaderCount) so they can't be dragged or closed
• Custom content on both sides of the strip (LeftContent / RightContent)
• Two shipped themes (Custom with light/dark variants, Fluent), fully restylable via brush resources
• AOT-compatible, no reflection

Getting Started

Install the library as a NuGet package:

Install-Package Tabalonia
# Or 'dotnet add package Tabalonia'

Add a theme to your App.axaml:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:custom="clr-namespace:Tabalonia.Themes.Custom;assembly=Tabalonia">
    <Application.Styles>
        <FluentTheme />
        <custom:CustomTheme />
    </Application.Styles>
</Application>

Or use the Fluent-styled variant instead of the custom one:

xmlns:fluent="clr-namespace:Tabalonia.Themes.Fluent;assembly=Tabalonia"
...
<fluent:FluentTheme />

Then use TabsControl like a regular TabControl:

<Window xmlns:controls="clr-namespace:Tabalonia.Controls;assembly=Tabalonia">

    <controls:TabsControl ItemsSource="{Binding TabItems}"
                          NewItemFactory="{Binding NewItemFactory}"
                          FixedHeaderCount="1">
        <TabControl.ItemTemplate>
            <DataTemplate DataType="vm:TabItemViewModel">
                <TextBlock Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>

        <TabControl.ContentTemplate>
            <DataTemplate DataType="vm:TabItemViewModel">
                <TextBlock Text="{Binding SimpleContent}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </controls:TabsControl>

</Window>

ItemsSource must implement IList (e.g. ObservableCollection<T>) — adding, closing, reordering and dragging tabs between windows mutate the collection directly.

API Reference

TabsControl inherits Avalonia's TabControl, so everything you know (ItemsSource, SelectedItem, ItemTemplate, ContentTemplate, …) works as usual. The additions:

Tab strip appearance

Adding and closing tabs

tabs.TabClosing += (_, e) =>
{
    if (e.Item is DocumentViewModel { IsDirty: true })
        e.Cancel = true; // keep the tab open
};

tabs.TabClosed += (_, e) => Console.WriteLine($"Closed: {e.Item}");

// Keep the window open when the last tab is closed (default closes it):
tabs.LastTabClosedAction = (_, e) => { /* e.Window stays open */ };

Tearing off and docking tabs

The detached window's TabsControl inherits the source control's settings (templates, factories, events, Margin, thumb widths, …), so torn-off tabs behave exactly like the original ones — including docking back.

tabsControl.DetachedWindowFactory = tabs => new MyToolWindow { Content = tabs };

Window drag thumbs

The empty areas to the left and right of the tabs act as window-drag handles (double-click restores/maximizes the window) — useful with ExtendClientAreaToDecorationsHint="True" for Chrome-like windows:

Styling

The custom theme supports light and dark variants out of the box and follows Application.RequestedThemeVariant. All colors are exposed as brush resources (TabItemBackgroundBrush, SelectedTabItemBackgroundBrush, TabControlWindowActiveBackgroundBrush, CloseItemButtonForeground, …) — override them in your App.axaml to restyle the control without retemplating:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="SelectedTabItemBackgroundBrush" Color="#1E1E2E" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

The full list of resource keys lives in Themes/Custom/Brushes.axaml.

Building from source

git clone https://github.com/egorozh/Tabalonia.git
cd Tabalonia
dotnet build Tabalonia.sln
dotnet test Tabalonia.Tests/Tabalonia.Tests.csproj
dotnet run --project Tabalonia.Demo

See CONTRIBUTING.md for the contribution workflow and CHANGELOG.md for release history.