c# - How to animate WPF data bound Line item (Shape) -

c# - How to animate WPF data bound Line item (Shape) -

i'm using mvvm, binding observablecollection<shape> (drawinginstructions) , animate line shapes beingness added.

the individual lines shall drawn fra (x1,y1) (x2,y2) in doubleanimation kind of way.

i've tried variations on following, not work.

class="lang-cs prettyprint-override"><itemscontrol itemssource="{binding path=drawinginstructions}"> <itemscontrol.itemspanel> <itemspaneltemplate > <canvas> : </canvas> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.triggers> <eventtrigger routedevent="binding.targetupdated"> <beginstoryboard> <storyboard > <doubleanimation duration="0:0:2" storyboard.targetname="currentline" storyboard.targetproperty="position" from="{binding path=x1}" to="{binding path=x2}"/> <doubleanimation duration="0:0:2" storyboard.targetname="currentline" storyboard.targetproperty="position" from="{binding path=y1}" to="{binding path=y2}"/> </storyboard> </beginstoryboard> </eventtrigger> </itemscontrol.triggers>

the viewmodel contains code names line's beingness added drawing instructions.

var line = new line { x1 = currentsituation.position.x, y1 = currentsituation.position.y, x2 = newsituation.position.x, y2 = newsituation.position.y, name = "currentline", stroke = brush, strokethickness = 2 }; drawinginstructions.add(line);

update:

the solution suggested @nico works -- introduce "model" class representing line x1, x2, y1, y2 , timeoffset properties. info bind observablecollection<mymodelclass> using individual properties in animation:

<itemscontrol.itemtemplate> <datatemplate> <line name="currentline" x1="{binding x1}" y1="{binding y1}" x2="{binding x1}" y2="{binding y1}" stroke="black" strokethickness="2"> <line.triggers> <eventtrigger routedevent="loaded"> <beginstoryboard> <storyboard > <doubleanimation storyboard.targetname="currentline" storyboard.targetproperty="x2" begintime="{binding path=timeoffset}" from="{binding path=x1}" to="{binding path=x2}"/> <doubleanimation storyboard.targetname="currentline" storyboard.targetproperty="y2" begintime="{binding path=timeoffset}" from="{binding path=y1}" to="{binding path=y2}"/> </storyboard> </beginstoryboard> </eventtrigger> </line.triggers> </line> </datatemplate> </itemscontrol.itemtemplate>

first, cannot bind itemscontrol collection of lines , display them lines. instead should create model class has necessary properties. otherwise wpf error. used these classes testing:

public class vm { public observablecollection<drawinginstruction> drawinginstructions { get; set; } } public class drawinginstruction { public double x1 { get; set; } public double x2 { get; set; } public double y1 { get; set; } public double y2 { get; set; } }

then, mentioned, should target x2 , y2 property in animation. here xaml worked me:

<itemscontrol itemssource="{binding drawinginstructions}"> <itemscontrol.itemspanel> <itemspaneltemplate > <canvas/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemtemplate> <datatemplate> <line name="currentline" x1="{binding x1}" y1="{binding y1}" stroke="black" strokethickness="2"> <line.triggers> <eventtrigger routedevent="loaded"> <beginstoryboard> <storyboard > <doubleanimation duration="0:0:2" storyboard.targetname="currentline" storyboard.targetproperty="x2" from="{binding path=x1}" to="{binding path=x2}"/> <doubleanimation duration="0:0:2" storyboard.targetname="currentline" storyboard.targetproperty="y2" from="{binding path=y1}" to="{binding path=y2}"/> </storyboard> </beginstoryboard> </eventtrigger> </line.triggers> </line> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol>

the animation starts command loaded. hope intention. because every item has own animation, should add together animation itemtemplate.

c# wpf mvvm