Search code examples
xamlwindows-phone-8clipping

Image translation is clipped (how to prevent)


How can I force a UI object to NOT be clipped when it's partly outside the screen. I have an image that doesn't fit inside the screen completely. When I drag it (TranslateY) it moves like it's supposed to but the problem is that the part that was outside the screen doesn't appear so the image is abruptly cut. The only part of the image that is visibly moving is the part that originally fit to the screen.

Ps. Please do not recommend scollviewer as this is about a gesture to do a specific thing on the UI and ScrollViewer is not ok for that.

This is basically the XAML (The image is twice the height of the display)

<Grid x:Name="GestureScreen" ManipulationMode="TranslateY"  RenderTransformOrigin="0.5,0.5"> 
    <Image x:Name="GestureImage" CacheMode="BitMapCache" Source="Assets/bg/draggable.png" />
</Grid>

This is the C# (not really relevant, but still)

void GestureScreen_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    move.Y += e.Delta.Translation.Y;
}

Solution

  • Specify a row and column for the image which directly specifies Auto for both. That way the image will size to its actual size and not the current size of the * defaults of the screen size. Hence you will have the whole image as dragged.