How to not drag an Image out of the frame? - image

Question

I cannot find the property or the object that I need..
I have implemented a draggable and zoomable image but I can drag it out of the screen, so I lose my Image out of the view.
Where should I put my image to keep it inside a box (and, possibly with the nice bouncing effect)?
EDIT:
Pratically my image has to remain in the stackpanel, with only the possibility of zoom-in.
(max zoom-out as the first rendering).
A bit of code:
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
initialAngle = compositeTransform.Rotation;
initialScale = compositeTransform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
compositeTransform.ScaleX = initialScale * e.DistanceRatio;
compositeTransform.ScaleY = initialScale * e.DistanceRatio;
}
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
compositeTransform.TranslateX += e.HorizontalChange;
compositeTransform.TranslateY += e.VerticalChange;
}
<StackPanel x:Name="container">
<Image x:Name="image_chart">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="scale" />
<TranslateTransform x:Name="transform" />
<CompositeTransform x:Name="compositeTransform"/>
</TransformGroup>
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta"
DragDelta="OnDragDelta"/>
</toolkit:GestureService.GestureListener>
</Image>
</StackPanel>
EDIT 2 - Half Answer
I've finally find out how to stop the zoom-out at the original size!
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
if (1.0 <= (initialScale * e.DistanceRatio))
{
compositeTransform.ScaleX = initialScale * e.DistanceRatio;
compositeTransform.ScaleY = initialScale * e.DistanceRatio;
}
}
The If condition means: if I'm zooming in -> no problem because the e.DistanceRatio is >1. If I'm zooming out I will stop until the initialScale will be the same!
Now I still need help on how avoid the Drag outside.

Answer 1

Ok, I find out the solution, but I need some improvement.
The scaling work but when the image is on the right it goes all on the left (because it's scaling starting from the top_left corner..
Here's the code for the "blocking drag":
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
double realWidth = image_chart.ActualWidth*compositeTransform.ScaleX;
double realHeight = image_chart.ActualHeight * compositeTransform.ScaleY;
if(compositeTransform.TranslateX>=0)
compositeTransform.TranslateX = Math.Max(container.ActualWidth - realWidth,
Math.Min(0, compositeTransform.TranslateX + e.HorizontalChange));
else
compositeTransform.TranslateX = Math.Max(container.ActualWidth - realWidth,
Math.Min(0, compositeTransform.TranslateX + e.HorizontalChange));
if(compositeTransform.TranslateY>=0)
compositeTransform.TranslateY = Math.Max(container.ActualHeight - realHeight,
Math.Min(0, compositeTransform.TranslateY + e.VerticalChange));
else
compositeTransform.TranslateY = Math.Max(container.ActualHeight - realHeight,
Math.Min(0, compositeTransform.TranslateY + e.VerticalChange));
EDIT:
In the end I've decide to use the WebBrowser.. much more "smoother" and enjoyable!

Answer 2

my solution:
XAML code
<StackPanel x:Name="Scroll" Margin="0">
<Image CacheMode="BitmapCache" Name="FrontCover" Source="{Binding FullCover}" >
<Image.RenderTransform>
<CompositeTransform x:Name="transform" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchDelta="OnPinchDelta" PinchStarted="OnPinchStarted" DragDelta="OnDragDelta" />
</toolkit:GestureService.GestureListener>
</Image>
</StackPanel>
double initialScale;
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
initialScale = transform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
var curZoom = initialScale * e.DistanceRatio;
if (curZoom >= 1 && curZoom <= 3)
{
transform.ScaleX = curZoom;
transform.ScaleY = curZoom;
}
}
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
transform.CenterX = (transform.CenterX - e.HorizontalChange);
transform.CenterY = (transform.CenterY - e.VerticalChange);
if (transform.CenterX < 0)
transform.CenterX = 0;
else if ( transform.CenterX > Scroll.ActualWidth)
transform.CenterX = Scroll.ActualWidth;
else if (transform.CenterX > (FrontCover.Height * transform.ScaleX))
transform.CenterX = FrontCover.Height * transform.ScaleX;
if (transform.CenterY < 0)
transform.CenterY = 0;
else if (transform.CenterY > Scroll.ActualHeight)
transform.CenterY = Scroll.ActualHeight;
else if (transform.CenterY > (FrontCover.Height * transform.ScaleY))
transform.CenterY = FrontCover.Height * transform.ScaleY;
}
Think it should help others

Answer 3

Assuming that at beginning image is in top-left corner (and please check if this still works after scaling):
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
compositeTransform.TranslateX = Math.Min(container.ActualWidth - image_chart.ActualWidth,
Math.Max(0,
compositeTransform.TranslateX + e.HorizontalChange));
compositeTransform.TranslateY = Math.Min(container.ActualHeight - image_chart.ActualHeight,
Math.Max(0,
compositeTransform.TranslateY + e.VerticalChange));
}