WPF ListView inside ListView not scrolling when mouse over the inner ListView

Question

I have a ListView inside a ListView and when the mouse is over the inner ListView, the outer ListView stops scrolling.
The scroll works when the mouse is over the items in the outer ListView and when the mouse is over the scroll bar.

XAML:

<Window x:Class="ListViewInsideListViewNoteScrolling.CheckForUpdatesView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckForUpdatesView" Height="300" Width="500">
    <Grid>
        <ListView Grid.Row="0" Margin="20 10" BorderThickness="0" BorderBrush="Transparent"
                          HorizontalAlignment="Stretch" 
                          ScrollViewer.VerticalScrollBarVisibility="Auto" 
                          ScrollViewer.CanContentScroll="False"
                          ItemsSource="{Binding VersionsDetails}" 
                          ItemContainerStyle="{StaticResource CheckForUpdatesListView}">
            <ListView.ItemTemplate>
                <DataTemplate>

                    <Grid Width="400">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" FontWeight="Bold">
                                        <Run Text="Version "/> <Run Text="{Binding Number}"/>
                        </TextBlock>
                        <TextBlock Grid.Row="1" Text="{Binding Description}" TextWrapping="Wrap"/>
                        <ListView Grid.Row="2" Margin="10 0 0 0" BorderThickness="0" BorderBrush="Transparent"
                                          ItemsSource="{Binding Details}"
                                          ItemContainerStyle="{StaticResource CheckForUpdatesListView}">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <BulletDecorator Margin="4">
                                        <BulletDecorator.Bullet>
                                            <Ellipse Height="5" Width="5" Fill="Black"/>
                                        </BulletDecorator.Bullet>
                                        <TextBlock TextWrapping="Wrap" Text="{Binding}" Width="350"></TextBlock>
                                    </BulletDecorator>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <!--<TextBlock Grid.Row="3" Text="{Binding Details, Converter={StaticResource ListToTextConverter}}" TextWrapping="Wrap"/>-->
                    </Grid>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

Style:

  <Style x:Key="CheckForUpdatesListView" TargetType="ListViewItem">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border" Padding="0" BorderThickness="0" SnapsToDevicePixels="true" Background="Transparent">
                        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="Transparent"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

VersionsDetails is a List<VersionInfo>

public class VersionInfo
{
    public string Number { get; set; }
    public string Description { get; set; }
    public List<string> Details { get; set; }
}

One possible solution is, instead of the inner ListView, to use this line

<TextBlock Grid.Row="3" Text="{Binding Details, Converter={StaticResource ListToTextConverter}}" TextWrapping="Wrap"/>

which will convert my list into a bulleted string, but the styling is better with the ListView. I am also open to suggestions for using other Wpf controls/elements to solve this issue.

Ouarzy Ouarzy · Accepted Answer · 2016-03-01T10:53:55

A nice solution would be to create a behavior to ignore mouse wheel.

1> Import System.Windows.Interactivity

2> Create the behavior:

 public sealed class IgnoreMouseWheelBehavior : Behavior<UIElement>
    {
        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.PreviewMouseWheel += AssociatedObjectPreviewMouseWheel;
        }

        protected override void OnDetaching()
        {
            AssociatedObject.PreviewMouseWheel -= AssociatedObjectPreviewMouseWheel;
            base.OnDetaching();
        }

        private void AssociatedObjectPreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            e.Handled = true;

            var mouseWheelEventArgs = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta)
                     {
                         RoutedEvent = UIElement.MouseWheelEvent
                     };
            AssociatedObject.RaiseEvent(mouseWheelEventArgs);
        }

3> Attached the behavior to your inside ListView

                <ListView Grid.Row="2" Margin="10 0 0 0" BorderThickness="0"
                                  ItemsSource="{Binding Details}"
                                  ItemContainerStyle="{StaticResource CheckForUpdatesListView}">
                            <i:Interaction.Behaviors>
                                <local:IgnoreMouseWheelBehavior />
                            </i:Interaction.Behaviors>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <BulletDecorator Margin="4">
                                        <BulletDecorator.Bullet>
                                            <Ellipse Height="5" Width="5" Fill="Black"/>
                                        </BulletDecorator.Bullet>
                                        <TextBlock TextWrapping="Wrap" Text="{Binding}" Width="350"></TextBlock>
                                    </BulletDecorator>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                </ListView>

Inspired by this close question : Bubbling scroll events from a ListView to its parent

WPF ListView inside ListView not scrolling when mouse over the inner ListView

1 Answers