How to use ComboBox to show headers in Pivot

Question

Is there a way to use a ComboBox for headers of a Pivot? The way that Pivot headers are laid out is OK, but long titles worsen the UX (User Experience) of the Pivot facility + there's no idea of visually discovering the total number of available items until the user has scrolled within the Pivot. ComboBox allows the user to instantly see all items with less effort and gestures needed.

Answer 1

You can connect the SelectedIndex of the combo box with the one of Pivot:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <ComboBox x:Name="ComboBox" SelectedIndex="0">
        <ComboBox.Items>
            <x:String>First</x:String>
            <x:String>Second</x:String>
            <x:String>Third</x:String>
            <x:String>Fourth</x:String>
        </ComboBox.Items>
    </ComboBox>
    <Pivot Grid.Row="1" SelectedIndex="{x:Bind ComboBox.SelectedIndex, Mode=OneWay}">
        <PivotItem>
            <x:String>First</x:String>
        </PivotItem>
        <PivotItem>
            <x:String>Second</x:String>
        </PivotItem>
        <PivotItem>
            <x:String>Third</x:String>
        </PivotItem>
        <PivotItem>
            <x:String>Fourth</x:String>
        </PivotItem>
    </Pivot>
</Grid>

---

Another possibility without writing a lot of code, with FlipView

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ComboBox x:Name="ComboBox" SelectedIndex="0">
        <ComboBox.Items>
            <x:String>First</x:String>
            <x:String>Second</x:String>
            <x:String>Third</x:String>
            <x:String>Fourth</x:String>
        </ComboBox.Items>
    </ComboBox>
    <FlipView Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
              SelectedIndex="{x:Bind ComboBox.SelectedIndex, Mode=TwoWay}">
        <FlipView.Resources>
            <SolidColorBrush x:Name="FlipViewNextPreviousArrowForeground" />
            <SolidColorBrush x:Name="FlipViewNextPreviousArrowForegroundPointerOver"/>
            <SolidColorBrush x:Name="FlipViewNextPreviousArrowForegroundPressed"/>
            <SolidColorBrush x:Name="FlipViewNextPreviousButtonBackground"/>
            <SolidColorBrush x:Name="FlipViewNextPreviousButtonBackgroundPointerOver"/>
            <SolidColorBrush x:Name="FlipViewNextPreviousButtonBackgroundPressed"/>
        </FlipView.Resources>
        <x:String>First</x:String>
        <x:String>Second</x:String>
        <x:String>Third</x:String>
        <x:String>Fourth</x:String>
    </FlipView>
</Grid>