Question

So, I have been looking for solution more than 12 hours(but without success). How should I change ListView ControlTemplate to get effect like this:

(This question is about this buttons that working like scrollview)

Have you another ideas how to create control like this?

Answer 1

It’s vertical representation, but idea is understood: hide scrollbars and manipulate them manually. For more responsive UI you’ll need to subscribe to MouseDown event instead of Click, also NullReference exceptions are possible on every line of Grid_Click().

XAML:

        <ListView.Template>
            <ControlTemplate>
                <Grid ButtonBase.Click="Grid_Click">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="16"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="16"/>
                    </Grid.RowDefinitions>
                    <Button Content="^" Grid.Row="0"/>
                    <Button Content="v" Grid.Row="2"/>
                    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Hidden">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </ListView.Template>

Code:

    private void Grid_Click(object sender, RoutedEventArgs e) {
        bool down = (e.OriginalSource as Button).Content as string == "v";
        var scroller = VisualTreeHelper.GetChild((e.OriginalSource as Button).Parent, 2) as ScrollViewer;
        scroller.ScrollToVerticalOffset(scroller.VerticalOffset + (down ? 1 : -1));
    }

Magical number 2 in GetChild() is index of ScrollViewer inside its parent (Grid).