WPF scroll up/down on button click - wpf

Question

I would like to disable vertical scrollbar which is part of the ListBox and i would like to add two buttons, one for "up" and one for "down". How would i implement function to thos buttons to scroll contents of my ListBox up/down.
This is my ListBox:
<ListBox x:Name="artikliList" ItemTemplate="{DynamicResource izabraniIzbornik}" Margin="310,105,395,10" Background="{DynamicResource gridArtikliColor}" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{DynamicResource borderBrushColor}" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0,0,1,0" Style="{DynamicResource ListBoxStyle1}" >
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To=".5"
Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="10"
Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderBrush"
Value="SteelBlue" />
<Setter Property="BorderThickness"
Value="1" />
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="izabraniIzbornik">
<DockPanel Height="182" Width="182">
<DockPanel.Background>
<ImageBrush ImageSource="{Binding sifra, Converter={StaticResource ImageSourceConverter}}"/>
</DockPanel.Background>
<StackPanel VerticalAlignment="Bottom" Height="22" Background="#CC000000">
<Label Content="{Binding naziv}" Foreground="White" FontWeight="Bold" FontSize="12" HorizontalAlignment="Center"/>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>

Answer 1

This can be easily achieved with XAML itself. First you need to create a style and apply it to your scrollbars and listboxes.
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Border x:Name="Rectangle1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="{StaticResource table_bg}" >
<Rectangle RadiusX="10" RadiusY="10" HorizontalAlignment="Center" VerticalAlignment="Center" Height="6" Width="6" Fill="{StaticResource scrolldot_bg}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="Rectangle1" Property="Width" Value="Auto" />
<Setter TargetName="Rectangle1" Property="Height" Value="7" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<Setter Property="Foreground" Value="LightGray" />
<Setter Property="Background" Value="DarkGray" />
<Setter Property="Width" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Border Background="White" Width="15" >
<Grid x:Name="GridRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="0.00001*" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Button Grid.Row="2" Height="15" VerticalAlignment="Bottom" Command="ScrollBar.PageDownCommand"/>
<Button Grid.Row="0" Height="15" VerticalAlignment="Top" Command="ScrollBar.PageUpCommand"/>
<Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true" Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb" Background="LightGray" Style="{DynamicResource ScrollThumbs}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" />
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter TargetName="GridRoot" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="15" />
<Setter TargetName="Thumb" Property="Tag" Value="Horizontal" />
<Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Above style creates scrollbar with to buttons up and down.
I applied this to my own project, so you may need customize it to your own needs!

Answer 2

If you want to scroll at all then you need to retain the scrollviewer in your listbox.
The buttons inside the default template are repeatbuttons rather than buttons. When you click and hold they repeatedly fire click so you can scroll repetedly without wearing your finger and mouse out. I suggest you go with either page scrolling if you really want buttons (as Joey suggested) or item scrolling and repeatbuttons.
The code here looks like it'll work: https://www.codeproject.com/Questions/848015/VB-NET-WPF-Listbox-scroll-by-UP-DOWN-button
In case the link breaks:
double ItemOffset=0;
private void ButtonUp_Click(object sender, RoutedEventArgs e)
{
ScrollViewerTest.ScrollToVerticalOffset(ScrollViewerTest.VerticalOffset - ItemOffset);
}
private void ButtonDown_Click(object sender, RoutedEventArgs e)
{
ScrollViewerTest.ScrollToVerticalOffset(ScrollViewerTest.VerticalOffset + ItemOffset);
}
private void ListBoxTest_Loaded(object sender, RoutedEventArgs e)
{
if (ListBoxTest.Items.Count == 0) return;
if (ItemOffset == 0)
{
((ListBoxItem)ListBoxTest.Items[0]).Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
ItemOffset = ((ListBoxItem)ListBoxTest.Items[0]).DesiredSize.Height;
}
}
You would also want to hide the vertical and horizontal scrollbars.
ScrollViewer.VerticalScrollBarVisibility="Hidden"
That code using the height of each line is a bit fiddly but the alternative has other downsides.
I think you can alternatively issue ScrollBar.LineUpCommand to the scrollbar but that's a routedcommand and they can be very fiddly to get working. I think you'd have to set your command target to the vertical scrollbar inside the listbox.