Pivot Control

The Pivot control provides a way to navigate through different content sections using a set of tabs. It's commonly used to organize information into distinct categories, making it easier for users to find what they're looking for.

Key Features

• Tabbed Navigation: Allows users to switch between different content views by clicking on header items.
• Customizable Headers: Each pivot item can have its own header, which can contain text, icons, or custom UIElements.
• Content Area: A dedicated area displays the content associated with the currently selected pivot item.
• Accessibility: Designed with accessibility in mind, ensuring users with assistive technologies can navigate effectively.

When to Use the Pivot Control

Use the Pivot control when:

• You need to present related but distinct sets of information that can be viewed one at a time.
• You want to provide a clear and intuitive navigation mechanism for different sections of your application.
• Examples include user profile settings, product details with different aspects, or multi-step forms.

Basic Usage (XAML)

Here's a simple example of how to implement a Pivot control in XAML:

<Pivot>
    <PivotItem Header="Overview">
        <TextBlock Text="This is the overview content." FontSize="20"/>
    </PivotItem>
    <PivotItem Header="Details">
        <StackPanel>
            <TextBlock Text="Details about the item:" Margin="0,10,0,0"/>
            <ListView ItemsSource="{x:Bind DetailItems}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Padding="5"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
    </PivotItem>
    <PivotItem Header="Settings">
        <TextBlock Text="Configuration options go here." FontSize="20"/>
    </PivotItem>
</Pivot>
                

Properties

PivotItem

Each pivot section is represented by a PivotItem:

• Header: The content displayed in the tab. This can be a simple string, an icon, or a complex UI element.
• Content: The UIElement that will be displayed when this PivotItem is selected.

Common Scenarios

With Icons in Headers

You can add icons to your pivot headers for a more visual experience:

<Pivot>
    <PivotItem Header="Home">
        <PivotItem.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <SymbolIcon Symbol="Home" />
                    <TextBlock Text="{Binding}" Margin="8,0,0,0"/>
                </StackPanel>
            </DataTemplate>
        </PivotItem.HeaderTemplate>
        <!-- Home Content -->
    </PivotItem>
    <PivotItem Header="Search">
        <PivotItem.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <SymbolIcon Symbol="Find" />
                    <TextBlock Text="{Binding}" Margin="8,0,0,0"/>
                </StackPanel>
            </DataTemplate>
        </PivotItem.HeaderTemplate>
        <!-- Search Content -->
    </PivotItem>
</Pivot>
                

Dynamic Content Loading

You might want to load content for a PivotItem only when it becomes visible to improve performance. This can be achieved by using events or binding to properties that conditionally render content.

Accessibility Considerations

The Pivot control inherently provides keyboard navigation (Tab to navigate headers, Arrow keys to switch between them). Ensure that the content within each PivotItem is also accessible and clearly labeled.

Related Topics

• TabView Control (for scenarios requiring more compact tab navigation)
• CommandBar Control (for action-oriented navigation)
• XAML Overview