uwp tabview获取标签并将其显示在视图中

Question

如何在TabView.ItemHeaderTemplate中获取标签（TabView）？

我注意到，当我设置值TabView.SelectedItem时，仅TabView.ItemTemplate被刷新。尽管也选择了选项卡，但是当有很多选项卡时，用户仍然需要手动查找选项卡，这意味着该选项卡不会显示。

我如何找到该标签并将其显示？

这是我的TabView，它的定义是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

没有直接方法可以显示该选项卡，如果要实现它，可以找到包含这些选项卡的ScrollViewer，然后使用ChangeView方法滚动它。

基于TabView的style，TabView中有一个ScrollViewer，您可以尝试在代码隐藏中找到它，然后使用ChangeView方法对其进行滚动。另外，当您尝试获取scrollViewer时，您需要在loaded事件中实现它，因为在OnNavigatedTo事件中，控件尚未完全加载。例如：

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);
}