c# - Move&Zoom Image -

i have pretty simple requirement (i thought), window shows image @ start point & size , moves/zooms end point , size. not typical image viewer requirement pan&zoom. more sprite animation.

i tried out couple of ways, e.g. thicknessanimation alter margin move image, performance not enough. have admit don't have experience wpf, though.

below last version ok performance-wise. image element goes on whole window , size , position set scaletransform , translatetransform. works (and shows relatively smooth movement) if end position on lower right of start position, e.g. 0,0 800,600. if it's other way around, though, image makes kind of slingshot movement lower right corner of window, leaves window , comes stop @ end position.

i appreciate explanation behavior solution. , if know different way works , similar or better performance-wise, i'd hear too.

<window x:class="viewboxtext.animatedimagewindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     title="animatedimagewindow"      windowstyle="none"      sizetocontent="widthandheight"      allowstransparency="true"      showintaskbar="false"      left="0"      top="0"     height="{binding totalheight}"      width="{binding totalwidth}"     datacontext="{binding relativesource={relativesource self}}"> <grid>     <image x:name="image" horizontalalignment="left" verticalalignment="top" width="{binding totalwidth}" height="{binding totalheight}" stretch="uniform">         <image.rendertransform>             <transformgroup>                 <translatetransform x="{binding horizontalstart}" y="{binding verticalstart}" />                 <scaletransform />             </transformgroup>         </image.rendertransform>         <image.triggers>             <eventtrigger routedevent="image.loaded">                 <beginstoryboard>                     <storyboard completed="onstoryboardcompleted">                         <doubleanimation storyboard.targetname="image"                                           storyboard.targetproperty="(image.rendertransform).(transformgroup.children)[1].(scaletransform.scalex)"                                           from="{binding scalestart}" to="{binding scaleend}" desiredframerate="30"                                          duration="0:0:2" begintime="0:0:0" />                         <doubleanimation storyboard.targetname="image"                                          storyboard.targetproperty="(image.rendertransform).(transformgroup.children)[1].(scaletransform.scaley)"                                           from="{binding scalestart}" to="{binding scaleend}" desiredframerate="30"                                          duration="0:0:2" begintime="0:0:0" />                         <doubleanimation storyboard.targetname="image"                                          storyboard.targetproperty="(image.rendertransform).(transformgroup.children)[0].(translatetransform.x)"                                            by="{binding horizontaloffset}"                                          duration="0:0:2" begintime="0:0:0" />                         <doubleanimation storyboard.targetname="image"                                          storyboard.targetproperty="(image.rendertransform).(transformgroup.children)[0].(translatetransform.y)"                                           from="{binding verticalstart}" to="{binding verticalend}"                                          duration="0:0:2" begintime="0:0:0" />                     </storyboard>                 </beginstoryboard>             </eventtrigger>         </image.triggers>        </image> </grid> 

the problem scale scaling 0,0. believe want scale point interested in, may or may not vertical/horizontal end point.

normally, translate centre on origin, scale, put whole thing back.

e.g. scale x point a,b

• translate -a,-b
• scale x
• translate a,b

fortunately scale has couple of centre properties make easier.

so try adjusting centerx , centery properties of scaletransform.