使用按钮处理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>

我的ListView。它从“主页”按钮之后开始，到“搜索”按钮结束：

我想要的功能：

有人可以指出我的实现方向吗？

Answer 1

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

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