Horizontal Scrollviewer from Tableview breaks Vertical scrollviewer of the page

[Bush-cat]

Description:

When the horizontal scrollviewer appears because the tableview is wider than the page, you can not scroll the horizontal scrollviewer of the Page when the Mouse is over the tableview, when you scroll with the mouse outside the tableview, you can scroll the page as normal. The tableview itself does not show a horizontal scrollviewer because it has enough space on the page due to the page side Scrollviewer.

Steps to Reproduce:

Here is a cutout of my tableview

<Page>
    <Grid>
        <ScrollViewer>
            <StackPanel Padding="16">
                <table:TableView
                    Margin="{StaticResource SmallTopMargin}"
                    d:DataContext="{d:DesignInstance Type=models:StartupApp}"
                    AutoGenerateColumns="False"
                    IsReadOnly="True"
                    ItemsSource="{x:Bind ViewModel.StartupApps, Mode=OneWay}"
                    SelectionMode="None"
                    Style="{StaticResource TableStyle}">
                    <table:TableView.Columns>
                        <table:TableViewTextColumn
                            x:Uid="WindowsPage_StartupApps_Name"
                            Binding="{Binding Name, Mode=OneWay}" />
                        <table:TableViewTextColumn
                            x:Uid="WindowsPage_StartupApps_Command"
                            Binding="{Binding Command, Mode=OneWay}" />
                    </table:TableView.Columns>
                </table:TableView>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>

• Resize the page so that the tableview does not fit into it and the scrollbars appear
• try scrolling using the mouse inside the Tableview - will not work with the tableview
• try scrolling outside the tableview, eg inside the padding of the stackpanel, scrolling the page will work

Expected behavior:

Since the tableview does not have a horizontal scrollviewer itself, I expected it to scroll the page instead.

Workaround

• Enabling the pages Scrollviewer to work horizontally with HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" disables the tableviews scrollviewer and makes vertical scrolling possible again. -> Does not look good as I'm filling the entire page with all components, a longer horizontal width will stretch them too far.
• Another alternative could be to limit the Width of the Columns so they won't be bigger than the Pages width at start.
• Set TableView Width="9999" to make it infinite wide and disable Horizontal Scrollviewer - I chose this Workaround

Screenshots:

Environment:

• Package Version: 1.2.2
• WinAppSDK Version : 1.7, SdkPackagerVersion 10.0.22621.57

[w-ahmad]

it looks like a ListView issue and already reported in WinUI repo microsoft/microsoft-ui-xaml#10172