none
Scrolling listview with mouse wheel

    Question

  • Hi,

    I have a listview (nested) which have a vertical scrollviewer visible when number of rows went out of bound.

    Mouse wheel works when the mouse is at the scrollviewer. However, nothing scrolls with the mouse wheel when mouse is on the listview itself.

    Am I missing any settings?

    Hope someone can enlighten me.

    Thank you!

    Edit: I realised if within the listview, only the outer column (parent of the nested listview) will scroll with mouse wheel
    Monday, August 17, 2009 6:59 AM

Answers

  • Hi,

    I have solved my problem by handling the previewmousewheel event.

    Private Sub ControlPreviewMouseWheel(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseWheelEventArgs)
                Dim direction As Integer = 0
                Dim border As Decorator = VisualTreeHelper.GetChild(sender, 0)
                Dim scroll As ScrollViewer = border.Child
                Dim bounds As Rect = VisualTreeHelper.GetDescendantBounds(sender)
                Dim mousePos As Point = WPF.JoshSmith.Controls.Utilities.MouseUtilities.GetMousePosition(sender)
                If bounds.Contains(mousePos) = True Then
                    If e.Delta > 50 Then
                        direction = 1
                    End If
                    If e.Delta < -50 Then
                        direction = 2
                    End If
                End If

                If scroll.ComputedVerticalScrollBarVisibility = Windows.Visibility.Visible Then
                    If direction = 2 Then
                        scroll.ScrollToVerticalOffset(scroll.ContentVerticalOffset + 1.0)
                    Else
                        If direction = 1 Then
                            scroll.ScrollToVerticalOffset(scroll.ContentVerticalOffset - 1.0)
                        End If
                    End If
                End If
            End Sub

    Hope this will help someone with nested listview too.

    • Marked as answer by masuda0916 Wednesday, August 19, 2009 9:14 AM
    Wednesday, August 19, 2009 9:13 AM

All replies

  • Hi,

    How do you set up the ListView? Could you show us the XAML code of the ListView?



    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    Send us any feedback you have about the help from MSFT at fbmsdn@microsoft.com .
    Monday, August 17, 2009 5:21 PM
  • Hi,

    Thank you for your response.
    Here is how the listview is like.

    <ListView ItemsSource="{Binding}" AllowDrop="False" Background="Black" Foreground="White" Height="723" HorizontalContentAlignment="Center" ItemContainerStyle="{StaticResource ListViewGlowItemContainer}" Margin="5,0,3,136" Name="MainListView" PreviewDragOver="DragOver" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.IsDeferredScrollingEnabled="False" ScrollViewer.ScrollChanged="MainListViewScrollChanged" SelectionChanged="SelectionChanged" SelectionMode="Extended" VerticalAlignment="Bottom">
                    <ListView.View>
                        <GridView>
                            <GridView.ColumnHeaderContainerStyle>
                                <Style TargetType="GridViewColumnHeader">
                                    <Setter Property="Visibility" Value="Hidden" />
                                    <Setter Property="Height" Value="0" />
                                </Style>
                            </GridView.ColumnHeaderContainerStyle>
                            <GridViewColumn CellTemplate="{StaticResource GetPersonInfo}" Width="100" />
                            <GridViewColumn CellTemplate="{StaticResource GetMoreInfo}" Width="1150" />
                        </GridView>
                    </ListView.View>
                </ListView>
    
    
            <DataTemplate x:Key="GetPersonInfo">
                <StackPanel Orientation="Vertical" >
                    <TextBlock Text="{Binding Path=ID}" TextWrapping="Wrap" FontSize="12"></TextBlock>
                    <TextBlock Text="{Binding Path=Name}" TextWrapping="Wrap" FontSize="12" ></TextBlock>
                </StackPanel>
            </DataTemplate>
    
    
     <DataTemplate x:Key="FormatMoreInfo">
                <StackPanel Orientation="Vertical" Margin="0">
                    <TextBlock Text="{Binding Path=DateStr}" TextWrapping="Wrap" FontSize="12" ></TextBlock>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="ID:" FontSize="12"></TextBlock>
                        <TextBlock Text="{Binding Path=ID}" TextWrapping="Wrap" FontSize="12" ></TextBlock>
                    </StackPanel>
                 </StackPanel>
            </DataTemplate>
    
    
            <DataTemplate x:Key="FormatInnerInfo">
                <StackPanel Width="auto" Background="Black" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock Text="{Binding Path=test}" TextWrapping="Wrap" FontSize="12"></TextBlock>
                    <TextBlock Text="{Binding Path=test1}" TextWrapping="Wrap" FontSize="12" ></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="No. of Images: " FontSize="10"></TextBlock>
                        <TextBlock Text="{Binding ImageCollection.Count}" TextWrapping="Wrap" FontSize="10"></TextBlock>
                    </StackPanel>
                </StackPanel>
    
            </DataTemplate>
    
            <DataTemplate x:Key="GetImages">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="0,0,0,0">
                    <Button Name="MostFrontButton" FontSize="10" Click="MovetoMostFront" Width="20" Background="Black" Foreground="White" BorderBrush="White" HorizontalAlignment="Left">
                    </Button>
                    <Button Name="MoveFrontButton" FontSize="10" DragOver="FrontButtonDragOver" Click="MoveFront" Width="20" Background="Black" Foreground="White" BorderBrush="White" HorizontalAlignment="Left"></Button>
                    <ListBox VirtualizingStackPanel.IsVirtualizing ="true"  Loaded="ImageBoxLoaded" PreviewDragLeave="DoPreviewDragLeave" PreviewDragEnter="ListBoxPreviewDragEnter" PreviewDragOver="ListBoxPreviewDragOver" PreviewMouseLeftButtonDown="ListBoxPreviewMouseLeftButtonDown" Drop="ListBoxDrop" MouseLeftButtonUp=" ListBoxMouseLeftButtonUp" Style="{StaticResource HorizontalListBox}" ItemsSource="{Binding Path=ImageCollection}" Height="100" Width="610" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"  Margin="0,0,0,0" Background="Black" Name="ImageListBox" SelectionMode="Extended" ItemContainerStyle="{StaticResource RedGlowItemContainer}" AllowDrop="True" BorderBrush="Transparent"   HorizontalContentAlignment="Center"  VerticalContentAlignment="Stretch">
    
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical" Height="88" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                    <TextBlock HorizontalAlignment="right" Height="12" Text="{Binding Path=ImageID}" Background="Black" Foreground="White" FontSize="10" TextWrapping="Wrap" ></TextBlock>
                                    <Image Name="ShowImg" Source="{Binding Path=GetImage}" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Height="64" Width="64" VerticalAlignment="Center">
    
                                    </Image>
    
                                    <TextBlock HorizontalAlignment="Center" Height="12" Text="{Binding Path=MyText}" Background="Black" Foreground="White" FontSize="10" TextWrapping="Wrap"></TextBlock>                           
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" Background="Black" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
    
                    </ListBox>
                    <Button Name="MoveBackButton" DragOver="BackButtonDragOver"  Click="MoveBack" Width="20" Background="Black" Foreground="White" BorderBrush="White" FontSize="10" HorizontalAlignment="Right">
                        </Button>
    
                    <Button Name="MostBackButton" FontSize="10" Click="MovetoMostBack" Width="20" Background="Black" Foreground="White" BorderBrush="White" HorizontalAlignment="Right">
                    </Button>
                </StackPanel>
            </DataTemplate>
    
            <DataTemplate x:Key="GetInnerInfo">
                <ListView Loaded="AddSaveStateHandler" PreviewDragEnter="ListViewPreviewDragEnter" PreviewDragLeave="DoPreviewDragLeave" PreviewDragOver="ListViewPreviewDragOver" PreviewMouseLeftButtonDown="ListViewPreviewMouseLeftButtonDown" DragOver="ListViewDragOver" Drop="ListViewDrop" MouseLeftButtonUp="ListViewMouseLeftButtonUp" ItemsSource="{Binding Path=InnerCollection}" Foreground="White" Background="Black" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Name="SeriesListView" ItemContainerStyle="{StaticResource ListViewGlowItemContainer}" AllowDrop="True">
                    <ListView.View>
                        <GridView>
                            <GridView.ColumnHeaderContainerStyle>
                                <Style TargetType="GridViewColumnHeader">
                                    <Setter Property="Visibility" Value="Hidden" />
                                    <Setter Property="Height" Value="0" />
                                </Style>
                            </GridView.ColumnHeaderContainerStyle>
                            <GridViewColumn Width="100" CellTemplate="{StaticResource FormatInnerInfo}"></GridViewColumn>
                            <GridViewColumn Width="950" CellTemplate="{StaticResource GetImages}"></GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>
            </DataTemplate>
    
            <DataTemplate x:Key="GetMoreInfo">
                <ListView Loaded="AddSaveStateHandler" Name="MoreListView" ItemsSource="{Binding Path=MoreCollection}" PreviewDragEnter="ListViewPreviewDragEnter" PreviewDragLeave="DoPreviewDragLeave" PreviewDragOver="ListViewPreviewDragOver" PreviewMouseLeftButtonDown="ListViewPreviewMouseLeftButtonDown" DragOver="ListViewDragOver" Drop="ListViewDrop" MouseLeftButtonUp="ListViewMouseLeftButtonUp" Foreground="White" Background="Black" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled " ItemContainerStyle="{StaticResource ListViewGlowItemContainer}" AllowDrop="True">
                    <ListView.View>
                        <GridView>
                            <GridView.ColumnHeaderContainerStyle>
                                <Style TargetType="GridViewColumnHeader">
                                    <Setter Property="Visibility" Value="Hidden" />
                                    <Setter Property="Height" Value="0" />
                                </Style>
                            </GridView.ColumnHeaderContainerStyle>
                            <GridViewColumn Width="100" CellTemplate="{StaticResource FormatMoreInfo}"></GridViewColumn>
                            <GridViewColumn Width="1050" CellTemplate="{StaticResource GetInnerInfo}"></GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>
            </DataTemplate>
    

    Hope to hear from you again.
    Tuesday, August 18, 2009 12:25 AM
  • I would ask, what are you doing in the ScrollChanged Event?  Could we see the code?

    ScrollViewer.ScrollChanged="MainListViewScrollChanged"
     
    Tuesday, August 18, 2009 2:01 AM
  • Hi,

    Thank you for your response.

    In MainListViewScrollChanged, I am just checking is the scrollbar of the listview visible or not.

    I am changing the width of my ImageListBox according to the visibility. i.e., if scrollbar is visible, I would decrease the width of the ImageListBox.
    Tuesday, August 18, 2009 2:09 AM
  • Hi Masuda,

    It's hard to find out the problem without a complete sample, could you send a sample to me that reproduce the problem? My email is v-zhye@microsoft.com

    Best Regards,
    Zhi-Xin


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    Send us any feedback you have about the help from MSFT at fbmsdn@microsoft.com.
    Tuesday, August 18, 2009 6:02 AM
  • Hi,

    Thank you for you response.

    The program is linked with another program from where it collects data from. I'm afraid it is a bit inconvenient for me to send the whole program.

    I think the main problem for this scrolling issue is that, when the mouse is over the nested area, the mousewheel event might not be handled properly by the parent list. Not sure about it.
    Tuesday, August 18, 2009 6:10 AM
  • Hi,

    I have solved my problem by handling the previewmousewheel event.

    Private Sub ControlPreviewMouseWheel(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseWheelEventArgs)
                Dim direction As Integer = 0
                Dim border As Decorator = VisualTreeHelper.GetChild(sender, 0)
                Dim scroll As ScrollViewer = border.Child
                Dim bounds As Rect = VisualTreeHelper.GetDescendantBounds(sender)
                Dim mousePos As Point = WPF.JoshSmith.Controls.Utilities.MouseUtilities.GetMousePosition(sender)
                If bounds.Contains(mousePos) = True Then
                    If e.Delta > 50 Then
                        direction = 1
                    End If
                    If e.Delta < -50 Then
                        direction = 2
                    End If
                End If

                If scroll.ComputedVerticalScrollBarVisibility = Windows.Visibility.Visible Then
                    If direction = 2 Then
                        scroll.ScrollToVerticalOffset(scroll.ContentVerticalOffset + 1.0)
                    Else
                        If direction = 1 Then
                            scroll.ScrollToVerticalOffset(scroll.ContentVerticalOffset - 1.0)
                        End If
                    End If
                End If
            End Sub

    Hope this will help someone with nested listview too.

    • Marked as answer by masuda0916 Wednesday, August 19, 2009 9:14 AM
    Wednesday, August 19, 2009 9:13 AM