How to scroll List View Items on mouse scrolling in WPF?

Question

My List View contains nearly 10 items.I am able to show vertical scroll bar for list view. I am able to scroll the items by clicking on vertical scroll bar.
But What I want is When User placed control over a List View and trying to scroll the Items with Mouse that I am unable to do.
Please help me how can I solve this Issue.
Please give me your valuable Suggestions.

Here I am Adding My List View Code

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

Thanks in advance.

Can you show the example of your code? I've tried to reproduce the problem, but mouse scroll is working by default in my simple example. — nicolas2008
– nicolas2008, Commented Feb 11, 2016 at 15:13
I have Added My Code please check it once @nicolay.anykienko — Sagar
– Sagar, Commented Feb 12, 2016 at 5:25
Sorry @nicolay.anykienko I have tried your solution But its not worked for me. But I found solution and its working fine for me .Same thing I have posted If its possible please have a look into it. Thank you so much for your suggestions — Sagar
– Sagar, Commented Feb 12, 2016 at 12:01

nicolas2008 · Accepted Answer · 2016-02-12 10:48:13Z

The main problem with your XAML code is that MouseWheel event is handled by each inner ListView inside main ScrollViewer.
It's correct behavior in case when inner ListViews have theirs inner scrollbars (to prevent double scrolling - scrolling of inner scrollbar and scrolling of outer scrollbar).
As scrolling is not intended in inner ListViews, you can just assign special non scrollable Template for each inner ListView as presented in the following example:

Define the template for ListView in resources:

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

Then use it for each ListView inside the main ScrollViewier:

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

safi · Accepted Answer · 2016-02-12 09:35:39Z

0

you should change DragOver event for the ListView as follows:

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;
}

edited Feb 12, 2016 at 9:35

answered Feb 11, 2016 at 14:37

safi

8896 silver badges18 bronze badges

6 Comments

Sagar Over a year ago

Thank you @safi for your Reply ... event is not firing when I am scrolling on List View ... I want to scroll vertically i.e Up and Down only

Sagar Over a year ago

Sorry I have multiple List Views with in Scroll viewer plz look in to my code once @safi

safi Over a year ago

@sagar do you mean that you want to scroll via mouse wheel while drag and drop?

Sagar Over a year ago

Yes @safi ... here i am using nearly 5 listviews with in stack panel ... is that way is correct?

Sagar Over a year ago

Thank you so much for your suggestions ... I Have found solution and its working fine for me .Same thing I have posted If its possible please have a look into it. Once again Thank you @safi

|

Sagar · Accepted Answer · 2016-02-12 12:00:12Z

After trying with many example I have found the solution and its working fine for me. What I observed is Inside Stack Panel scroll is not working but in Grid its working and instead of taking multiple list views I have Used only single List View. Thank you all for giving your valuable suggestions.

Here I am placing My working Code ... Once again Thank you guys for your suggestions.

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

Aska · Accepted Answer · 2018-05-31 13:40:59Z

0

ListView in ScrollViewer did not work for me, it helped to remove the ScrollViewer and set the scrollviewer.verticalscrollbarvisibility = true property of the ListView

answered May 31, 2018 at 13:40

Aska

1

Collectives™ on Stack Overflow

How to scroll List View Items on mouse scrolling in WPF?

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related