Tabalonia

AvaloniaUIKit.Tabalonia

Tabalonia's draggable TabsControl in the tab bar looks, from the AvaloniaUIKit.Tabalonia package.

ExampleInteractive

Tabalonia — Avalonia UIKit

Live demo unavailable

<tab:TabsControl Name="Tabs" Width="480" HorizontalAlignment="Left"
                 TabItemWidth="140" EnableTabDetaching="False"
                 Loaded="OnLoaded">
  <tab:TabsControl.ItemsSource>
    <local:TabList>
      <tab:DragTabItem Header="Account">
        <TextBlock Text="Make changes to your account here." Margin="0,12" />
      </tab:DragTabItem>
      <tab:DragTabItem Header="Profile">
        <TextBlock Text="Edit your public profile." Margin="0,12" />
      </tab:DragTabItem>
      <tab:DragTabItem Header="Settings">
        <TextBlock Text="Change your preferences." Margin="0,12" />
      </tab:DragTabItem>
    </local:TabList>
  </tab:TabsControl.ItemsSource>
</tab:TabsControl>

Usage

Tabalonia is a tab control whose tabs can be reordered by dragging, closed and added. Its theme is a separate package: add AvaloniaUIKit.Tabalonia and put UIKitTabaloniaTheme after UIKitTheme in the application's styles, instead of Tabalonia's own FluentTheme or CustomTheme (their styles would override it). The package is made for Tabalonia 12.0.0.

App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:uikit="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit"
             xmlns:uikittabs="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit.Tabalonia">
  <Application.Styles>
    <uikit:UIKitTheme />
    <uikittabs:UIKitTabaloniaTheme />
  </Application.Styles>
</Application>

TabsControl takes the looks and sizes of Tabs, as classes on the control:

Class	Effect
`outline`, `pill`, `segmented`, `underline`	The tab bar's look; the default look without one. Pill, segmented and underline show the selection with an indicator that springs to the selected tab and moves with a dragged one.
`xsmall`, `small`, `large`	The size; medium without one.
`menu`	A caret button at the end of the bar that lists the tabs and selects the one picked.
`icon-only`	On a tab whose header is an icon.

Tabalonia lays its tabs out at one width, TabItemWidth; a label that does not fit is cut with an ellipsis. Tabs that do not fit in the bar scroll sideways, and the selected tab is scrolled into view. LeftContent and RightContent are put before and after the tabs, outside the scrolling part.

Tabalonia changes the list in ItemsSource as tabs are added, closed and reordered, so it must be a list it can change, such as an ObservableCollection. ShowDefaultCloseButton (on by default) puts a close button on each tab; ShowDefaultAddButton (on by default) puts an add button after the last tab, which adds what NewItemFactory returns. With EnableTabDetaching (on by default), dragging a tab out of the bar opens it in a new window; turn it off where there are no windows, as in a browser.

Examples

The five looks; the last underline tab is disabled.

VariantsInteractive

Live demo unavailable

<StackPanel Spacing="16" HorizontalAlignment="Left">
  <tab:TabsControl Width="360" HorizontalAlignment="Left" TabItemWidth="104"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="outline" Width="360" HorizontalAlignment="Left" TabItemWidth="104"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="pill" Width="360" HorizontalAlignment="Left" TabItemWidth="104"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="segmented" Width="360" HorizontalAlignment="Left" TabItemWidth="104"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="underline" Width="360" HorizontalAlignment="Left" TabItemWidth="104"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" IsEnabled="False" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
</StackPanel>

The four sizes of a pill bar.

SizesInteractive

Live demo unavailable

<StackPanel Spacing="16" HorizontalAlignment="Left">
  <tab:TabsControl Classes="pill xsmall" Width="360" HorizontalAlignment="Left" TabItemWidth="96"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="pill small" Width="360" HorizontalAlignment="Left" TabItemWidth="104"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="pill" Width="360" HorizontalAlignment="Left" TabItemWidth="112"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="pill large" Width="360" HorizontalAlignment="Left" TabItemWidth="120"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Settings" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
</StackPanel>

LeftContent and RightContent with ghost xsmall icon buttons.

Prefix and suffixInteractive

Live demo unavailable

<tab:TabsControl Width="480" HorizontalAlignment="Left" TabItemWidth="120"
                 EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
  <tab:TabsControl.LeftContent>
    <StackPanel Orientation="Horizontal" Margin="4,0">
      <Button Classes="ghost xsmall icon-only">
        <PathIcon Classes="xsmall" Data="{StaticResource UIKit.Icon.ChevronLeft}" />
      </Button>
      <Button Classes="ghost xsmall icon-only">
        <PathIcon Classes="xsmall" Data="{StaticResource UIKit.Icon.ChevronRight}" />
      </Button>
    </StackPanel>
  </tab:TabsControl.LeftContent>
  <tab:TabsControl.RightContent>
    <StackPanel Orientation="Horizontal" Margin="4,0">
      <Button Classes="ghost xsmall icon-only">
        <PathIcon Classes="xsmall" Data="{StaticResource UIKit.Icon.Inbox}" />
      </Button>
      <Button Classes="ghost xsmall icon-only">
        <PathIcon Classes="xsmall" Data="{StaticResource UIKit.Icon.Ellipsis}" />
      </Button>
    </StackPanel>
  </tab:TabsControl.RightContent>
  <tab:TabsControl.ItemsSource>
    <local:TabList>
      <tab:DragTabItem Header="Account" />
      <tab:DragTabItem Header="Profile" />
      <tab:DragTabItem Header="Settings" />
    </local:TabList>
  </tab:TabsControl.ItemsSource>
</tab:TabsControl>

More tabs than fit: they scroll sideways, and the menu class lists them all.

Scrolling and menuInteractive

Live demo unavailable

<StackPanel Spacing="16" HorizontalAlignment="Left" MinHeight="280">
  <tab:TabsControl Classes="menu" Width="400" HorizontalAlignment="Left" TabItemWidth="110"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Documents" />
        <tab:DragTabItem Header="Mail" />
        <tab:DragTabItem Header="Appearance" />
        <tab:DragTabItem Header="Settings" />
        <tab:DragTabItem Header="About" />
        <tab:DragTabItem Header="License" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
  <tab:TabsControl Classes="segmented menu" Width="400" HorizontalAlignment="Left" TabItemWidth="110"
                   EnableTabDetaching="False" ShowDefaultAddButton="False" ShowDefaultCloseButton="False">
    <tab:TabsControl.ItemsSource>
      <local:TabList>
        <tab:DragTabItem Header="Account" />
        <tab:DragTabItem Header="Profile" />
        <tab:DragTabItem Header="Documents" />
        <tab:DragTabItem Header="Mail" />
        <tab:DragTabItem Header="Appearance" />
        <tab:DragTabItem Header="Settings" />
        <tab:DragTabItem Header="About" />
        <tab:DragTabItem Header="License" />
      </local:TabList>
    </tab:TabsControl.ItemsSource>
  </tab:TabsControl>
</StackPanel>

Tabalonia

#Usage

#Examples

Usage

Examples