Xaml Listview Windows-Universal Horizontal Scroll Mode

Question

I coded a list that has as an Itemsource an Observable Collection, which is of type Grids. So the listview is containing 4 Items (Grids). I want the Grids to be like horizontal next to each other, so I tried this in Xaml.

 <StackPanel Orientation="Horizontal">
                <ListView  ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled" ItemsSource="{Binding DropGrids, Source={StaticResource view}}" Height="100"  x:Name="DropList" RenderTransformOrigin="0.5,0.5" >
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
                <AppBarButton Icon="MapPin" Label="Go!" HorizontalAlignment="Right"></AppBarButton>
            </StackPanel>

But when I try scrolling the list to the left it is instantly going back (If you want to simulate is use WGA resolution 4 Inch Emulator) and I can't see the fourth Grid on the screen. How do I fix this? The ListView.ItemsPanel property I got from this post: Stackoverflow Post - Horizontal Mode

Depechie Depechie · Accepted Answer · 2016-02-10T17:54:09

Not sure on the Grid part in your ListView itemsource, but I blogged about how to create a Horizontal ListView here http://depblog.weblogs.us/2015/03/25/show-items-scrolling-horizontally-with-listview-in-winrt/

I hope this helps...

The complete style is set as

<Style x:Name="BaseListViewStyle" TargetType="ListView">
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal"
                                    ScrollViewer.HorizontalScrollMode="Enabled"
                                    ScrollViewer.VerticalScrollMode="Disabled"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Xaml Listview Windows-Universal Horizontal Scroll Mode

1 Answers