Cross-slide with nested scrollviewers in WinRT Xaml

Question

I am building an application which requires a horizontal list of vertical lists

Simplified XAML layout:

<ScrollViewer>
    <ItemsControl ItemsSource="{Binding Lists}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ListView ItemsSource="{Binding Items}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

I am having trouble getting the touch interactions right. Currently horizontal swipes move the entire list horizontally, and vertical move individual lists' items vertically. However it is possible to move both lists with a diagonal swipe, and it's not possible to scroll multiple vertical lists at a time (it is without the outer scrollviewer).

Is there a way to make all horizontal swipes apply only to the outer scrollviewer, and all vertical swipes only to an inner listview?

Filip Skakun Filip Skakun · Accepted Answer · 2013-04-15T21:03:57

You might get the desired effect if you set IsHorizontalRailEnabled/IsVerticalRailEnabled properties on both ScrollViewers.

You can also set something like ScrollViewer.IsHorizontalRailEnabled on a GridView or ScrollViewer.IsVerticalRailEnabled on a ListView without having to extract the templates to get access to their ScrollViewers.

Cross-slide with nested scrollviewers in WinRT Xaml

1 Answers