Skip to main content

TabStrip

Displays a strip of tab headers. You can use this control as a horizontal menu.

TabStrip is composed of TabStripItem children. TabStripItems are displayed in order of appearance and can be created by either: 1. a collection of TabStripItems or 2. generated by ItemsSource.

Unlike TabControl, TabStrip is not responsible for presenting the content of the selected tab. Instead, TabStrip requires you to respond to SelectionChanged events or SelectedItem property changes and then present the desired content with a separate control, such as ContentControl. This gives you full control over the displayed content and enables use cases such as custom view caching.

Example: TabStrip with TabStripItem​

<TabStrip xmlns="https://github.com/avaloniaui" Margin="5">
  <TabStripItem>Tab 1</TabStripItem>
  <TabStripItem>Tab 2</TabStripItem>
</TabStrip>
Preview
Loading Avalonia Preview...

Example: TabStrip with ItemsSource​

<TabStrip ItemsSource="{Binding MyTabs}" SelectedItem="{Binding MySelectedItem}">
    <TabStrip.ItemTemplate>
        <DataTemplate x:DataType="vm:MyViewModel">
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
    </TabStrip.ItemTemplate>
</TabStrip>

Responding to selection changes​

Because TabStrip does not display content for the selected tab, you need to pair it with a separate control such as ContentControl. Bind SelectedIndex (or SelectedItem) to your view model, then swap the displayed content in response to changes.

<DockPanel>
    <TabStrip DockPanel.Dock="Top"
              SelectedIndex="{Binding SelectedIndex}">
        <TabStripItem>Home</TabStripItem>
        <TabStripItem>Settings</TabStripItem>
    </TabStrip>
    <ContentControl Content="{Binding CurrentPage}" />
</DockPanel>
public class MainViewModel : ViewModelBase
{
    private int _selectedIndex;
    private object? _currentPage;

    public int SelectedIndex
    {
        get => _selectedIndex;
        set
        {
            if (_selectedIndex != value)
            {
                _selectedIndex = value;
                OnPropertyChanged();
                UpdateCurrentPage();
            }
        }
    }

    public object? CurrentPage
    {
        get => _currentPage;
        set
        {
            _currentPage = value;
            OnPropertyChanged();
        }
    }

    private void UpdateCurrentPage()
    {
        CurrentPage = SelectedIndex switch
        {
            0 => new HomeViewModel(),
            1 => new SettingsViewModel(),
            _ => null
        };
    }
}

When to use TabStrip vs TabControl​

Use TabStrip when you need custom content switching logic, such as view caching or lazy loading. Because TabStrip does not manage content display, you can control exactly how and when views are created, cached, or disposed.

Use TabControl when you want built-in content display. TabControl handles both the tab headers and the content area, so you do not need to write any content switching logic yourself.

See also​

On this page