Center and scale object (Zooming & Panning)

Hi,
I have a root Canvas and in that another Canvas, which contains several
objects (rectangle, images...). I want to centre a clicked object and scale
it to an almost screen filling size. If there is an object directly in a
neighbourhood of another I want to pan to it by clicking. The important thing
is that all transformations and scales should be animated and fluid, so the
user gets nice feedback of the motion.

My problem is, that if already scaled the canvas to let's say 2.3, with the
next scaling, it doesn't zoom fluid from 2.3 to 5. Either there is only one
abrupt transformation or the scaling goes back to 1 before scaling deeper to
5.

Do you know a better way for zooming and panning with Avalon?
Is there a failure or wrong strategy?

I just started with Avalon....here's my first try:



<Canvas Name="canvasRoot" Background="DarkGoldenrod" >
<Canvas MouseLeftButtonDown="_MouseLeftButtonDown"
MouseRightButtonDown="_MouseRightButtonDown" Name="canvasAll" Width="500"
Height="500" Background="Black">
<Rectangle Height="50" Width="50" Fill="Green" Stroke="Red"
StrokeThickness="2"
Canvas.Left="225" Canvas.Top="0">
</Rectangle>
<Rectangle Height="50" Width="50" Fill="Green" Stroke="Red"
StrokeThickness="2"
Canvas.Left="450" Canvas.Top="0">
</Rectangle>
</Canvas>
</Canvas>

public partial class Window1 : Window
{

double currentDx = 0;
double currentDy = 0;
double currentCx = 0;
double currentCy = 0;
double currentScaleFacX = 1;
double currentScaleFacY = 1;
double offset = 100;

public Window1()
{
InitializeComponent();

}

private void _MouseLeftButtonDown(object sender, MouseEventArgs e)
{
FrameworkElement obj = (FrameworkElement)e.OriginalSource;
double oW = obj.ActualWidth;
double oH = obj.ActualHeight;

Matrix ma = ((Transform)obj.TransformToAncestor(canvasAll)).Value;
Point pointA = new Point(0, 0) * ma;
Matrix mr = ((Transform)obj.TransformToAncestor(canvasRoot)).Value;
Point pointR = new Point(0, 0) * mr;

Storyboard myStory = new Storyboard();

// compute translate x,y
double tx = canvasRoot.ActualWidth / 2 - (oW / 2) - pointA.X;
double ty = canvasRoot.ActualHeight / 2 - (oH / 2) - pointA.Y;

// translate X
DoubleAnimation transAnimX = new DoubleAnimation();
transAnimX.Duration = new Duration(TimeSpan.FromMilliseconds(500));
transAnimX.From = currentDx;
transAnimX.To = currentDx = tx;
myStory.Children.Add(transAnimX);
Storyboard.SetTargetName(transAnimX, canvasAll.Name);
Storyboard.SetTargetProperty(transAnimX, new PropertyPath("(0).(1)[1].(2)",
Canvas.RenderTransformProperty, TransformGroup.ChildrenProperty,
TranslateTransform.XProperty));

// translate Y
DoubleAnimation transAnimY = new DoubleAnimation();
transAnimY.Duration = new Duration(TimeSpan.FromMilliseconds(500));
transAnimY.From = currentDy;
transAnimY.To = currentDy = ty;
myStory.Children.Add(transAnimY);
Storyboard.SetTargetName(transAnimY, canvasAll.Name);
Storyboard.SetTargetProperty(transAnimY, new PropertyPath("(0).(1)[1].(2)",
Canvas.RenderTransformProperty, TransformGroup.ChildrenProperty,
TranslateTransform.YProperty));

// compute scale
double scaleFac = Math.Min((canvasRoot.ActualWidth - offset) / oW,
(canvasRoot.ActualHeight - offset) / oH);

// set scale center
scaleAll.CenterX = currentCx = pointA.X + oW/2;
scaleAll.CenterY = currentCy = pointA.Y + oH / 2;

// scaling animation X
DoubleAnimation scAnimX = new DoubleAnimation();
scAnimX.Duration = new Duration(TimeSpan.FromMilliseconds(500));
scAnimX.From = currentScaleFacX;
scAnimX.To = currentScaleFacX = scaleFac;
Storyboard.SetTargetName(scAnimX, canvasAll.Name);
Storyboard.SetTargetProperty(scAnimX, new PropertyPath("(0).(1)[0].(2)",
Canvas.RenderTransformProperty, TransformGroup.ChildrenProperty,
ScaleTransform.ScaleXProperty));
myStory.Children.Add(scAnimX);

// scaling animation Y
DoubleAnimation scAnimY = new DoubleAnimation();
scAnimY.Duration = new Duration(TimeSpan.FromMilliseconds(500));
scAnimY.From = currentScaleFacY;
scAnimY.To = currentScaleFacY = scaleFac;
Storyboard.SetTargetName(scAnimY, canvasAll.Name);
Storyboard.SetTargetProperty(scAnimY, new PropertyPath("(0).(1)[0].(2)",
Canvas.RenderTransformProperty, TransformGroup.ChildrenProperty,
ScaleTransform.ScaleYProperty));
myStory.Children.Add(scAnimY);

myStory.Begin(this);
}

private void _MouseRightButtonDown(object sender, MouseEventArgs e)
{
Storyboard myStory = new Storyboard();

scaleAll.CenterX = currentCx;
scaleAll.CenterY = currentCy;

// scaling animation X
DoubleAnimation scAnimX = new DoubleAnimation();
scAnimX.Duration = new Duration(TimeSpan.FromMilliseconds(500));
scAnimX.To = currentScaleFacX = currentScaleFacY = 1;
Storyboard.SetTargetName(scAnimX, canvasAll.Name);
Storyboard.SetTargetProperty(scAnimX, new PropertyPath("(0).(1)[0].(2)",
Canvas.RenderTransformProperty, TransformGroup.ChildrenProperty,
ScaleTransform.ScaleXProperty));
myStory.Children.Add(scAnimX);

// scaling animation Y
DoubleAnimation scAnimY = new DoubleAnimation();
scAnimY.Duration = new Duration(TimeSpan.FromMilliseconds(500));
scAnimY.To = currentScaleFacX = currentScaleFacY = 1;
Storyboard.SetTargetName(scAnimY, canvasAll.Name);
Storyboard.SetTargetProperty(scAnimY, new PropertyPath("(0).(1)[0].(2)",
Canvas.RenderTransformProperty, TransformGroup.ChildrenProperty,
ScaleTransform.ScaleYProperty));
myStory.Children.Add(scAnimY);

myStory.Begin(this);
}
}

Annotation:
Is there a possibility to transform a canvas (simultaneous scale &
translate) within one animation?

You can scale about a center point with several of the scale transform
methods. You can also create a matrix transformation that provides scale,
translation, and skewing all in one transformation.

Michael

"_werner" <werner@discussions.microsoft.com> wrote in message
news:91762DA9-3FBE-4BB7-8265-2092DF0BAC2D@microsoft.com...
> Annotation:
> Is there a possibility to transform a canvas (simultaneous scale &
> translate) within one animation?