avalonia-controls-navigation

Avalonia Navigation Controls

Overview

Navigation controls let users move between views or trigger application commands. All menu controls support Command binding and keyboard shortcuts via InputGesture.

---

TabControl

Displays content in tabbed panels. Tabs can be static (inline TabItem) or dynamic (bound ItemsSource).

Property	Type	Notes
SelectedIndex	int	TwoWay
SelectedItem	object	TwoWay
TabStripPlacement	Dock	Top (default), Bottom, Left, Right
ItemsSource	IEnumerable	For dynamic tabs
ItemTemplate	DataTemplate	Header template for dynamic tabs
ContentTemplate	DataTemplate	Body template for dynamic tabs

TabItem properties:

Property	Notes
Header	Tab label (string or XAML)
Content	Tab body
IsEnabled	Disables individual tab
IsSelected	Set programmatically

<!-- Static tabs -->
<TabControl SelectedIndex="{Binding ActiveTabIndex}" TabStripPlacement="Top">
    <TabItem Header="Dashboard">
        <views:DashboardView/>
    </TabItem>
    <TabItem Header="Reports">
        <views:ReportsView/>
    </TabItem>
    <TabItem Header="Settings" IsEnabled="{Binding IsAdmin}">
        <views:SettingsView/>
    </TabItem>
</TabControl>

<!-- Custom tab header with icon -->
<TabControl>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal" Spacing="6">
                <PathIcon Data="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"
                          Width="14" Height="14"/>
                <TextBlock Text="Dashboard" VerticalAlignment="Center"/>
            </StackPanel>
        </TabItem.Header>
        <views:DashboardView/>
    </TabItem>
</TabControl>

Dynamic tabs (ViewModel-driven):

<TabControl ItemsSource="{Binding Tabs}"
            SelectedItem="{Binding ActiveTab}">
    <TabControl.ItemTemplate>
        <!-- Header template -->
        <DataTemplate x:DataType="vm:TabVm">
            <StackPanel Orientation="Horizontal" Spacing="6">
                <TextBlock Text="{Binding Title}" VerticalAlignment="Center"/>
                <Button Content="✕"
                        Command="{Binding $parent[TabControl].DataContext.CloseTabCommand}"
                        CommandParameter="{Binding}"
                        Padding="4,0" FontSize="10"/>
            </StackPanel>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <!-- Body template -->
        <DataTemplate x:DataType="vm:TabVm">
            <ContentControl Content="{Binding Content}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>