使用按钮处理 ListView 中的滚动

Question

我有一个水平的 ListView，我想在其中以不同于通常滚动条的方式处理滚动。

现在当项目溢出时会出现一个滚动条。相反，我想检测到这一点并在每一侧添加按钮来进行滚动，就像浏览器一样。

<ListView Grid.Column="1"
               Name="NavList"
               ItemsSource="{x:Bind TabItems}"
               ScrollViewer.HorizontalScrollBarVisibility="Auto"
               ScrollViewer.HorizontalScrollMode="Enabled" 
               ScrollViewer.VerticalScrollMode="Disabled"
               IsItemClickEnabled="True"
               ItemClick="NavList_OnItemClick"
               ItemContainerStyle="{StaticResource ListViewItemStyleCustom}"
               SizeChanged="NavList_OnSizeChanged">
               <ListView.ItemTemplate>
                   <DataTemplate x:DataType="models:TabNavigationItem">
                       <Grid Height="48" Margin="4,0,4,0">
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="*"/>
                               <ColumnDefinition Width="Auto"/>
                           </Grid.ColumnDefinitions>
                           <TextBlock Grid.Column="0" Height="20" Text="{x:Bind Text}" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"></TextBlock>
                            <Viewbox Grid.Column="1" Width="14" Height="14" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="2,1,0,0" Visibility="{x:Bind Selected, Mode=OneWay}">
                                <Button Width="100" Height="100" Background="{StaticResource Transparent}" VerticalAlignment="Center" Click="TabCloseButton_OnClick" Padding="0,0,0,0" HorizontalContentAlignment="Right">
                                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE711;" FontSize="100" Foreground="{StaticResource Text-Black}"></FontIcon>
                                </Button>
                            </Viewbox>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <controls:WrapPanel HorizontalSpacing="0" Orientation="Horizontal" Height="48"></controls:WrapPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
</ListView>

我的列表视图。它在 "Home" 按钮之后开始并在 "Search" 按钮处结束：

我想要的功能：

有人可以指出我如何实现这一目标的方向吗？

Answer 1

您实际上需要的是 TabView 控件。请查看文档以了解如何使用它。

它是开源的，你可以检查它source code以进一步研究。

使用按钮处理 ListView 中的滚动

Handling scroll in ListView with buttons

c#

uwp

uwp-xaml