Windows phone ScrollViewer doesn't work when projection is applied

Question

I discovered this issue in real complex project, but it's reproducible with simple test project. So I have the test UWP page

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid
            VerticalAlignment="Top"
            HorizontalAlignment="Left"
            Height="100">
            <Grid.Projection>
                <PlaneProjection GlobalOffsetY="100"/>
            </Grid.Projection>
            <ScrollViewer
                VerticalScrollMode="Enabled"
                VerticalScrollBarVisibility="Visible">
                <StackPanel>
                    <Button Content="1"/>
                    <Button Content="2"/>
                    <Button Content="3"/>
                    <Button Content="4"/>
                    <Button Content="5"/>
                    <Button Content="6"/>
                    <Button Content="7"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>

it works as expected in PC version, but scroller doesn't work in mobile (windows phone) version. the same story with Windows Phone 8.1 If to comment projection on parent grid - everything is ok.

Any ideas of fix or at least workaround for that issue?

Answer 1

it works as expected in PC version, but scroller doesn't work in mobile (windows phone) version.

By design,if a global transform of scrollviewer(Projection Transform here) can't be represented as a Matrix Transform, the underlying layer that handles touch interaction can't be used.

So if you only need to apply GlobalOffsetY or GlobalOffsetX. I recommend you using TranslateTransform instead. It won't prevent ScrollViewer from scrolling:

<Grid
    VerticalAlignment="Top"
    HorizontalAlignment="Left"
    Height="500" Width="200">
    <Grid.RenderTransform>
        <TranslateTransform Y="100"/>
    </Grid.RenderTransform>
    <ScrollViewer
        VerticalScrollMode="Enabled"
        VerticalScrollBarVisibility="Visible">
        <StackPanel>
            <Button Content="1"/>
            <Button Content="2"/>
            <Button Content="3"/>
            <Button Content="4"/>
            <Button Content="5"/>
            <Button Content="6"/>
            <Button Content="7"/>
        </StackPanel>
    </ScrollViewer>
</Grid>