Reputation: 195

Handling scroll in ListView with buttons

I have a horizontal ListView where I would like to handle the scrolling differently than the usual scrollbar.

Right now a scrollbar appears when the items overflow. Instead I would like to detect this and add buttons on each side to do the scrolling, just as browsers do.

<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>

My ListView. It starts after the "Home"-button and ends at the "Search"-button: