locked
How to prevent GridView from swallowing the mouse wheel events? RRS feed

  • Question

  • Given the following xaml:

    <ScrollViewer HorizontalScrollMode="Disabled" Height="400" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto" ZoomMode="Disabled">
            <GridView ItemsSource="{Binding Items}" ScrollViewer.VerticalScrollMode="Disabled">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        ...
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
    </ScrollViewer>

    And the mose wheel does not work on the ScrollViewer if the cursor is over the GridView, but it works if the cursor is over the ScrollBar of the ScrollViewer. So it seems that the inner GridView swallows the event.

    Is there any way to prevent this? I tried setting the ScrollViewer.* properties to disabled on the GridView, changing the StackPanel to VirtualizingStackPanel, changing the GridView to ListView or ItemsControl but none of them worked.

    I know this is a common problem, but I couldn't find any real solution yet.

    Friday, November 16, 2012 10:21 AM

Answers

  • And this should be the XAML template you need.

    <Style x:Key="ScrolllessGridView" TargetType="GridView">
                    <Setter Property="Padding" Value="0,0,0,10"/>
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="TabNavigation" Value="Once"/>
                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
                    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
                    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
                    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
                    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
                    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                    <Setter Property="IsSwipeEnabled" Value="True"/>
                    <Setter Property="ItemContainerTransitions">
                        <Setter.Value>
                            <TransitionCollection>
                                <AddDeleteThemeTransition/>
                                <ContentThemeTransition/>
                                <ReorderThemeTransition/>
                                <EntranceThemeTransition IsStaggeringEnabled="False"/>
                            </TransitionCollection>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridView">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                    <ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

    • Proposed as answer by John Westlake Friday, November 16, 2012 9:04 PM
    • Marked as answer by MarkVincze Tuesday, November 20, 2012 8:53 AM
    Friday, November 16, 2012 9:04 PM
  • The GridView contains its own scrollviewer within it's template that is swallowing the mouse wheel events. If you want to prevent it, you need to retemplate the GridView, removing its scrollviewer.



    • Edited by John Westlake Friday, November 16, 2012 11:44 AM
    • Proposed as answer by Aaron Xue Monday, November 19, 2012 9:56 AM
    • Marked as answer by MarkVincze Tuesday, November 20, 2012 8:53 AM
    Friday, November 16, 2012 11:29 AM

All replies

  • The GridView contains its own scrollviewer within it's template that is swallowing the mouse wheel events. If you want to prevent it, you need to retemplate the GridView, removing its scrollviewer.



    • Edited by John Westlake Friday, November 16, 2012 11:44 AM
    • Proposed as answer by Aaron Xue Monday, November 19, 2012 9:56 AM
    • Marked as answer by MarkVincze Tuesday, November 20, 2012 8:53 AM
    Friday, November 16, 2012 11:29 AM
  • And this should be the XAML template you need.

    <Style x:Key="ScrolllessGridView" TargetType="GridView">
                    <Setter Property="Padding" Value="0,0,0,10"/>
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="TabNavigation" Value="Once"/>
                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
                    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
                    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
                    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
                    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
                    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                    <Setter Property="IsSwipeEnabled" Value="True"/>
                    <Setter Property="ItemContainerTransitions">
                        <Setter.Value>
                            <TransitionCollection>
                                <AddDeleteThemeTransition/>
                                <ContentThemeTransition/>
                                <ReorderThemeTransition/>
                                <EntranceThemeTransition IsStaggeringEnabled="False"/>
                            </TransitionCollection>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridView">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                    <ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

    • Proposed as answer by John Westlake Friday, November 16, 2012 9:04 PM
    • Marked as answer by MarkVincze Tuesday, November 20, 2012 8:53 AM
    Friday, November 16, 2012 9:04 PM
  • It works, thanks!
    Tuesday, November 20, 2012 8:53 AM
  • This works well, but I just realised, that if I remove the ScrollViewer from the template, then the swipe selection is not working in the GridView, even if the IsSwipeEnabled property is set to true.

    Do you have any idea about what can be the reason for this? Is this excepted behavior?

    Tuesday, November 27, 2012 4:12 PM
  • I'm having the same issue, did you find the solution?
    Tuesday, April 9, 2013 11:45 AM