CODEWITHSUNDEEP
c#listviewwindows-10-universal
Kinjan Bhavsar
Kinjan Bhavsar

Reputation: 1449

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

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.

Upvotes: 2

Views: 460

Answers (2)

Kinjan Bhavsar
Kinjan Bhavsar

Reputation: 1449

Found the solution.

I removed following code 

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

And added following code to my ListView

mtListView.Style = App.Current.Resources["ListViewStyle"] as Style;

ListViewStyle

<Style x:Key="ListViewStyle" TargetType="ListView">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
</Style>

Hope this helps someone.

Upvotes: 1

Grace Feng
Grace Feng

Reputation: 16652

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;
}

Upvotes: 1

Related Questions