Question

I have a image inside a canvas. When a UserControl loaded, image move up.

<Canvas x:Name="cnvMain"  Width="300" VerticalAlignment="Center" Height="200" SnapsToDevicePixels="True">
    <Image x:Name="Image1"    Width="200"  Stretch="None" Canvas.Bottom="0"  Source="ImageGallery/Desert.jpg" ></Image>
</Canvas>

I used DoubleAnimation.

    DoubleAnimation _Animation;
    private Storyboard _StoryBoard;

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {

        _Animation = new DoubleAnimation();
        _Animation.From = -Image1.ActualHeight;
        _Animation.To = cnvMain.ActualHeight;
        _Animation.RepeatBehavior = RepeatBehavior.Forever;
        _Animation.Duration = new Duration(TimeSpan.Parse("0:0:10"));
        _Animation.FillBehavior = FillBehavior.Stop;
        Storyboard.SetTarget(_Animation, Image1);
        Storyboard.SetTargetProperty(_Animation, new PropertyPath(Canvas.BottomProperty));
        _StoryBoard = new Storyboard();
        _StoryBoard.Children.Add(_Animation);
        _StoryBoard.Begin();
    }

This code work well. My problem is the canvas did not overlay around of image like a frame (Image size is bigger of canvas and I want area of image inside canvas viewed). When I change Canvas to Grid it overlay outside of image but the animation did not work.

Answer 1

Try and use ClipToBounds="True" on your Canvas: