Writing reusable effects in XAML
After playing around a little bit with storyboards, I decided to create a library of reusable visual effects. Examples include whisking a visual element from one side of its container to the other side, fading in/out in the middle of the container etc.
This is easy to accomplish in code, but I'm looking for a way to define such effects in XAML. Naturally, the effects have to be parameterized, so it seems that various property values in the markup should be bound to dynamic resources. Having made this brilliant observation, I don't know how to proceed. Suppose I have a storyboard that targets the translatetransform.X property, using a splinedoublekeyframe to change it. I'd like the value of the keyframe to be based on the width of the panel that contains the targeted element. Can this relationship be expressed in XAML? And if so, can I take this a step further and describe some kind of computation on the width, e.g. width/2 ? I can load the resource and insert the values in code, but that would force me to know the implementation of the effect. I'd like to be able to specify the effect resource by name, load it as a storyboard and run it on some visual element, without knowing what it does.
[1214 byte] By [
dfl] at [2007-12-23]
Hi,
Please check out CompositionTarget to see whether it meets your needs. The CompositionTarget object provides the ability to create custom animations based on a per-frame callback. The implemented object can then be used within XAML. For example, in the following example from the SDK, FollowMouseCanvas effect is used within XAML:
<Page
x:Class="Microsoft.Samples.PerFrameAnimations.ReusableFollowExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ae="clr-namespace:Microsoft.Samples.PerFrameAnimations"
>
<Canvas Background="transparent">
<ae:FollowMouseCanvas Canvas.Left="0" Canvas.Top="0" Background="red" Width="50" Height="50">
<!-- could put more content that will also follow mouse here-->
</ae:FollowMouseCanvas>
<ae:FollowMouseCanvas Canvas.Left="300" Canvas.Top="0" Background="green" Width="50" Height="50">
<!-- could put more content that will also follow mouse here-->
</ae:FollowMouseCanvas>
<ae:FollowMouseCanvas Canvas.Left="0" Canvas.Top="300" Background="blue" Width="50" Height="50">
<!-- could put more content that will also follow mouse here-->
</ae:FollowMouseCanvas>
</Canvas>
</Page>
Hope this helps.Regards,Sriram SubramanianLead Program Manager
