Putting ListBox in ScrollViewer: mouse wheel does not work
see this link for another answer:Scroll in ScrollViewer when mouse over ListBox
Hello, I think you can handle the whole ListBox’s PreviewMouseWheel event. This will also affect individual items as long as you don’t handle each item’s
PreviewMouseWheel and mark the event as handled:
private void ListBox_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta < 0)
{
scrollViewer1.LineDown();
}
else
{
scrollViewer1.LineUp();
}
}
I was dealing with the same issue. I set the ListBox.ItemsPanel Property, without any ScrollViewer:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ListBox>
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<Border>
<ItemsPresenter />
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<\ListBox>
<\ScrollViewer>
Hope this helps.
Firstly, I think you need to elaborate on what your limitations are and what you're trying to achieve. Without that, I can only explain why what you're doing isn't working. Somebody may even have a better idea about how to get the result you're after.
If you put ListBox
inside a ScrollViewer
, then the control template for ListBox
still has its own ScrollViewer
inside. When the mouse cursor is over the ListBox
and you scroll the mousewheel, that event bubbles up until it reaches the ScrollViewer
that's part of ListBox
. That one handles it by scrolling and marks the event as handled, so then the ScrollViewer
you put the ListBox
inside of ignores the event.
If you make the ListBox
taller and narrower than the outer ScrollViewer
, and give it enough items so that the ListBox
itself can scroll the items, you'll see 2 vertical scroll bars: 1 in the ListBox
, and 1 outside the ListBox
for your outer ScrollViewer
. When the mouse cursor is inside the ListBox
, the ListBox
will scroll the items with its internal ScrollViewer
, and its Border
will stay in place. When the mouse cursor is outside the ListBox
and inside the outer ScrollViewer
, that ScrollViewer
will scroll its contents -- the ListBox
-- which you can verify by noting that the ListBox
's Border
changes position.
If you want an outer ScrollViewer
to scroll the entire ListBox
control (including the Border
and not just the items), you'll need to re-style the ListBox
so that it does not have an internal ScrollViewer
, but you'll also need to make sure it automatically gets bigger according to its items.
I don't recommend this approach for a couple reasons. It might make sense if there are other controls inside the ScrollViewer
along with the ListBox
, but your sample does not indicate that. Also, if you're going to have a lot of items in the ListBox
, you'll be creating ListBoxItem
s for every single one, eliminating any advantage that the default, non-re-styled ListBox
gives you due to the default VirtualizingStackPanel
.
Please let us know what your actual requirements are.
Edit: Ok, now I have a little better idea, with the addition of those images. The effect you're getting is that when there are enough items to scroll and the scrollbar appears, the available area has to shrink a bit horizontally because the ScrollViewer
's template uses a Grid
. These seem to be your options, in order of lesser-to-better:
- Re-style the
ListBox
to not have aScrollViewer
and use your re-styledScrollViewer
outside theListBox
. You'd then also have to force theListBox
to also be tall enough to show every item in that sameStyle
, and now you've lost UI virtualization. If you're going to be showing hundreds of items in the list, you definitely don't want to lose that. - Re-style the
ListBox
and set theControlTemplate
to use aScrollViewer
with the style you already created for it that puts the scrollbar over the content rather than in a separate column. This one's ok (ListBox
gets to limit its height and use aVirtualizingStackPanel
, yay), but as you said, it necessitates awareness of that in yourDataTemplate
. - Re-style the
ScrollViewer
to leave space for vertical scrollbar even when it is not visible. Here's what this option looks like:
By default, ScrollViewer
uses 2 columns in a Grid
equivalent to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
So the Width
of the scrollbar's column is 0 when the scrollbar is not visible since Width="Auto"
. To leave space for the scrollbar even when it is hidden, we bind the Width
of that column to the Width
of the vertical scroll bar:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition
Width="{Binding ElementName=PART_VerticalScrollBar, Path=Width}" />
</Grid.ColumnDefinitions>
So now the ControlTemplate
in the custom Style
for ScrollViewer
might look like this:
<ControlTemplate
TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition
Width="{Binding ElementName=PART_VerticalScrollBar, Path=Width}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<ScrollContentPresenter />
<ScrollBar
Grid.Column="1"
Name="PART_VerticalScrollBar"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar
Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Row="1"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
</Grid>
</ControlTemplate>
You could even make the content column a fixed size and the scrollbar column Width="*"
, which might work better in the long run if your image is not stretched. Now the DataTemplate
does not have to compenstate for the width of a scrollbar, as it gets a consistent area to use whether the scrollbar is visible or not.
You'll probably want to check out the rest of the example ControlTemplate
for ScrollViewer
, but those examples are not the default styles. Note that the example puts the vertical scrollbar on the left! Also note the comment at the bottom about ContentScrollPresenter
.