Search code examples
c#wpfxamlexpression-blend

Custom ListView Control


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:

enter image description here

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

Have you another ideas how to create control like this?


Solution

  • 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).