locked
undesired "clipping" of content in ScrollViewer

    Question

  • Hi,

    I've trouble with an undesired behavior of the ScrollViewer: the ScrollViewer "clips" its content when I use zooming. Consider this example XAML code that is the only content of a page:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <StackPanel>
                    <TextBlock>ASD</TextBlock>
                    <TextBlock>ASD</TextBlock>
                    <TextBlock>ASD</TextBlock>                
                </StackPanel>
            </ScrollViewer>
    </Grid>

    When you zoom into the content the left part of the "ASD" string and the first TextBlock is out of the boundaries of the ScrollViewer! It's not possible to bring this part of the content into view using a mouse (by using the scroll wheel). When I use touch to pan around the content it is possible to make the clipped content visible because of the rubber-banding / overscrolling effect that happens when you scroll over the boundary of the ScrollViewer. However, when I remove my finger from the screen the ScrollViewer snaps back and clips the content again.

    This seems to be a bug to me. Is there any workaround? I'm targeting Windows 8.1 with my app.

    Thanks for any answers

    sr258

    Thursday, July 10, 2014 7:22 PM

All replies

  • Hi SR258,

    I can reproduce what you mentioned here. After I zoom the content of ScrollViewer, the left part of the words are clipped. However when I zoom the content second time, its back to normal.

    However when I set ZoomMode as enabled, everything works fine. I believe that ZoomMode will do some setting to adjust the position of the ScrollViewer content.

    If you need manually handle the pinch to zoom action, you can try to set a listener by something like below:

                scrollViewer.ManipulationDelta += new ManipulationDeltaEventHandler((sender, e) =>
                {
                    if (transform != null)
                    {
                      ...                
                    }
                });
    

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, July 11, 2014 7:54 AM
    Moderator
  • Hi James,

    Thanks for your answer! However, setting ZoomMode to enabled doesn't seem to do the trick for me. The content of the ScrollViewer is still clipped and I get the same undesired behavior when using touch. I don't understand how ManipulationDeltaEvent helps me in my situation. As you say it seem like the position of the content of the ScrollViewer is somehow shifted when you zoom in.

    SR258

    Saturday, July 12, 2014 9:22 AM
  • Hi SR258,

    When I set the ZoomMode enabled, the position of content in ScrollViewer shift back to normal. However it could be a issue because i'm testing with simulator.

    Could you test with the simulator and tell me if this is only happens on device?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, July 14, 2014 8:27 AM
    Moderator