c# - Animating elements in a ContentControl's DataTemplate -

c# - Animating elements in a ContentControl's DataTemplate -

i have contentcontrol i'm styling datatemplate. i'd able define animation outside of contentcontrol animates elements in datatemplate. xaml small, simplified illustration of scenario:

<usercontrol x:class="storyboardtesting.stage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:ignorable="d"> <usercontrol.resources> <datatemplate x:key="mycontroltemplate"> <stackpanel> <textblock x:name="theblock1" text="foo!" /> <textblock x:name="theblock2" text="bar!" /> </stackpanel> </datatemplate> </usercontrol.resources> <visualstatemanager.visualstategroups> <visualstategroup name="valuestates"> <visualstate name="tostate"> <storyboard> <doubleanimation storyboard.targetname="mycontentcontrol" storyboard.targetproperty="(uielement.opacity)" duration="0:0:1" to="0" /> </storyboard> </visualstate> <visualstate name="fromstate" /> </visualstategroup> </visualstatemanager.visualstategroups> <grid> <canvas> <contentcontrol x:name="mycontentcontrol" contenttemplate="{staticresource mycontroltemplate}" /> </canvas> </grid> </usercontrol>

i'd animation able target either textbox in template (instead of "mycontentcontrol"), either position or name. i'm starting animation in usercontrol's code-behind phone call this:

visualstatemanager.gotoelementstate(this, "tostate", true);

when run (replacing "mycontentcontrol" "theblock"), following:

invalidoperationexception: 'theblock1' name cannot found in name scope of 'storyboardtesting.stage'.

which makes sense. there way address either block using property names? need avoid codebehind since xaml beingness generated @ runtime.

i'd highly suggest larn using blend when working on wpf projects. while xaml keyboard skills indeed useful, blend helpful. took me 5 minutes build next illustration you, it's datatemplate has states.

(first created empty datatemplate, edited in blend)

user can press of 2 buttons on bottom , current state changed.

as you'll see below, behaviors proven helpful handling states, no code-behind @ all.

xaml:

<window x:class="wpfapplication3.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:wpfapplication3="clr-namespace:wpfapplication3" title="mainwindow" width="525" height="350"> <window.resources> <wpfapplication3:myobject x:key="myobject1" /> <datatemplate x:key="template1" datatype="wpfapplication3:myobject"> <grid> <grid.columndefinitions> <columndefinition /> <columndefinition /> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="37*" /> <rowdefinition height="13*" /> </grid.rowdefinitions> <visualstatemanager.visualstategroups> <visualstategroup x:name="visualstategroup"> <visualstate x:name="red"> <storyboard> <coloranimationusingkeyframes storyboard.targetname="button" storyboard.targetproperty="(panel.background).(solidcolorbrush.color)"> <easingcolorkeyframe keytime="0" value="red" /> </coloranimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="green"> <storyboard> <coloranimationusingkeyframes storyboard.targetname="button" storyboard.targetproperty="(panel.background).(solidcolorbrush.color)"> <easingcolorkeyframe keytime="0" value="lime" /> </coloranimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <button x:name="button" grid.rowspan="1" grid.columnspan="2" width="100" height="100" margin="2" content="button" fontsize="26.667" /> <button grid.row="1" width="auto" margin="2" content="state1"> <i:interaction.triggers> <i:eventtrigger eventname="click"> <ei:gotostateaction statename="red" /> </i:eventtrigger> </i:interaction.triggers> </button> <button grid.row="1" grid.column="1" width="auto" margin="2" content="state2"> <i:interaction.triggers> <i:eventtrigger eventname="click"> <ei:gotostateaction statename="green" /> </i:eventtrigger> </i:interaction.triggers> </button> </grid> </datatemplate> </window.resources> <grid> <contentcontrol content="{staticresource myobject1}" contenttemplate="{staticresource template1}" /> </grid> </window>

code-behind:

namespace wpfapplication3 { public partial class mainwindow { public mainwindow() { initializecomponent(); } } internal class myobject { public string category { get; set; } public int value { get; set; } } }

edit

to reply point of question, states belong datatemplate; defining these states outside of doesn't create sense , you've experienced not possible, , reason !

imagine utilize template in 2 different places, share same state ? of course of study no, states have defined within it, not outside.

c# wpf xaml animation