How can I do multiple animations in a single storyboard in C#/XAML?

Question

I'm trying to make a simple Windows Store game in C# and XAML, one that involves hexagonal tiles moving about. This is mostly to help me learn C# and XAML as I've never worked with graphics or even UI coding before.

I've got a method that can move a single hex to the target coordinates, but looking at it now I realize that it is impossible to do multiple moves at once, which is absolutely necessary.

I feel like there's got to be something fundamentally off in my approach, multiple objects moving about a single canvas cannot be an unusual thing, can it? I'm mostly asking this in the hope that someone will point out where I went wrong.

    //moves the hex hexName to coordinates x, y, over a specified duration.
    public void slideHex(int x, int y, string hexName, Duration duration)
    {

        GameStoryboard.Stop();

        Polygon hex = GameCanvas.FindName(hexName) as Polygon;



        TranslateTransform slideTransform = new TranslateTransform();
        slideTransform.X = hex.RenderTransformOrigin.X;
        slideTransform.Y = hex.RenderTransformOrigin.Y;

        hex.RenderTransform = slideTransform;

        DoubleAnimation animX = new DoubleAnimation();
        DoubleAnimation animY = new DoubleAnimation();

        animX.Duration = duration;
        animY.Duration = duration;

        GameStoryboard.Duration = duration;
        GameStoryboard.Children.Add(animX);
        GameStoryboard.Children.Add(animY);

        Storyboard.SetTarget(animX, slideTransform);
        Storyboard.SetTarget(animY, slideTransform);

        Storyboard.SetTargetProperty(animX, "X");
        Storyboard.SetTargetProperty(animY, "Y");

        animX.To = x;
        animY.To = y;

        GameStoryboard.Begin();

    }

Answer 1

A storyboard can contain multiple animations, and each animation can target a different UI element. Here's an example of a storyboard which "pulses" the border colours of three different controls:

<Storyboard x:Name="pulseAnimation" AutoReverse="True">
    <ColorAnimation x:Name="animateLatitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLatitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" />
    <ColorAnimation x:Name="animateLongitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLongitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" />
    <ColorAnimation x:Name="animateHyperlinkTextColour" Storyboard.TargetName="hyperlinkButtonCurrentLocation" From="{StaticResource PhoneForegroundColor}" To="Green" Storyboard.TargetProperty="(HyperlinkButton.Foreground).(SolidColorBrush.Color)" Duration="0:0:0.4" />
</Storyboard>

Your code looks fine - you're already animating multiple properties of slideTransform, and since the target of an animation is a property of the animation rather than the storyboard, there's no reason why you couldn't retarget either animX or animY to a different object altogether.