locked
How do you programmatically move a Image?

    Question

  • I'm trying to simple move an image in my game. I'm using the image object and I am using Visual Studio Professional 2013 with Blend. Thank you in advance! :D

    -Mallot1

    Thursday, June 26, 2014 10:50 PM

Answers

  • Hi,

    If you only want to move a image, you can refer to the codes below:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Image Width="200" Height="200" Source="Assets/image.png"
        ManipulationMode="TranslateX,TranslateY" 
        ManipulationDelta="Rectangle_ManipulationDelta_1" />
        </Grid>
     private void Rectangle_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
            {
                var image = sender as Image;
                var _Transform = (image.RenderTransform as CompositeTransform)
                    ?? (image.RenderTransform = new CompositeTransform()) as CompositeTransform;
                _Transform.TranslateX += e.Delta.Translation.X;
                _Transform.TranslateY += e.Delta.Translation.Y;
            }
    

    If you want have move animation in your image control, you can use storyboard animations to it:

        <Page.Resources>
            <Storyboard x:Name="Storyboard1">
                <DoubleAnimationUsingKeyFrames x:Name="TranslateX" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="imageToAnimate">
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames x:Name="TranslateY" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="imageToAnimate">
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Image x:Name="imageToAnimate" Source="/Assets/image.png" Width="150" Height="150" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
    </Grid>
    private void Button_Click(object sender, RoutedEventArgs e)
            {
                EasingDoubleKeyFrame animateX1 = new EasingDoubleKeyFrame();
                animateX1.KeyTime = new TimeSpan(0);
                animateX1.Value = 1;
                EasingDoubleKeyFrame animateX2 = new EasingDoubleKeyFrame();
                animateX2.KeyTime = new TimeSpan(0, 0, 2);
                animateX2.Value = 250;
    
                EasingDoubleKeyFrame animateY1 = new EasingDoubleKeyFrame();
                animateY1.KeyTime = new TimeSpan(0);
                animateY1.Value = 1;
                EasingDoubleKeyFrame animateY2 = new EasingDoubleKeyFrame();
                animateY2.KeyTime = new TimeSpan(0, 0, 2);
                animateY2.Value = 250;
    
                TranslateX.KeyFrames.Add(animateX1);
                TranslateX.KeyFrames.Add(animateX2);
    
                TranslateY.KeyFrames.Add(animateY1);
                TranslateY.KeyFrames.Add(animateY2);
    
                Storyboard1.Begin();
    
            }

    For more information about storyboard animations you can refer to some links below:

    http://msdn.microsoft.com/en-us/library/windows/apps/dn376886.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj819807.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, June 27, 2014 2:01 AM