Navigation Controls

Navigation controls help users move between different views and sections of your application.

TabControl

Organizes content into multiple tabs.

Properties

Items: Collection of TabItem elements
SelectedIndex: Index of selected tab (int)
SelectedItem: Currently selected TabItem
SelectedContent: Content of selected tab
TabStripPlacement: Position of tabs - Top, Bottom, Left, Right
ContentTemplate: Template for tab content

Events

SelectionChanged: Raised when selected tab changes

Example

XAML
C#

<!-- Basic TabControl -->
<TabControl>
  <TabItem Header="Home">
    <TextBlock Text="Home content" />
  </TabItem>
  <TabItem Header="Settings">
    <TextBlock Text="Settings content" />
  </TabItem>
  <TabItem Header="About">
    <TextBlock Text="About content" />
  </TabItem>
</TabControl>

<!-- TabControl with icons -->
<TabControl>
  <TabItem>
    <TabItem.Header>
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource HomeIcon}" />
        <TextBlock Text="Home" />
      </StackPanel>
    </TabItem.Header>
    <StackPanel>
      <TextBlock Text="Welcome to the home page" FontSize="20" />
      <TextBlock Text="This is the main dashboard" Margin="0,10" />
    </StackPanel>
  </TabItem>
  
  <TabItem>
    <TabItem.Header>
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource SettingsIcon}" />
        <TextBlock Text="Settings" />
      </StackPanel>
    </TabItem.Header>
    <StackPanel>
      <TextBlock Text="Application Settings" FontSize="20" />
    </StackPanel>
  </TabItem>
</TabControl>

<!-- Data-bound TabControl -->
<TabControl ItemsSource="{Binding Tabs}" SelectedIndex="{Binding SelectedTabIndex}">
  <TabControl.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Title}" />
    </DataTemplate>
  </TabControl.ItemTemplate>
  <TabControl.ContentTemplate>
    <DataTemplate>
      <ContentControl Content="{Binding Content}" />
    </DataTemplate>
  </TabControl.ContentTemplate>
</TabControl>

<!-- TabControl with tabs on left -->
<TabControl TabStripPlacement="Left">
  <TabItem Header="Tab 1" />
  <TabItem Header="Tab 2" />
  <TabItem Header="Tab 3" />
</TabControl>

// Create TabControl programmatically
var tabControl = new TabControl();

// Add tabs
var homeTab = new TabItem
{
    Header = "Home",
    Content = new TextBlock { Text = "Home content" }
};

var settingsTab = new TabItem
{
    Header = "Settings",
    Content = new TextBlock { Text = "Settings content" }
};

tabControl.Items.Add(homeTab);
tabControl.Items.Add(settingsTab);

// Handle selection change
tabControl.SelectionChanged += (sender, e) =>
{
    var selected = tabControl.SelectedIndex;
    Debug.WriteLine($"Selected tab: {selected}");
};

Styling Tabs

<Window.Styles>
  <Style Selector="TabItem">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Padding" Value="12,8" />
  </Style>
  
  <Style Selector="TabItem:selected">
    <Setter Property="FontWeight" Value="Bold" />
  </Style>
</Window.Styles>

Provides a menu system for commands and options.

Example

XAML
C#

<Menu>
  <MenuItem Header="File">
    <MenuItem Header="New" HotKey="Ctrl+N" />
    <MenuItem Header="Open" HotKey="Ctrl+O" />
    <MenuItem Header="Save" HotKey="Ctrl+S" />
    <Separator />
    <MenuItem Header="Exit" />
  </MenuItem>
  
  <MenuItem Header="Edit">
    <MenuItem Header="Undo" HotKey="Ctrl+Z" />
    <MenuItem Header="Redo" HotKey="Ctrl+Y" />
    <Separator />
    <MenuItem Header="Cut" HotKey="Ctrl+X" />
    <MenuItem Header="Copy" HotKey="Ctrl+C" />
    <MenuItem Header="Paste" HotKey="Ctrl+V" />
  </MenuItem>
  
  <MenuItem Header="View">
    <MenuItem Header="Zoom In" HotKey="Ctrl+Plus" />
    <MenuItem Header="Zoom Out" HotKey="Ctrl+Minus" />
    <MenuItem Header="Reset Zoom" HotKey="Ctrl+0" />
  </MenuItem>
  
  <MenuItem Header="Help">
    <MenuItem Header="Documentation" />
    <MenuItem Header="About" />
  </MenuItem>
</Menu>

<!-- Menu with icons -->
<Menu>
  <MenuItem Header="File">
    <MenuItem Header="New">
      <MenuItem.Icon>
        <PathIcon Data="{StaticResource NewIcon}" />
      </MenuItem.Icon>
    </MenuItem>
    <MenuItem Header="Open">
      <MenuItem.Icon>
        <PathIcon Data="{StaticResource OpenIcon}" />
      </MenuItem.Icon>
    </MenuItem>
  </MenuItem>
</Menu>

<!-- Menu with checkable items -->
<Menu>
  <MenuItem Header="View">
    <MenuItem Header="Show Toolbar" 
              IsCheckable="True" 
              IsChecked="{Binding IsToolbarVisible}" />
    <MenuItem Header="Show Status Bar" 
              IsCheckable="True" 
              IsChecked="{Binding IsStatusBarVisible}" />
  </MenuItem>
</Menu>

<!-- Data-bound menu -->
<Menu ItemsSource="{Binding MenuItems}">
  <Menu.ItemContainerStyle>
    <Style Selector="MenuItem">
      <Setter Property="Header" Value="{Binding Header}" />
      <Setter Property="Command" Value="{Binding Command}" />
      <Setter Property="ItemsSource" Value="{Binding Children}" />
    </Style>
  </Menu.ItemContainerStyle>
</Menu>

var menu = new Menu();

var fileMenu = new MenuItem { Header = "File" };
fileMenu.Items.Add(new MenuItem 
{ 
    Header = "New",
    HotKey = new KeyGesture(Key.N, KeyModifiers.Control)
});
fileMenu.Items.Add(new MenuItem 
{ 
    Header = "Open",
    HotKey = new KeyGesture(Key.O, KeyModifiers.Control)
});

menu.Items.Add(fileMenu);

<Border Background="LightGray" Padding="50">
  <Border.ContextMenu>
    <ContextMenu>
      <MenuItem Header="Cut" />
      <MenuItem Header="Copy" />
      <MenuItem Header="Paste" />
      <Separator />
      <MenuItem Header="Delete" />
    </ContextMenu>
  </Border.ContextMenu>
  <TextBlock Text="Right-click me" />
</Border>

TreeView

Displays hierarchical data in a tree structure.

Properties

Items: Root level items
SelectedItem: Currently selected item
AutoScrollToSelectedItem: Scroll to selected item (bool)

Events

SelectionChanged: Raised when selection changes

Example

XAML
C#

<!-- Simple TreeView -->
<TreeView>
  <TreeViewItem Header="Root 1">
    <TreeViewItem Header="Child 1.1" />
    <TreeViewItem Header="Child 1.2">
      <TreeViewItem Header="Grandchild 1.2.1" />
      <TreeViewItem Header="Grandchild 1.2.2" />
    </TreeViewItem>
  </TreeViewItem>
  
  <TreeViewItem Header="Root 2">
    <TreeViewItem Header="Child 2.1" />
    <TreeViewItem Header="Child 2.2" />
  </TreeViewItem>
</TreeView>

<!-- Data-bound TreeView -->
<TreeView ItemsSource="{Binding RootNodes}">
  <TreeView.ItemTemplate>
    <TreeDataTemplate ItemsSource="{Binding Children}">
      <TextBlock Text="{Binding Name}" />
    </TreeDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

<!-- TreeView with icons -->
<TreeView>
  <TreeViewItem>
    <TreeViewItem.Header>
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource FolderIcon}" />
        <TextBlock Text="Documents" />
      </StackPanel>
    </TreeViewItem.Header>
    <TreeViewItem>
      <TreeViewItem.Header>
        <StackPanel Orientation="Horizontal" Spacing="8">
          <PathIcon Data="{StaticResource FileIcon}" />
          <TextBlock Text="File1.txt" />
        </StackPanel>
      </TreeViewItem.Header>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

var treeView = new TreeView();

var root = new TreeViewItem { Header = "Root" };
var child1 = new TreeViewItem { Header = "Child 1" };
var child2 = new TreeViewItem { Header = "Child 2" };

root.Items.Add(child1);
root.Items.Add(child2);
treeView.Items.Add(root);

// Handle selection
treeView.SelectionChanged += (sender, e) =>
{
    var selected = treeView.SelectedItem;
    Debug.WriteLine($"Selected: {selected}");
};

ListBox

Displays a list of items.

Properties

Items: Collection of items
SelectedItem: Selected item
SelectedItems: Multiple selected items
SelectionMode: Selection mode - Single, Multiple, Toggle, AlwaysSelected
VirtualizationMode: Virtualization mode for performance

Example

<!-- Simple ListBox -->
<ListBox>
  <ListBoxItem Content="Item 1" />
  <ListBoxItem Content="Item 2" />
  <ListBoxItem Content="Item 3" />
</ListBox>

<!-- Data-bound ListBox -->
<ListBox ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" Spacing="10">
        <Image Source="{Binding Icon}" Width="32" Height="32" />
        <StackPanel>
          <TextBlock Text="{Binding Name}" FontWeight="Bold" />
          <TextBlock Text="{Binding Description}" FontSize="10" />
        </StackPanel>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

<!-- Multi-select ListBox -->
<ListBox SelectionMode="Multiple" ItemsSource="{Binding Options}" />

Carousel

Displays items in a carousel that can be scrolled.

<Carousel ItemsSource="{Binding Images}" SelectedIndex="{Binding CurrentIndex}">
  <Carousel.ItemTemplate>
    <DataTemplate>
      <Image Source="{Binding}" Stretch="Uniform" />
    </DataTemplate>
  </Carousel.ItemTemplate>
</Carousel>

Expander

A control with a header that can expand/collapse content.

<Expander Header="Click to expand" IsExpanded="True">
  <StackPanel Margin="20,10">
    <TextBlock Text="This content can be expanded or collapsed" />
    <TextBlock Text="More content here..." />
  </StackPanel>
</Expander>

SplitView

Provides a container with two views: a collapsible pane and a content area.

<SplitView IsPaneOpen="{Binding IsMenuOpen}" 
           DisplayMode="Inline"
           OpenPaneLength="200">
  <SplitView.Pane>
    <StackPanel>
      <Button Content="Home" />
      <Button Content="Settings" />
      <Button Content="About" />
    </StackPanel>
  </SplitView.Pane>
  
  <SplitView.Content>
    <TextBlock Text="Main content area" />
  </SplitView.Content>
</SplitView>

Best Practices

Use TabControl for related content - Good for settings, wizards, or multiple views
Keep menu hierarchies shallow - Avoid deeply nested menu items
Use TreeView for hierarchical data - File systems, categories, organizational charts
Implement lazy loading - Load tree/list items on demand for large datasets
Use virtualization - Enable for lists with many items
Provide keyboard navigation - Arrow keys, Tab, Enter for accessibility

Virtualization

For large datasets, use virtualization to improve performance:

<ListBox ItemsSource="{Binding LargeDataset}" VirtualizationMode="Simple">
  <!-- Content -->
</ListBox>

<TreeView ItemsSource="{Binding HierarchicalData}" 
          VirtualizationMode="Simple">
  <!-- Content -->
</TreeView>

Master-Detail

<Grid ColumnDefinitions="250,*">
  <ListBox Grid.Column="0" ItemsSource="{Binding Items}" 
           SelectedItem="{Binding SelectedItem}" />
  <ContentControl Grid.Column="1" Content="{Binding SelectedItem}" />
</Grid>

<TabControl SelectedIndex="{Binding CurrentViewIndex}">
  <TabItem Header="Dashboard">
    <views:DashboardView />
  </TabItem>
  <TabItem Header="Reports">
    <views:ReportsView />
  </TabItem>
  <TabItem Header="Settings">
    <views:SettingsView />
  </TabItem>
</TabControl>

Get Started

Core Concepts

Controls

Platform Support

Advanced Topics

Guides

TabControl

Properties

Events

Example

Styling Tabs

Menu

Example

Context Menu

TreeView

Properties

Events

Example

ListBox

Properties

Example

Carousel

Expander

SplitView

Best Practices

Virtualization

Navigation Patterns

Master-Detail

Tab Navigation

See Also

Build docs developers (and LLMs) love

Get Started

Core Concepts

Controls

Platform Support

Advanced Topics

Guides

​TabControl

​Properties

​Events

​Example

​Styling Tabs

​Menu

​Example

​Context Menu

​TreeView

​Properties

​Events

​Example

​ListBox

​Properties

​Example

​Carousel

​Expander

​SplitView

​Best Practices

​Virtualization

​Navigation Patterns

​Master-Detail

​Tab Navigation

​See Also

Build docs developers (and LLMs) love

TabControl

Properties

Events

Example

Styling Tabs

Menu

Example

Context Menu

TreeView

Properties

Events

Example

ListBox

Properties

Example

Carousel

Expander

SplitView

Best Practices

Virtualization

Navigation Patterns

Master-Detail

Tab Navigation

See Also