WPF Animate property of child without using Name

children, element, storyboard, wpf, xaml

Solution

Providing that the `UIElement` you are indexing in the animation exists (i.e. already present on the `Canvas`) then you can do the following:

<Canvas x:Name="MyCanvas">
    <Button x:Name="btn" Canvas.Left="20" Canvas.Top="20">A</Button>
    <Button Canvas.Left="40" Canvas.Top="20">B</Button>
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.Target="{Binding ElementName=MyCanvas, Path=Children[0]}"
                                         Storyboard.TargetProperty="(Canvas.Left)" From="0" To="400" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

Notice how I have moved the addition of the Buttons above the `Trigger`. If the Buttons are below the `Trigger` as in your question, trying to access `Children[0]` will throw an `ArgumentOutOfRangeException` because there are no children at this point.

Problem

I'm trying to create a storyboard in XAML that animates a property of one of the child elements of an element which raises an event. But I can't seem to get it to work without using Names, which is something I can't really do in this specific situation. I'm basically trying something like this (much simplified of course): ``` <Canvas> <Canvas.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Children[0].(Canvas.Left)" From="0" To="400" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Button Canvas.Left="20" Canvas.Top="20">A</Button> <Button Canvas.Left="40" Canvas.Top="20">B</Button> </Canvas> ``` Any ideas on how this could be achieved?

Original source