Silverlight Geometry scaling issue - silverlight

Question

How can I implement zoom to specific point in Silverlight using geometry and ScaleTransform? Can you suggest some algorithm so that I can achieve this? My logic is wrong. I think I have some trouble by setting the center point of scaling.
This is my geometry data in xaml file
<Canvas x:Name="LayoutRoot" Background="Orchid" MouseWheel="PathDraw_OnMouseWheel">
<Path x:Name="PathDraw" Stroke="Brown" StrokeThickness="1" Margin="200,200,0,0">
<Path.Data>
<RectangleGeometry x:Name="rect" Rect="80 80 80 80"/>
</Path.Data>
</Path>
</Canvas>
And below is the scaling logic.
private static int ZoomSteps = 0;
private static double centerX = 0;
private static double centerY = 0;
private double zoomCoeff = 1.1;
private void PathDraw_OnMouseWheel(object sender, MouseWheelEventArgs e)
{
double delta = e.Delta;
if (scaleX != 1)
{
scaleX = delta >= 0 ? scaleX * zoomCoeff : (scaleX <= 1 ? 1 : scaleX / zoomCoeff);
scaleY = delta >= 0 ? scaleY * zoomCoeff : (scaleY <= 1 ? 1 : scaleY/zoomCoeff);
}
else
{
scaleX = scaleY = delta >= 0 ? zoomCoeff : 1;
}
scale = new ScaleTransform { ScaleX = scaleX, ScaleY = scaleY,
CenterX = e.GetPosition(PathDraw).X,
CenterY = e.GetPosition(PathDraw).Y
};
rect.Transform = scale;
}
Thanks

Answer 1

Instead of having a Margin at the Path and a Geometry that has an inherent offset (rectangle upper left corner at 80,80) you should separate scaling from translation by using two transforms:
<Canvas x:Name="LayoutRoot" Background="AliceBlue" MouseWheel="PathDraw_OnMouseWheel">
<Path x:Name="PathDraw" Stroke="Brown" StrokeThickness="1">
<Path.Data>
<RectangleGeometry x:Name="rect" Rect="0 0 80 80">
<RectangleGeometry.Transform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform"/>
<TranslateTransform x:Name="translateTransform"
X="100" Y="100"/>
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Path.Data>
</Path>
</Canvas>
With this your MouseWheel event handler becomes as simple as this:
private double zoomCoeff = 1.1;
private void PathDraw_OnMouseWheel(object sender, MouseWheelEventArgs e)
{
var deltaScale = (e.Delta > 0) ? zoomCoeff : (1d / zoomCoeff);
var position = e.GetPosition((UIElement)sender);
var dx = position.X - translateTransform.X;
var dy = position.Y - translateTransform.Y;
translateTransform.X = position.X - deltaScale * dx;
translateTransform.Y = position.Y - deltaScale * dy;
scaleTransform.ScaleX *= deltaScale;
scaleTransform.ScaleY *= deltaScale;
}
You may now also independently manipulate the translation in a MouseMove handler in order to drag the rectangle.