locked
Horizontal ListView items do not scroll when swiped in WinRT app? RRS feed

  • Question

  • I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I can't swipe the row left or right to see off-screen items.  I want the behavior like the Favorites thumbnail row at the bottom of Internet Explorer.  Right now, when I try to swipe left/right by touching and dragging an item, the item shifts a little bit left and right but the row doesn't move.  It's as if each item has its own scroll area and it's trying to scroll within that area instead of having the whole row scroll.  I think it may have something to do with the child stack panel but I don't know how to fix this.  I did experiment with IsHorizontalScrollChainingEnabled but that didn't help.

    NOTE: I switched to a ListView from a GridView because of other posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.

    Here is the XAML for the page:

    <Page
        <!-- headers snipped for brevity -->
        <Page.Resources>
            <Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
            <Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
            <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <DataTemplate x:Key="HorzVideomarksItemTemplate1">
                <Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20*"/>
                        <RowDefinition Height="52*"/>
                        <RowDefinition Height="23*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
                    <TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
                    <Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
                    <!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap" 
                        Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
                </Grid>
            </DataTemplate>
        </Page.Resources>
    
        <Grid x:Name="gridPage" 
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="897*"/>
                <ColumnDefinition Width="469*"/>
            </Grid.ColumnDefinitions>
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="347*"/>
                <RowDefinition Height="231*"/>
            </Grid.RowDefinitions>
    
            <!-- Back button and page title -->
            <Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                    VerticalAlignment="Top"
                    AutomationProperties.Name="Back"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"/>
                <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
                <Button x:Name="exitButton"
                    Click="exitButton_Click"
                    Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
                <Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
            </Grid>
            <WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
            <Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
            <ListView 
                    x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
                    ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}" 
                    ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None" 
                        >
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
    
                        </StackPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
    
            <Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
                <Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="187*"/>
                        <ColumnDefinition Width="188*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="189*"/>
                        <RowDefinition Height="137*"/>
                        <RowDefinition Height="62*"/>
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
                    <TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
                    <Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
                    <Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
                    <Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
                </Grid>
            </Border>
        </Grid>
    </Page>


    -- roschler

    Tuesday, February 4, 2014 9:01 PM

Answers

  • The ListView is not meant to be a horizontal scrolling control and is meant for vertical scrolling list scenarios. The GridView is a control that is meant for horizontal scrolling scenarios. So, the implicit control template for the ListView control restricts its scrolling behavior to be vertical, which is why you are unable to scroll horizontally even though you are able to see content getting rendered horizontally using the horizontal stackpanel in the ItemPanelTemplate. 

    That said, here's what you need to do to get your scenario working: Set the HorizontalScrollMode and HorizontalScrollBarVisibility properties of the ScrollViewer in the ListView's control template to "Auto". The XAML should look like:

    <ListView 
                    x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Margin="20" 
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Auto"
                        >
    That should do the trick.


    Harini Kannan | Program Manager, XAML

    Wednesday, February 5, 2014 2:38 AM

All replies

  • The ListView is not meant to be a horizontal scrolling control and is meant for vertical scrolling list scenarios. The GridView is a control that is meant for horizontal scrolling scenarios. So, the implicit control template for the ListView control restricts its scrolling behavior to be vertical, which is why you are unable to scroll horizontally even though you are able to see content getting rendered horizontally using the horizontal stackpanel in the ItemPanelTemplate. 

    That said, here's what you need to do to get your scenario working: Set the HorizontalScrollMode and HorizontalScrollBarVisibility properties of the ScrollViewer in the ListView's control template to "Auto". The XAML should look like:

    <ListView 
                    x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Margin="20" 
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Auto"
                        >
    That should do the trick.


    Harini Kannan | Program Manager, XAML

    Wednesday, February 5, 2014 2:38 AM
  • Thanks Harini, that did the trick.

    -- roschler

    Wednesday, February 12, 2014 5:55 AM