Nested ScrollViewers

[PetrAltman]

I have two nested ScrollViews:

• The outer one scrolls vertically
• The inner one scrolls horizontally

The current behavior is as follows:

• When VerticalScrollMode is disabled in the inner ScrollView, the inner ScrollView scrolls horizontally.
• When VerticalScrollMode is enabled/automatic in the inner ScrollView, there is no scroll (neither in the inner nor outer ScrollView).

            <ScrollViewer Grid.Column="1" x:Name="OuterScroll">
                <StackPanel>
                    <Border Background="Red" Width="200" Height="200"/>
                    <Border Background="Green" Width="200" Height="200"/>
                    <ScrollViewer x:Name="InnerScroll"                        
                        HorizontalScrollBarVisibility="Auto" 
                        HorizontalScrollMode="Auto"
                        VerticalScrollMode="Auto"
                        VerticalScrollBarVisibility="Auto">
                        <StackPanel Orientation="Horizontal">
                            <Border Background="Red" Width="200" Height="400"/>
                            <Border Background="Green" Width="200" Height="400"/>
                            <Border Background="Red" Width="200" Height="400"/>
                            <Border Background="Green" Width="200" Height="400"/>
                            <Border Background="Red" Width="200" Height="400"/>
                            <Border Background="Green" Width="200" Height="400"/>
                            <Border Background="Red" Width="200" Height="400"/>
                            <Border Background="Green" Width="200" Height="400"/>
                            <Border Background="Red" Width="200" Height="400"/>
                            <Border Background="Green" Width="200" Height="400"/>
                        </StackPanel>
                    </ScrollViewer>
                    <Border Background="Green" Width="200" Height="200"/>
                    <Border Background="Red" Width="200" Height="200"/>
                    <Border Background="Green" Width="200" Height="200"/>
                    <Border Background="Red" Width="200" Height="200"/>
                    <Border Background="Green" Width="200" Height="200"/>
                    <Border Background="Red" Width="200" Height="200"/>
                    <Border Background="Green" Width="200" Height="200"/>
                    <Border Background="Red" Width="200" Height="200"/>
                    <Border Background="Green" Width="200" Height="200"/>
                </StackPanel>
            </ScrollViewer>

I want the outer scrollview to scroll vertically when I scroll by the mouse wheel vertically inside the inner scrollview.
Is there any way how to set scrollviewer to behave this way? (Even with some code behind?)

[PetrAltman]

I found the solution:

Add hander of PointerWheelChangedEvent for handledEvents in the InnerScroll and set e.Handled to false if user scrolls vertically:

InnerScroll.AddHandler(UIElement.PointerWheelChangedEvent, new PointerEventHandler(PointerWheelChangedHack), handledEventsToo: true);

private void PointerWheelChangedHack(object sender, PointerRoutedEventArgs e)
{
        var properties = e.GetCurrentPoint((UIElement)sender).Properties;

        if (!properties.IsHorizontalMouseWheel)
            e.Handled = false;
}

But it would be nice if this behavior could be done only by setting some properties of scrollviewer without attaching the handler.