Scrolling of Pivot inside Grid

Question

I am trying to create a page that has an outer grid that splits the page in half with a pivot in on of the grid columns.

Code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>


        <Pivot Grid.Row="1" Grid.Column="1">
            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" FontSize="18" />
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <PivotItem x:Name="Tab1" Header="Tab 1">
                <ListView x:Name="matchesList">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:Data">
                            <Grid>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{x:Bind Match}"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </PivotItem>
            <PivotItem x:Name="Tab2" Header="Tab 2">

            </PivotItem>
        </Pivot>
</Grid>

I would like the pivot item to scroll. I have tried placing the scrollviewer around lots of the inside elements but around the entire pivot is the only way it shows up. The ListView populates correctly but just runs off the end of the screen and is still not scroll-able. How can I get the ListView to scroll inside the pivot?

Thanks!

Answer 1

As I've tired, if you enable IsHorizontalScrollChainingEnabled, it should work:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>


    <Pivot Grid.Row="1" Grid.Column="1">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" FontSize="18" />
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <PivotItem x:Name="Tab1" Header="Tab 1">
            <ListView x:Name="matchesList" ScrollViewer.IsHorizontalScrollChainingEnabled="True">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Data">
                        <Grid>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{x:Bind Match}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </PivotItem>
        <PivotItem x:Name="Tab2" Header="Tab 2">

        </PivotItem>
    </Pivot>
</Grid>

Generally scrolling ScrollViewer is handled on a very low level to gain performance. Though this has also some disadvantages - it brings problems when you want to use PointerEvents. To make life easier, two properties have been designed - vertical/horizontal chaining - this allows to pass vertical/horizontall scroll from child to parent - like in your example - ListView scrolls vertically and Pivot horizontally.