Question

Just a quick question, I’ve been searching for ages on Google. I have a storyboard:

<Storyboard x:Key="ViewLeftToRight" AccelerationRatio=".5" DecelerationRatio=".5">
    <DoubleAnimation Storyboard.TargetName="ReferenceInfo" Storyboard.TargetProperty="Margin" Duration="0:0:0.15" To="{Binding, Width},0,0,0"/>
</Storyboard>

It doesn’t work. I was wondering if there is a way for me to bind the Width of the control to the “left” margin. If I need to use a converter, could you possibly show how it would be written in XAML in the above example?

Thanks!

Answer 1

No, you can’t bind an animation to Margin, because it does not define a corresponding dependency property. There are several alternatives, here are two:

1. Place your object in a Canvas and animate Canvas.Left and Canvas.Top
2. Define a RenderTransform on your object, and animate its X and Y properties.

---

1)

<Canvas>
    <TextBlock Text="test" x:Name="ReferenceInfo" Canvas.Left="0" Canvas.Top="0" />
</Canvas>

Here your storyboard short target the same element ReferenceInfo, but target the attached properties, which you denote using brackets like “(Canvas.Left)”:

<DoubleAnimation 
    Storyboard.TargetName="ReferenceInfo" 
    Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.15" 
    To="{Binding Width}"/>

2)

<TextBlock Text="test" x:Name="ReferenceInfo">
    <TextBlock.RenderTransform>
        <TranslateTransform x:Name="TranslateReferenceInfo" X="0" Y="0" />
    </TextBlock.RenderTransform>
</TextBlock>

The animation would then reference the TranslateTransform itself by name:

<DoubleAnimation 
    Storyboard.TargetName="TranslateReferenceInfo" 
    Storyboard.TargetProperty="X" Duration="0:0:0.15" 
    To="{Binding Width}"/>