uwp tabview get tab and bring it into view

Question

How do I get a Tab (TabView.ItemHeaderTemplate) in the TabView?

I notice that, when I set the value TabView.SelectedItem, only the TabView.ItemTemplate is refreshed. Although the tab is also selected, when there are a lot tabs, user will still need to find the tab manually, meaning that the tab is not brought into view.

How can I find the that tab and bring it into view?

This is my TabView and it is defined here:

<controls:TabView
    x:Name="PlaylistTabView"
    x:DefaultBindMode="TwoWay"
    AllowDrop="True"
    CanCloseTabs="False"
    CanDragItems="True"
    CanReorderItems="True"
    DragItemsCompleted="PlaylistTabView_DragItemsCompleted"
    IsCloseButtonOverlay="False"
    SelectionChanged="PlaylistTabView_SelectionChanged"
    SelectionMode="Single"
    Style="{ThemeResource PlaylistTabViewStyle}"
    TabClosing="PlaylistTabView_TabClosing"
    TabNavigation="Cycle"
    TabWidthBehavior="Actual">
    <controls:TabView.ItemHeaderTemplate>
        <DataTemplate x:DataType="data:Playlist">
            <StackPanel
                Background="Transparent"
                Orientation="Horizontal"
                ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
                <StackPanel.ContextFlyout>
                    <MenuFlyout>
                        <MenuFlyoutItem
                            x:Uid="RenameItem"
                            Click="RenameClick"
                            Icon="Rename"
                            Text="Rename PlayList" />
                        <MenuFlyoutItem
                            x:Uid="DuplicateItem"
                            Click="DuplicateClick"
                            Icon="Copy"
                            Text="Duplicate PlayList" />
                        <MenuFlyoutItem
                            x:Uid="DeleteItem"
                            Click="DeleteClick"
                            Icon="Delete"
                            Text="Delete PlayList" />
                    </MenuFlyout>
                </StackPanel.ContextFlyout>
                <SymbolIcon Symbol="Audio" />
                <TextBlock
                    x:Name="NameTextBlock"
                    Margin="10,0,5,0"
                    Text="{x:Bind Name, Mode=OneWay}" />
            </StackPanel>
        </DataTemplate>
    </controls:TabView.ItemHeaderTemplate>
    <controls:TabView.ItemTemplate>
        <DataTemplate x:DataType="data:Playlist">
            <local:HeaderedPlaylistControl
                AllowClear="True"
                IsPlaylist="True"
                Loaded="HeaderedPlaylistControl_Loaded"
                Removable="True" />
        </DataTemplate>
    </controls:TabView.ItemTemplate>

    <controls:TabView.TabStartHeader>
        <Button
            x:Name="NewPlaylistButton"
            x:Uid="NewPlaylistButton"
            Width="{StaticResource HeaderButtonWidth}"
            Height="{StaticResource NavigationViewButtonWidth}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Background="Transparent"
            BorderThickness="0"
            Click="NewPlaylistButton_Click"
            Content="&#xE710;"
            FontFamily="Segoe MDL2 Assets"
            FontSize="16"
            Style="{ThemeResource ButtonRevealStyle}"
            ToolTipService.ToolTip="Create New Playlist" />
    </controls:TabView.TabStartHeader>

    <controls:TabView.TabEndHeader>
        <Button
            x:Name="EditPlaylistButton"
            x:Uid="EditPlaylistButton"
            Width="{StaticResource HeaderButtonWidth}"
            Height="{StaticResource NavigationViewButtonWidth}"
            VerticalAlignment="Stretch"
            Background="Transparent"
            BorderThickness="0"
            Click="EditPlaylistButton_Click"
            Content="&#xE70F;"
            FontFamily="Segoe MDL2 Assets"
            FontSize="16"
            Style="{ThemeResource ButtonRevealStyle}" />
    </controls:TabView.TabEndHeader>
</controls:TabView>

Answer 1

There is no direct method can bring the tab into view, if you want to achieve it, you can find the ScrollViewer which contains those tabs and then use ChangeView method to scroll it.

Based on the style of TabView, there is a ScrollViewer in TabView, you can try to find it in code-behind and then use ChangeView method to scroll it. In addition, when you try to get the scrollViewer, you need to implement it in loaded event, since in the OnNavigatedTo event, the control has not been loaded completely. For example:

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    EditPlaylistButton.SetToolTip("Edit Playlists");

    //find the scrollViewer and then sunscribe the Loaded event.
    scrollViewer.Loaded += scrollViewer_Loaded;
}

private void scrollViewer_Loaded(object sender, RoutedEventArgs e)
{
    ScrollViewer scrollViewer = sender as ScrollViewer;
    double singleW = scrollViewer.ActualWidth / PlaylistTabView.Items.Count;
    scrollViewer.ChangeView(singleW * PlaylistTabView.SelectedIndex, null, null, false);
}