Windows Vista Forums
Vista Forums Home Join Vista Forums Donate Vista Tutorials Tags

Welcome to Vista Forums we are your forum to discuss Windows Vista x64 and x86 systems. Whether you need help or just want to post an idea you have on Vista, this is the forum for you.
Register at Vista forums...the world biggest Windows Vista resource Join Vista Forums Now

Go Back   Vista Forums > Microsoft Technical Newsgroups > Avalon

Center and scale object (Zooming & Panning)

Closed Thread
 
Thread Tools Display Modes
Old 01-10-2006   #1 (permalink)
_werner
Guest


 

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);
}
}
Old 01-10-2006   #2 (permalink)
_werner
Guest


 

RE: Center and scale object (Zooming & Panning)

Annotation:
Is there a possibility to transform a canvas (simultaneous scale &
translate) within one animation?
Old 01-10-2006   #3 (permalink)
Michael Latta
Guest


 

Re: Center and scale object (Zooming & Panning)

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?



Closed Thread

Thread Tools
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
printing in grey scale snakey Vista print fax & scan 1 07-11-2008 06:37 PM
Panning & Zooming with VisualBrush/Viewbox Tobias Vandenbempt Avalon 1 04-26-2007 06:39 AM
Panning in Windows Movie Maker Chris Vista music pictures video 12 04-07-2007 09:16 PM
Adding canonical aliases for Compare-Object, Measure-Object, New-Object Alex K. Angelopoulos [MVP] PowerShell 2 05-26-2006 07:58 AM
how can i scale a complete window? Thorsten Thiel Avalon 2 04-24-2006 10:00 AM








Vistax64.com is an independent web site and has not been authorized,
sponsored, or otherwise approved by Microsoft Corporation.
"Windows Vista", the Start Orb, and related materials are trademarks of Microsoft Corp.
© Designer Media 2005-2008

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50