在ScrollViewer中把列表框：鼠标滚轮不工作 [英] Putting ListBox in ScrollViewer: mouse wheel does not work

问题描述

在的ScrollViewer 。

请问的ListBox 莫名其妙地偷这个活动？

Does the ListBox somehow "steal" this event?

<ScrollViewer VerticalScrollBarVisibility="Auto" Style="{StaticResource myStyle}">
<ListBox>
  <ListBoxItem>Test 1</ListBoxItem>
  <ListBoxItem>Test 2</ListBoxItem>
  <ListBoxItem>Test 3</ListBoxItem>
  <ListBoxItem>Test 4</ListBoxItem>
  <ListBoxItem>Test 5</ListBoxItem>
  <ListBoxItem>Test 6</ListBoxItem>
  <ListBoxItem>Test 7</ListBoxItem>
</ListBox>
</ScrollViewer>

编辑：乔尔的要求，加我为什么这个..
我的原因这样做是因为我不喜欢什么 ListBox的内部 的ScrollViewer 与我的布局一样。我有一个背景图像，以及最重要的是一个的ListBox 如下所示：

as requested by Joel, added the reason why I did this.. I did this because I don't like what the ListBox's internal ScrollViewer does with my layout. I have a background image, and on top of that a ListBox as shown here:

现在的滚动条出现时，会发生以下情况：

Now when the scrollbar appears, the following happens:

我创建一个的ScrollViewer 显示滚动条的顶部的 ListBox中的的项目的内容。在的ListBox 项的DataTemplate我为你保留的滚动条出现一定的空间。

I've created a Style for a ScrollViewer that shows the scroll bar on top of the ListBox item's content. In the ListBox item's datatemplate I've reserved some space for the scrollbar to appear.

谢谢，
Robbert大坝

Thanks, Robbert Dam

推荐答案

首先，我认为你需要详细说明你的限制是和你想达到的目标。如果没有，我只能解释为什么你在做什么是行不通的。有人甚至可能有关于如何得到你之后的结果更好的主意。

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.

如果你把的ListBox 在的ScrollViewer ，然后控件模板为的ListBox 还是有自己的的ScrollViewer 里面。当鼠标光标在的ListBox 键，滚动鼠标滚轮，该事件气泡，直到它到达的ScrollViewer 这是的ListBox 的一部分。那一个滚动处理并将其标记，所以后来的的ScrollViewer 你把的ListBox 忽略了内为处理该事件该事件。

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.

如果您在的ListBox 比外高窄的ScrollViewer <在<$ C 1：/ code>，并给它足够的项目，使的ListBox 本身可以滚动的物品，你会看到2垂直滚动条$ C>的ListBox 和1 的ListBox 为您的外外的ScrollViewer 。当鼠标光标是的ListBox 里面，的ListBox 将滚动与项目内部的ScrollViewer ，其边框将留在原地。当鼠标光标是列表框外和内外部的ScrollViewer ，即的ScrollViewer 将滚动的内容 - 对的ListBox - 你可以通过注意验证的ListBox 的边框改变位置。

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.

如果你想要一个外的ScrollViewer 来滚动整个的ListBox 控制（包括边框，而不仅仅是项目），你需要重新风格的ListBox 所以它不会有一个内部的的ScrollViewer ，但你还需要确保它根据其项目自动变大。

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.

我不推荐这种方法的一对夫妇的原因。它可能是有意义的，如果有其他控件中的的ScrollViewer 与的ListBox ，但你的样品一起并不表明。另外，如果你将有很多的的ListBox ，您将创建项目 ListBoxItem的取值对于每一个人，消除了任何优势，默认，非重风格的的ListBox 给你由于默认的 VirtualizingStackPanel 。

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

---

修改确定，现在我有一点点更好的主意，增加这些图像。你得到的效果是，当有足够的项目滚动和出现滚动条，可用面积必须在水平方向收缩了一下，因为的ScrollViewer 的模板使用电网。这似乎是你的选择，在为了小到更好的：

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:



1. 重新风格的ListBox 来没有一个的ScrollViewer 并使用您重新风格的的ScrollViewer 的<$ C $外C>的ListBox 。那么你也必须强制的列表框也可以足够高，以显示在同一风格每一个项目，现在你已经失去了UI虚拟化。如果你将要显示在列表中数百个项目，你的绝对的不想失去的。


2. 重新风格的ListBox 并设置控件模板使用的ScrollViewer 的风格你已经它是把滚动条在内容，而不是在一个单独的列创建。这其中的OK（的ListBox 得到限制其高度，并使用 VirtualizingStackPanel ，耶），但正如你所说，它就必须在这种意识的的DataTemplate 。


3. 重新风格的ScrollViewer 离开垂直滚动条的空间，即使它是不可见的。下面是这个选项如下：

1. Re-style the ListBox to not have a ScrollViewer and use your re-styled ScrollViewer outside the ListBox. You'd then also have to force the ListBox to also be tall enough to show every item in that same Style, 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.
2. Re-style the ListBox and set the ControlTemplate to use a ScrollViewer 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 a VirtualizingStackPanel, yay), but as you said, it necessitates awareness of that in your DataTemplate.
3. Re-style the ScrollViewer to leave space for vertical scrollbar even when it is not visible. Here's what this option looks like:

默认情况下，的ScrollViewer 使用2列在电网等价于：

By default, ScrollViewer uses 2 columns in a Grid equivalent to this:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

所以宽度的滚动条的列0时滚动条是不可见的，因为 WIDTH =自动。为了留出空间为滚动条，即使它是隐藏的，我们绑定该列的的宽度的宽度垂直滚动条：

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>

所以，现在的控件模板在自定义风格为的ScrollViewer 可能是这样的：

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>

您甚至可以使内容列一个固定的大小和滚动条列宽度=*，如果你的图像不拉伸可能更好地工作，从长远来看。现在的DataTemplate 不必compenstate一个滚动条的宽度，因为它得到一致的区域，使用滚动条是否可见或不可见。

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.

您可能会想查看例子其余控件模板为的ScrollViewer ，但这些例子并非默认样式。的请注意，例如把垂直滚动条在左边！还要注意在约 ContentScrollPresenter 底部的评论。的

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.

这篇关于在ScrollViewer中把列表框：鼠标滚轮不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！