如何在 WPF 中滚动鼠标滚动时滚动列表视图项？答案

【问题标题】：How to scroll List View Items on mouse scrolling in WPF?如何在 WPF 中滚动鼠标滚动时滚动列表视图项？
【发布时间】：2016-02-11 13:53:08
【问题描述】：

我的 列表视图 包含近 10 个项目。我能够显示 垂直滚动 栏用于列表视图。我可以通过单击垂直滚动条来滚动项目。
但我想要的是当用户控制列表视图并尝试滚动项目时 用鼠标我无法做到。
请帮助我如何解决这个问题。
请给我您宝贵的建议。

我在这里添加我的列表视图代码

<Border BorderThickness="0.5" CornerRadius="2" BorderBrush="Gray" Width="1250" Height="730" Margin="0,5,0,0">
                <StackPanel Name="spStore" Visibility="Hidden" Background="AliceBlue">
                    <Label Content="{DynamicResource keyStore Management}" HorizontalAlignment="Center" FontSize="20" FontWeight="Bold" Foreground="DarkTurquoise"/>
                    <!--Scroll view to display list of items-->
                    <ScrollViewer VerticalScrollBarVisibility="Auto" Height="690" Visibility="Visible">
                        <StackPanel Orientation="Vertical">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Label Content="{DynamicResource keySTOCK MANAGEMENT}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left" Grid.Row="0"></Label>
                                <ListView Margin="0" Background="White" BorderThickness="0" Grid.Row="1" ScrollViewer.CanContentScroll="True" Name="lvstock" PreviewMouseWheel="lvstock_PreviewMouseWheel">
                                    <ListViewItem  MouseLeftButtonUp="StockDetails_Click" Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/Critical.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyView Stocks}" ></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                    <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="StockVerificationDetails_Click" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/StockVerification.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyVerify Stocks}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                    <ListViewItem  Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="VerifiedStockDetails_Click" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/StockVerification.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyVerified Stock Report}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                </ListView>
                                <Label Content="{DynamicResource keyGOODS TRANSFER}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left" Grid.Row="2"></Label>
                                <ListView Margin="0" Background="White" BorderThickness="0" Grid.Row="3">
                                    <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="StockReceipt_Click" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/GoodsReceipts.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyStock Receipt}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                    <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="StockIssue_Click" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/GoodsIssue.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyStock Issue}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                    <ListViewItem  Background="AliceBlue" BorderBrush="Gray" Name="GoodsReturn" BorderThickness="0.5,0.5,0.5,0" MouseLeftButtonUp="GoodsReturn_MouseLeftButtonUp" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/shipment_icon.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyGoodsReturn}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                </ListView>
                                <Label Content="{DynamicResource keyGOODS PROCUREMENT}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left" Grid.Row="4"></Label>
                                <ListView Margin="0" Background="White" BorderThickness="0" Grid.Row="5">
                                    <ListViewItem  Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/PO.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyPurchases}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>

                                    <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="ProcurementReceipt_Click" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/GoodsReceipts.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyReceipts}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                </ListView>
                                <Label Content="{DynamicResource keyDELIVERIES}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left" Grid.Row="6"></Label>
                                <ListView Margin="0" Background="White" BorderThickness="0" Grid.Row="7">
                                    <ListViewItem Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/NewOrder.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyOrders}"></TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                    <ListViewItem Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="Images/shipment_icon.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                            <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyShipments}">Shipments</TextBlock>
                                        </StackPanel>
                                    </ListViewItem>
                                </ListView>
                            </Grid>
                        </StackPanel>
                    </ScrollViewer>
                </StackPanel>
            </Border>

提前致谢。

【问题讨论】：

你能展示你的代码示例吗？我试图重现该问题，但在我的简单示例中默认情况下鼠标滚动是有效的。
我已经添加了我的代码，请检查一次@nicolay.anykienko
对不起@nicolay.anykienko 我已经尝试过你的解决方案，但它对我不起作用。但是我找到了解决方案并且它对我来说工作正常。我已经发布了同样的东西如果可能的话，请看看它。非常感谢您的建议

标签： wpf xaml listview

【解决方案1】：

XAML 代码的主要问题是 MouseWheel 事件由主 ScrollViewer 内的每个内部 ListView 处理。
如果内部 ListViews 有其内部滚动条（以防止双重滚动 - 内部滚动条的滚动和外部滚动条的滚动），这是正确的行为。
由于内部 ListView 不打算滚动，因此您可以为每个内部 ListView 分配特殊的不可滚动模板，如下例所示：

在资源中定义ListView的模板：

<Window.Resources>
    <ControlTemplate x:Key="NonScrollableListView" TargetType="ListView">
        <ItemsPresenter/>
    </ControlTemplate>
</Window.Resources>

然后将它用于主 ScrollViewier 内的每个 ListView：

<ScrollViewer>
    <StackPanel Orientation="Vertical">
        <Grid>
            <Grid.RowDefinitions>
                <!--...-->
            </Grid.RowDefinitions>

            <!--...-->
            <ListView Template="{StaticResource NonScrollableListView}" Margin="0" Background="White" BorderThickness="0" Grid.Row="1" Name="lvstock">
                <!--...-->
            </ListView>
            <!--...-->
            <ListView Template="{StaticResource NonScrollableListView}" Margin="0" Background="White" BorderThickness="0" Grid.Row="3">
                <!--...-->
            </ListView>
            <!--...-->
            <ListView Template="{StaticResource NonScrollableListView}" Margin="0" Background="White" BorderThickness="0" Grid.Row="5">
                <!--...-->
            </ListView>
        </Grid>
    </StackPanel>
</ScrollViewer>

【讨论】：

【解决方案2】：

您应该为ListView 更改DragOver 事件，如下所示：

private void ListView_DragOver(object sender, System.Windows.DragEventArgs e)
{
    var lv = sender as ListView;
    ScrollViewer sv = FindVisualChild<ScrollViewer>(lv);

    double tolerance = 10;
    double verticalPos = e.GetPosition(lv).Y;
    double offset = 3;

    if (verticalPos < tolerance)
    {
        sv.ScrollToVerticalOffset(sv.VerticalOffset - offset);
    }
    else if (verticalPos > lv.ActualHeight - tolerance)
    {
        sv.ScrollToVerticalOffset(sv.VerticalOffset + offset);
    }
}

public static childItem FindVisualChild<childItem>(DependencyObject obj) where childItem : DependencyObject
{
    // Search immediate children first (breadth-first)
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
    {
        DependencyObject child = VisualTreeHelper.GetChild(obj, i);

        if (child != null && child is childItem)
            return (childItem)child;

        else
        {
            childItem childOfChild = FindVisualChild<childItem>(child);

            if (childOfChild != null)
                return childOfChild;
        }
    }

    return null;
}

【讨论】：

感谢@safi 的回复...当我在列表视图上滚动时，事件没有触发...我想垂直滚动，即仅向上和向下
抱歉，我在滚动查看器中有多个列表视图，请查看我的代码一次 @safi
@sagar 你的意思是你想在拖放时通过鼠标滚轮滚动吗？
是的@safi ...我在堆栈面板中使用了近5个列表视图...这种方式正确吗？
非常感谢您的建议......我已经找到了解决方案并且它对我来说工作正常。我已经发布了同样的东西如果可能的话请看看它。再次感谢@safi

【解决方案3】：

在尝试了许多示例后，我找到了解决方案，并且对我来说效果很好。我观察到的是内部堆栈面板滚动不起作用，但在网格中它的工作，而不是采用多个列表视图，我只使用了 单个列表视图。感谢大家提出宝贵的建议。

我在这里放置我的工作代码......再次感谢你们的建议。

 <Grid Name="spStore" Visibility="Hidden" Background="AliceBlue">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Label Content="{DynamicResource keyStore Management}" HorizontalAlignment="Center" FontSize="20" FontWeight="Bold" Grid.Row="0" Foreground="DarkTurquoise"/>
                        <ListView Margin="0" Background="White" BorderThickness="0" Grid.Row="1"  Name="lvstock">
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{DynamicResource keySTOCK MANAGEMENT}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left"></Label>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  MouseLeftButtonUp="StockDetails_Click" Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/Critical.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyView Stocks}" ></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="StockVerificationDetails_Click" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/StockVerification.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyVerify Stocks}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="VerifiedStockDetails_Click" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/StockVerification.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyVerified Stock Report}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{DynamicResource keyGOODS TRANSFER}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left"></Label>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="StockReceipt_Click" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/GoodsReceipts.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyStock Receipt}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="StockIssue_Click" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/GoodsIssue.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyStock Issue}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" Name="GoodsReturn" BorderThickness="0.5,0.5,0.5,0" MouseLeftButtonUp="GoodsReturn_MouseLeftButtonUp" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/shipment_icon.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyGoodsReturn}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{DynamicResource keyGOODS PROCUREMENT}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left"></Label>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/PO.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyPurchases}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem Background="AliceBlue" BorderBrush="Gray" MouseLeftButtonUp="ProcurementReceipt_Click" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/GoodsReceipts.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyReceipts}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem  Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{DynamicResource keyDELIVERIES}" Foreground="DarkTurquoise" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left"></Label>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/NewOrder.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyOrders}"></TextBlock>
                                </StackPanel>
                            </ListViewItem>
                            <ListViewItem Background="AliceBlue" BorderBrush="Gray" BorderThickness="0.5,0.5,0.5,0.5" Cursor="Hand">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Images/shipment_icon.png" Margin="0,0,5,0" Height="80" Width="80"  />
                                    <TextBlock VerticalAlignment="Center" FontWeight="Bold" FontSize="15" Text="{DynamicResource keyShipments}">Shipments</TextBlock>
                                </StackPanel>
                            </ListViewItem>
                        </ListView>
                    </Grid>

【讨论】：

【解决方案4】：

ScrollViewer 中的 ListView 对我不起作用，它有助于删除 ScrollViewer 并设置 ListView 的 scrollviewer.verticalscrollbarvisibility = true 属性

【讨论】：