12

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();

    }

2 Answers 2

10

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.

0

You can create multiple storyboards and execute them concurrently in order to simultaneously animate multiple objects. See the example in the following article which animates multiple items within a to-do list:

http://www.codeproject.com/Articles/428088/A-Gesture-Driven-Windows-Phone-To-Do-List#swipe

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.