uwp tabview 获取选项卡并将其显示在视图中

Question

如何在 TabView 中获取标签 (TabView.ItemHeaderTemplate)？

我注意到，当我设置值 TabView.SelectedItem 时，只有 TabView.ItemTemplate 被刷新。虽然也选中了tab，但是当tab比较多的时候，用户还是需要手动去寻找tab，也就是tab不在视图中。

如何找到该选项卡并将其显示出来？

这是我的 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，你可以尝试在code-behind中找到它，然后使用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);
}

uwp tabview 获取选项卡并将其显示在视图中

uwp tabview get tab and bring it into view

win-universal-app

uwp