ScrollViewer not working for ListView when added using C# in Windows 10 UWP

Question

I have added a ListView dynamically and it displays all the data correctly. Now as the amount of data increases I want to allow user to scroll horizontally and not vertically, so I added ScrollViewer property for ListView using the following code

myListView = new ListView();
myListView.ItemsPanel = App.Current.Resources["MyItemsPanel"] as ItemsPanelTemplate;
myListView.ItemTemplate = App.Current.Resources["myListTemplate"] as DataTemplate;
myListView.ItemContainerStyle = App.Current.Resources["GenericListViewContainerStyle"] as Style;
myListView.SelectionMode = ListViewSelectionMode.Multiple;
myListView.Margin = new Thickness(10);

myListView.SetValue(ScrollViewer.VerticalScrollBarVisibilityProperty, ScrollBarVisibility.Disabled);
myListView.SetValue(ScrollViewer.VerticalScrollModeProperty, ScrollMode.Disabled);
myListView.SetValue(ScrollViewer.HorizontalScrollBarVisibilityProperty, ScrollBarVisibility.Hidden);
myListView.SetValue(ScrollViewer.HorizontalScrollModeProperty, ScrollMode.Auto);

ItemsPanel Template

<ItemsPanelTemplate x:Key="MyItemsPanel">
    <StackPanel Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="0" />
        </StackPanel.RenderTransform>
    </StackPanel>
</ItemsPanelTemplate>

Can someone suggest what is wrong here? I want it to work both using Mouse and Touch input. My Current works fine with touch input but I can't scroll when I use mouse pointer.

Grace Feng Grace Feng · Accepted Answer · 2016-08-25T08:08:06

Now as the amount of data increases I want to allow user to scroll horizontally and not vertically.

To do this, you will need to modify the template of ItemsPanel and together enable the HorizontalScrollMode of the ScrollViewer inside this ListView, in XAML it is like this:

<ListView ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollMode="Enabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
           ...
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

So besides your code for enabling the horizontal scroll mode, when define this in the code behind, you also need to get the ItemsStackPanel using VisualTreeHelper for example in the Loaded event of your ListView:

private void myListView_Loaded(object sender, RoutedEventArgs e)
{
    var itemstackpanel = FindChildOfType<ItemsStackPanel>(myListView);
    if (itemstackpanel != null)
        itemstackpanel.Orientation = Orientation.Horizontal;
}

public static T FindChildOfType<T>(DependencyObject root) where T : class
{
    var queue = new Queue<DependencyObject>();
    queue.Enqueue(root);
    while (queue.Count > 0)
    {
        DependencyObject current = queue.Dequeue();
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(current); i++)
        {
            var child = VisualTreeHelper.GetChild(current, i);
            var typedChild = child as T;
            if (typedChild != null)
            {
                return typedChild;
            }
            queue.Enqueue(child);
        }
    }
    return null;
}

ScrollViewer not working for ListView when added using C# in Windows 10 UWP

2 Answers