### Install Tabalonia NuGet Package Source: https://github.com/egorozh/tabalonia/blob/develop/README.md Install the Tabalonia library using the NuGet Package Manager Console or the dotnet CLI. ```powershell Install-Package Tabalonia # Or 'dotnet add package Tabalonia' ``` -------------------------------- ### Async Tab Creation with NewItemAsyncFactory Source: https://context7.com/egorozh/tabalonia/llms.txt Use NewItemAsyncFactory when new tab data needs to be fetched asynchronously. It takes precedence over NewItemFactory. ```xml ``` ```csharp // ViewModel public Func> NewItemAsyncFactory => async () => { // Simulate async data loading await Task.Delay(300); return new TabViewModel { Header = $"Async Tab {TabItems.Count + 1}", Content = "Loaded asynchronously" }; }; ``` -------------------------------- ### Add Tabalonia NuGet Package Source: https://context7.com/egorozh/tabalonia/llms.txt Use the .NET CLI or Package Manager Console to add the Tabalonia NuGet package to your project. ```powershell # .NET CLI dotnet add package Tabalonia # Package Manager Console Install-Package Tabalonia ``` -------------------------------- ### Using FluentTheme in Application Styles Source: https://context7.com/egorozh/tabalonia/llms.txt Integrates Tabalonia's FluentTheme with Avalonia's built-in FluentTheme. Ensure the correct namespace and assembly are referenced. ```xml ``` -------------------------------- ### TabsControl.NewItemAsyncFactory Source: https://context7.com/egorozh/tabalonia/llms.txt Allows asynchronous creation of new tabs. This factory takes precedence over NewItemFactory when both are provided. ```APIDOC ## TabsControl.NewItemAsyncFactory — Asynchronous Tab Creation `NewItemAsyncFactory` is a `Func>?` property for scenarios where new-tab data must be fetched asynchronously (e.g., from a database or API). It takes priority over `NewItemFactory` when both are set. ```xml ``` ```csharp // ViewModel public Func> NewItemAsyncFactory => async () => { // Simulate async data loading await Task.Delay(300); return new TabViewModel { Header = $"Async Tab {TabItems.Count + 1}", Content = "Loaded asynchronously" }; }; ``` ``` -------------------------------- ### TabsControl.NewItemFactory for Tab Creation Source: https://context7.com/egorozh/tabalonia/llms.txt Assign a Func to NewItemFactory to enable the default add button. This factory is called when the '+' button is clicked, and the new tab is automatically selected. ```xml ``` ```csharp // ViewModel public Func NewItemFactory => () => new TabViewModel { Header = $"New Tab {TabItems.Count + 1}", Content = "Hello from a new tab!" }; ``` -------------------------------- ### Using CustomTheme with Brush Overrides Source: https://context7.com/egorozh/tabalonia/llms.txt Applies CustomTheme and overrides individual brushes using StyleInclude for specific customizations. This allows for fine-grained control over the theme's appearance. ```xml ``` -------------------------------- ### Add Tabalonia FluentTheme to App.axaml Source: https://github.com/egorozh/tabalonia/blob/develop/README.md Include the FluentTheme from Tabalonia in your App.axaml file to apply the library's styling. Ensure the necessary namespace is declared. ```xml xmlns:themes="clr-namespace:Tabalonia.Themes.Custom;assembly=Tabalonia" ... ... ... ``` -------------------------------- ### Access Default Drag Thumb Width Constants in C# Source: https://context7.com/egorozh/tabalonia/llms.txt Reference the static constants provided for default `LeftThumbWidth` and `RightThumbWidth` values across different operating systems (Windows, Linux, macOS). ```csharp // Constants available for reference double leftDefault = TabsControl.WindowsAndLinuxDefaultLeftThumbWidth; // 4 double leftMac = TabsControl.MacOsDefaultLeftThumbWidth; // 80 double rightWindows = TabsControl.WindowsDefaultRightThumbWidth; // 160 double rightMac = TabsControl.MacOsDefaultRightThumbWidth; // 50 ``` -------------------------------- ### Dynamically Toggle Built-in Buttons in C# Source: https://context7.com/egorozh/tabalonia/llms.txt Control the visibility of the default add and close buttons programmatically by setting the `ShowDefaultAddButton` and `ShowDefaultCloseButton` properties to `false`. ```csharp // Dynamically toggle buttons tabsControl.ShowDefaultAddButton = false; tabsControl.ShowDefaultCloseButton = false; ``` -------------------------------- ### Register Tabalonia Fluent Theme Source: https://context7.com/egorozh/tabalonia/llms.txt Register the Tabalonia Fluent theme in your App.axaml file to apply the library's styling. ```xml ``` -------------------------------- ### Register Tabalonia Custom Theme Source: https://context7.com/egorozh/tabalonia/llms.txt Alternatively, register the built-in Tabalonia CustomTheme in your App.axaml file. ```xml ``` -------------------------------- ### Configure Window Drag Zones with ThumbWidth in XAML Source: https://context7.com/egorozh/tabalonia/llms.txt Adjust `LeftThumbWidth` and `RightThumbWidth` to control the pixel width of the invisible drag areas on the sides of the tab strip. This is used for dragging the host window and defaults are platform-aware. ```xml ``` -------------------------------- ### Basic TabsControl Usage in Avalonia Source: https://context7.com/egorozh/tabalonia/llms.txt Use TabsControl with ItemsSource and ItemTemplate/ContentTemplate bindings for drag-and-drop reordering. Ensure your ViewModel implements INotifyPropertyChanged or uses a similar mechanism for collection changes. ```xml ``` ```csharp // MainViewModel.cs using System.Collections.ObjectModel; using CommunityToolkit.Mvvm.ComponentModel; public class TabViewModel { public string Header { get; set; } = ""; public string Content { get; set; } = ""; } public class MainViewModel : ObservableObject { private int _counter; public ObservableCollection TabItems { get; } = new(); public Func NewItemFactory => CreateTab; public MainViewModel() { TabItems.Add(new TabViewModel { Header = "Tab 1", Content = "Content 1" }); TabItems.Add(new TabViewModel { Header = "Tab 2", Content = "Content 2" }); } private object CreateTab() => new TabViewModel { Header = $"Tab {++_counter}", Content = $"Content {_counter}" }; } ``` -------------------------------- ### TabsControl.TabItemWidth and AdjacentHeaderItemOffset Source: https://context7.com/egorozh/tabalonia/llms.txt Controls the sizing and spacing of tab headers. TabItemWidth sets the maximum width, while AdjacentHeaderItemOffset adjusts the gap or overlap between headers. ```APIDOC ## TabsControl.TabItemWidth / AdjacentHeaderItemOffset — Tab Sizing `TabItemWidth` (default `140`) sets the maximum width of each tab header. Tabs shrink proportionally when there is not enough space. `AdjacentHeaderItemOffset` (default `0`) adds a horizontal gap (positive) or overlap (negative) between adjacent tab headers. ```xml ``` ```csharp // Code-behind or ViewModel myTabsControl.TabItemWidth = 180; myTabsControl.AdjacentHeaderItemOffset = -6; // 6px overlap ``` ``` -------------------------------- ### TabsControl.FixedHeaderCount Source: https://context7.com/egorozh/tabalonia/llms.txt Pins the first N tabs, making them non-draggable, non-reorderable, and non-closable by default. Ideal for permanent tabs like 'Home'. ```APIDOC ## TabsControl.FixedHeaderCount — Pinned (Non-Draggable) Tabs `FixedHeaderCount` (type `int`, default `0`) pins the first N tabs. Fixed tabs cannot be dragged, reordered, or closed by the built-in close button. This is ideal for a permanent "Home" or "Overview" tab. ```xml ``` ```csharp // The first item added to the collection becomes the fixed/pinned tab TabItems.Add(new TabViewModel { Header = "Home", Content = "Welcome screen" }); // pinned TabItems.Add(new TabViewModel { Header = "Document 1", Content = "..." }); // draggable TabItems.Add(new TabViewModel { Header = "Document 2", Content = "..." }); // draggable ``` ``` -------------------------------- ### Implement TabsControl in Avalonia Source: https://github.com/egorozh/tabalonia/blob/develop/README.md Use the TabsControl to display draggable tabs. Bind ItemsSource to your data and configure NewItemFactory and FixedHeaderCount. Define custom DataTemplates for tab items and their content. ```xml xmlns:controls="clr-namespace:Tabalonia.Controls;assembly=Tabalonia" ... ``` -------------------------------- ### Custom Toolbar with Tabalonia Commands in XAML Source: https://context7.com/egorozh/tabalonia/llms.txt Bind custom toolbar buttons to Tabalonia's built-in `AddItemCommand` and `CloseItemCommand`. This allows for custom UI elements that perform the same actions as the default buttons. ```xml